import { type FC, useEffect } from 'react';
import { useFormContext } from 'react-hook-form';

import {
  IconAdjustments,
  IconCopy,
  IconTrash,
} from '@material-hu/icons/tabler';
import IconButton from '@material-hu/mui/IconButton';
import Stack from '@material-hu/mui/Stack';

import Alert from '@material-hu/components/design-system/Alert';
import CardContainer from '@material-hu/components/design-system/CardContainer';
import FormInputClassic from '@material-hu/components/design-system/Inputs/Classic/form';
import FormSwitcher from '@material-hu/components/design-system/Switcher/form';
import Tooltip from '@material-hu/components/design-system/Tooltip';

import { useLokaliseTranslation } from 'src/utils/i18n';

import { QuestionType } from '../../../types';
import { isChoiceQuestion, isInformationQuestion } from '../../../utils';
import { QUESTION_TITLE_MAX_LENGTH, QuestionTypeIcons } from '../../constants';
import { useFormCreation } from '../../contexts/FormCreation';
import { newServiceItemFields } from '../../forms';

import FormFileAttachments from './Attachments/FormFileAttachments';
import AutocompleteForm from './Autocomplete/AutocompleteForm';
import IndexBadge from './IndexBadge';
import QuestionTypeTitle from './QuestionTypeTitle';
import ChoiceForm from './Selection/ChoiceForm';

type Props = {
  index: number;
  showValidations?: boolean;
};

const QuestionCardForm: FC<Props> = ({ index, showValidations = false }) => {
  const { t } = useLokaliseTranslation(['service_management', 'general']);
  const {
    selected,
    openSideMenu,
    toggleSideMenu,
    duplicateQuestion,
    deleteQuestion,
  } = useFormCreation();

  const { watch, setValue, trigger } = useFormContext();

  const questionName = newServiceItemFields.form.sections.questions.detail(
    selected.section,
    index,
  );

  const question = watch(questionName);
  const questionTitleName = newServiceItemFields.form.sections.questions.title(
    selected.section,
    index,
  );

  const questionRequiredName =
    newServiceItemFields.form.sections.questions.required(
      selected.section,
      index,
    );

  const questionGoToSectionOnAnswerName =
    newServiceItemFields.form.sections.questions.goToSectionOnAnswer(
      selected.section,
      index,
    );

  const handleDeleteQuestion = () => {
    deleteQuestion(selected.section, index);
  };

  const handleDuplicate = () => {
    duplicateQuestion(selected.section, index);
  };

  const handleOpenTypeDrawer = () => {
    toggleSideMenu(!openSideMenu);
  };

  const renderQuestionTypeContent = () => {
    switch (question.type) {
      case QuestionType.AUTOCOMPLETE:
        return <AutocompleteForm showValidations={showValidations} />;
      case QuestionType.INFO:
        return (
          <Alert
            title={t('empty_question_alert_title')}
            description={t('empty_question_alert_description')}
            hasClose={false}
            severity="info"
          />
        );
      default:
        return null;
    }
  };

  const showAfterCompleteSectionSwitch =
    question.type === QuestionType.MULTIPLE_CHOICE ||
    question.type === QuestionType.DROPDOWN;

  const isChoiceQuestionType = isChoiceQuestion(question.type);

  useEffect(() => {
    if (isInformationQuestion(question.type)) {
      setValue(questionRequiredName, false);
    }
  }, [question?.type, setValue, questionRequiredName]);

  useEffect(() => {
    if (showValidations) {
      trigger(questionTitleName);
    }
  }, [showValidations, questionTitleName, trigger]);

  const requiredSwitchDisabled = isInformationQuestion(question.type);
  const Icon =
    QuestionTypeIcons[question.type as keyof typeof QuestionTypeIcons] || null;

  return (
    <Stack
      sx={{
        p: 2,
        border: ({ palette }) => `1px solid ${palette.newBase?.brand[400]}`,
        backgroundColor: ({ palette }) =>
          palette.new.background.layout.tertiary,
        borderRadius: ({ shape }) => shape.borderRadiusL,
        position: 'relative',
        gap: 2,
      }}
    >
      <IndexBadge value={index + 1} />
      <Stack
        sx={{
          gap: 2,
          borderRadius: ({ shape }) => shape.borderRadiusL,
          backgroundColor: ({ palette }) =>
            palette.new.background.layout.default,
          padding: 2,
        }}
      >
        <Stack sx={{ gap: 2 }}>
          <QuestionTypeTitle
            typeLabel={t(`${question.type}`)}
            Icon={Icon}
          />
          <FormInputClassic
            name={questionTitleName}
            rules={{
              required: {
                value: true,
                message: t('empty_field_error'),
              },
            }}
            inputProps={{
              label: t('question'),
              placeholder: t('question_title_placeholder'),
              fullWidth: true,
              hasCounter: false,
              maxLength: QUESTION_TITLE_MAX_LENGTH,
            }}
          />
        </Stack>
        {renderQuestionTypeContent()}
        <FormFileAttachments index={index} />
      </Stack>
      {isChoiceQuestionType && (
        <CardContainer
          fullWidth
          padding={16}
          sx={{
            border: 'none',
            backgroundColor: ({ palette }) =>
              palette.new.background.layout.default,
          }}
        >
          <ChoiceForm
            questionIndex={index}
            questionType={question.type}
            showAfterCompleteSectionSwitch={question.goToSectionOnAnswer}
            showValidations={showValidations}
          />
        </CardContainer>
      )}
      <Stack
        sx={{
          flexDirection: 'row',
          justifyContent: 'space-between',
          alignItems: 'center',
          gap: 1,
        }}
      >
        <Stack
          sx={{ pl: 2, flexDirection: 'row', alignItems: 'center', gap: 2 }}
        >
          <FormSwitcher
            name={questionRequiredName}
            switcherProps={{
              title: t('required_question_switch_label'),
              disabled: requiredSwitchDisabled,
              sx: {
                minWidth: 'fit-content',
              },
            }}
          />
          {showAfterCompleteSectionSwitch && (
            <FormSwitcher
              name={questionGoToSectionOnAnswerName}
              switcherProps={{
                sx: {
                  minWidth: 'fit-content',
                },
                title: t('go_to_section_on_answer'),
              }}
            />
          )}
        </Stack>
        <Stack sx={{ flexDirection: 'row', alignItems: 'center', gap: 2 }}>
          <Tooltip description={t('general:duplicate')}>
            <IconButton
              aria-label="duplicate"
              onClick={handleDuplicate}
            >
              <IconCopy />
            </IconButton>
          </Tooltip>
          <Tooltip description={t('open_options_menu')}>
            <IconButton
              aria-label="type-settings"
              onClick={handleOpenTypeDrawer}
            >
              <IconAdjustments />
            </IconButton>
          </Tooltip>
          <Tooltip description={t('general:delete')}>
            <IconButton
              aria-label="delete"
              onClick={handleDeleteQuestion}
            >
              <IconTrash />
            </IconButton>
          </Tooltip>
        </Stack>
      </Stack>
    </Stack>
  );
};

export default QuestionCardForm;