import React, {useCallback, useMemo, useState} from 'react';
import {View, StyleSheet, Pressable} from 'react-native';
import {useTranslation} from 'react-i18next';
import {useNavigation} from '@react-navigation/native';
import {StepType} from '@interfaces/questions';
import {COLORS} from '@shared/colors';
import {downloadFormBlobView} from '@shared/utils';
import {Screens} from '@shared/constants';
import Icon, {IconName} from '@components/Icon';
import Text from '@components/Text';
import ActivityIndicator from '@components/ActivityIndicator';
import {BORDER_RADIUS, SPACING} from '@shared/theme';
import {useAppSelector} from '@redux/utils';

const BUTTONS: {[key: string]: {icon: IconName; label: string}} = {
  MY_ANSWERS: {
    icon: 'description',
    label: 'chats.see_my_answer',
  },
  ANSWERS: {
    icon: 'description',
    label: 'chats.see_answer',
  },
  EDIT: {
    icon: 'editFill',
    label: 'chats.edit_my_answer',
  },
  DOWNLOAD: {
    icon: 'download',
    label: 'chats.download_answer',
  },
};

interface Props {
  isSentByCurrentUser?: boolean;
}

function ButtonMessage({isSentByCurrentUser}: Props) {
  const {t} = useTranslation();
  const navigation = useNavigation();
  const [isLoadingPDF, setIsLoadingPDF] = useState(false);
  const currentForm = useAppSelector(({chats}) => chats.forms.currentForm);

  const onDownloadPress = useCallback(() => {
    if (!currentForm) {
      return;
    }

    setIsLoadingPDF(true);
    downloadFormBlobView(
      {answerId: currentForm.form.id, formId: currentForm.form.templateId},
      () => setIsLoadingPDF(false),
    );
  }, [currentForm]);

  const onAnswerPress = useCallback(() => {
    if (!currentForm) {
      return;
    }

    navigation.navigate(
      currentForm.form.stepsType === StepType.FILE
        ? Screens.PDF_FORM
        : Screens.FORM,
      {
        formId: currentForm.form.id,
        formTemplateId: currentForm.form.templateId,
      },
    );
  }, [currentForm, navigation]);

  const onEditPress = useCallback(() => {
    if (!currentForm) {
      return;
    }

    navigation.navigate(Screens.EDIT_FORM, {
      formId: currentForm.form.id,
      formTemplateId: currentForm.form.templateId,
      onCannotEdit: () => {
        //TODO
      },
      canEditAnswer: true,
    });
  }, [currentForm, navigation]);

  const buttons = useMemo((): {
    icon: IconName;
    label: string;
    loading?: boolean;
    onPress: () => void;
  }[] => {
    const result = [];

    if (currentForm) {
      const isForm = currentForm.form.stepsType !== StepType.FILE;

      isForm &&
        isSentByCurrentUser &&
        currentForm.form.canEditAnswer &&
        result.push({...BUTTONS.EDIT, onPress: onEditPress});

      result.push({
        ...(isSentByCurrentUser ? BUTTONS.MY_ANSWERS : BUTTONS.ANSWERS),
        onPress: onAnswerPress,
      });

      isForm &&
        result.push({
          ...BUTTONS.DOWNLOAD,
          loading: isLoadingPDF,
          onPress: onDownloadPress,
        });
    }
    return result;
  }, [
    currentForm,
    isLoadingPDF,
    isSentByCurrentUser,
    onAnswerPress,
    onDownloadPress,
    onEditPress,
  ]);

  return (
    <View style={styles.container}>
      {buttons.map(({icon, label, loading, onPress}) => (
        <Pressable
          key={label}
          disabled={isLoadingPDF}
          onPress={onPress}
          style={styles.button}>
          <View style={styles.iconContainer}>
            {loading ? (
              <ActivityIndicator color={COLORS.BLACK} />
            ) : (
              <Icon name={icon} size="lg" color={COLORS.DARKEST_GRAY_2} />
            )}
          </View>
          <View style={styles.textContainer}>
            <Text variant="overline" style={styles.text}>
              {t(label)}
            </Text>
          </View>
        </Pressable>
      ))}
    </View>
  );
}

export default ButtonMessage;

export const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    gap: SPACING.x1,
    paddingHorizontal: SPACING.x1,
  },
  button: {
    borderRadius: BORDER_RADIUS.m,
    borderWidth: 1,
    backgroundColor: COLORS.PRIMARY_DARK,
  },
  textContainer: {
    backgroundColor: COLORS.DARKEST_GRAY_2,
    borderBottomLeftRadius: BORDER_RADIUS.m,
    borderBottomRightRadius: BORDER_RADIUS.m,
    paddingHorizontal: 10,
  },
  text: {
    color: COLORS.WHITE,
    lineHeight: 25,
    textAlign: 'center',
  },
  iconContainer: {
    alignItems: 'center',
    backgroundColor: COLORS.WHITE,
    borderTopLeftRadius: BORDER_RADIUS.m,
    borderTopRightRadius: BORDER_RADIUS.m,
    justifyContent: 'center',
    minHeight: 60,
  },
});