import { useFormContext } from 'react-hook-form';

import Stack from '@material-hu/mui/Stack';

import HuFormSelectionCard from '@material-hu/components/composed-components/SelectionCard/form';
import HuCheckbox from '@material-hu/components/design-system/Checkbox/Checkbox';
import HuFormInputClassic from '@material-hu/components/design-system/Inputs/Classic/form';
import HuRadioButton from '@material-hu/components/design-system/RadioButton/RadioButton';

import { AnswerOption, QuestionType } from '../../types';
import { useLokaliseTranslation } from 'src/utils/i18n';

import HelperText from './components/HelperText';
import QuestionCardContainer from './components/QuestionCardContainer';
import ScaleField from './components/ScaleField';

type QuestionFieldProps = {
  type: QuestionType;
  name: string;
  questionTitleElement: React.ReactNode;
  required: boolean;
  options: AnswerOption[];
};

const QuestionField = ({
  type,
  name,
  options,
  questionTitleElement,
}: QuestionFieldProps) => {
  const { watch } = useFormContext();
  const { t } = useLokaliseTranslation('people_experience');

  switch (type) {
    case QuestionType.NPS:
    case QuestionType.LIKERT:
      return (
        <QuestionCardContainer>
          {questionTitleElement}
          <ScaleField
            name={name}
            labels={options.map(option => option.label)}
            subLabels={options.map(option => option.subLabel ?? '')}
            helperTextElement={
              type === QuestionType.NPS ? (
                <HelperText title={t('e_nps_description')} />
              ) : undefined
            }
          />
        </QuestionCardContainer>
      );
    case QuestionType.UNIQ_CHOICE:
      return (
        <Stack sx={{ gap: 1.5 }}>
          {options?.map((option, index) => {
            const optionName = `${name}.${index}`;
            return (
              <HuFormSelectionCard
                key={option.id}
                name={optionName}
                sx={{ width: '100%' }}
                isOnlyOption
              >
                <HuRadioButton
                  isActive={watch(optionName)}
                  label={option.label}
                />
              </HuFormSelectionCard>
            );
          })}
        </Stack>
      );
    case QuestionType.MULTI_CHOICE:
      return (
        <Stack sx={{ gap: 1.5 }}>
          {options?.map((option, index) => {
            const optionName = `${name}.${index}`;
            return (
              <HuFormSelectionCard
                key={option.id}
                name={optionName}
                sx={{ width: '100%' }}
              >
                <HuCheckbox
                  checked={watch(optionName)}
                  label={option.label}
                />
              </HuFormSelectionCard>
            );
          })}
        </Stack>
      );
    default:
      return (
        <HuFormInputClassic
          name={name}
          inputProps={{
            placeholder: t('answer.answer'),
            maxLength: 2500,
            multiline: true,
            hasCounter: true,
          }}
        />
      );
  }
};

export default QuestionField;