import React, {useState} from 'react';
import {Pressable} from 'react-native';
import {useTranslation} from 'react-i18next';
import {useDispatch} from 'react-redux';
import Icon, {IconName} from '@components/Icon';
import {BottomModalMenuOption, BottomModalMenu} from '@components/Modals';
import {Responsible} from '@interfaces/topics';
import {FormAttributes, FormStepType} from '@modules/form/interfaces';
import {assignMeForm, updateFormStatus} from '@modules/form/services';
import {updateCurrentForm} from '@modules/chat/redux';
import {Chat} from '@modules/chat/interfaces';
import FormStatusModal from '@modules/form/screens/FormChatDetail/components/FormStatusModal';
import {useAppSelector} from '@redux/utils';
import {showSnackbar} from '@redux/dispatchers';

export function ChatFormActionButton() {
  const dispatch = useDispatch();
  const {t} = useTranslation();
  const [showModal, setShowModal] = useState(false);
  const [isFormStatusModalVisible, setIsFormStatusModalVisible] =
    useState(false);
  const currentForm = useAppSelector(({chats}) => chats.forms.currentForm!);

  const onMorePress = () => {
    setShowModal(true);
  };

  const onClose = () => {
    setShowModal(false);
  };

  const onEditModalClose = () => {
    setIsFormStatusModalVisible(false);
  };

  const options = currentForm?.form.withInProgressStatus
    ? [
        {
          key: 'update',
          leftIcon: 'edit' as IconName,
          label: t('forms.update_status'),
        },
      ]
    : ([
        currentForm?.status === FormStepType.UNASSIGNED && {
          key: 'assign',
          leftIcon: 'add' as IconName,
          label: t('chats.assign_me'),
        },
        currentForm?.status === FormStepType.ASSIGNED && {
          key: 'finish',
          leftIcon: 'check' as IconName,
          label: t('chats.finalize'),
        },
      ].filter(Boolean) as BottomModalMenuOption[]);

  const onOptionPress = async (id: string) => {
    onClose();

    if (!currentForm) {
      return;
    }

    try {
      if (id === 'assign') {
        const response = await assignMeForm(currentForm.id);

        dispatch(
          updateCurrentForm({
            status: response.status as FormStepType,
            chat: response.chat as unknown as Chat,
            form: response.form as unknown as FormAttributes,
            responsible: response.responsible as unknown as Responsible,
            responsibleId: response.responsibleId,
          }),
        );

        showSnackbar({
          title: t('chats.successfully_assigned_query'),
          variant: 'success',
        });
      } else if (id === 'finish') {
        const response = await updateFormStatus({
          id: currentForm.id,
          status: FormStepType.CLOSED,
        });

        dispatch(
          updateCurrentForm({
            status: response.status as FormStepType,
            chat: response.chat as unknown as Chat,
            form: response.form as unknown as FormAttributes,
            responsible: response.responsible as unknown as Responsible,
            responsibleId: response.responsibleId,
          }),
        );

        showSnackbar({
          title: t('chats.successfully_finalized_query'),
          variant: 'success',
        });
      } else if (id === 'edit') {
        setTimeout(() => {
          setIsFormStatusModalVisible(true);
        }, 500);
      }
    } catch (error) {
      // Do nothing
    }
  };

  return (
    <>
      <Pressable onPress={onMorePress}>
        <Icon name="moreVert" />
      </Pressable>
      <BottomModalMenu
        isVisible={showModal}
        onClose={onClose}
        options={options}
        onOptionPress={onOptionPress}
        title={t('general.options')}
      />
      <FormStatusModal
        formId={currentForm.form.id}
        isVisible={isFormStatusModalVisible}
        onClose={onEditModalClose}
        options={currentForm.possibleStatusDestinations}
        withInProgressStatus={currentForm.form.withInProgressStatus}
      />
    </>
  );
}