import { type MouseEvent } from 'react';
import { useFormContext, useWatch } from 'react-hook-form';

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

import { OPTIONS_QUESTION_TYPES } from 'src/pages/dashboard/Learning/Courses/New/constants';
import { newCourseFields } from 'src/pages/dashboard/Learning/Courses/New/forms';
import { getQuestionElementId } from 'src/pages/dashboard/Learning/Courses/New/utils';
import {
  type Selected,
  type StepsTypes,
} from 'src/pages/dashboard/Learning/Courses/types';
import { QuestionType } from 'src/types/surveys';

import OptionReadOnly from 'src/components/FormInputs/FormOptions/OptionReadOnly';
import {
  FormOptionsTypes,
  type Option,
} from 'src/components/FormInputs/FormOptions/types';

import { QuestionImage } from './QuestionImage';

export type QuestionProps = {
  selected: Selected;
  index: number;
  disabled?: boolean;
  onClick?: () => void;
};

const Question = ({
  index,
  selected,
  disabled = false,
  onClick = () => null,
}: QuestionProps) => {
  const { control } = useFormContext<StepsTypes>();

  const questionsName = newCourseFields.content.modules.tasks.form.questions;
  const questionName = questionsName.detail(
    selected.module,
    selected.task,
    index,
  );

  const question = useWatch({ name: questionName, control });

  const handleClick = (event: MouseEvent<HTMLDivElement>) => {
    event.stopPropagation();
    onClick();
  };

  const pictureUrl = question?.attachments?.[0]?.url || '';

  return (
    <ButtonBase
      component={Stack}
      id="edit-question-button"
      onClick={disabled ? undefined : handleClick}
      disableRipple
      sx={{
        alignItems: 'flex-start',
        justifyContent: 'center',
        borderRadius: '20px',
        borderWidth: '1.5px',
        borderStyle: 'dashed',
        borderColor: 'transparent',
        width: '100%',
        py: 2,
        px: 3,
        gap: 1,
        '&:hover': {
          borderColor: disabled ? undefined : 'gray',
        },
      }}
    >
      <Typography
        id={getQuestionElementId(selected.module, selected.task, index)}
        variant="body1"
        sx={{
          mb: 1,
          ...(question.type === QuestionType.TEXT && {
            width: '100%',
            px: 1.5,
            py: 2,
            borderWidth: '1px',
            borderColor: '#0000003B',
            borderStyle: 'solid',
            borderRadius: 0.5,
            minHeight: '140px',
            height: 'fit-content',
          }),
        }}
      >
        {question.title}
      </Typography>
      <QuestionImage pictureUrl={pictureUrl} />
      {question.description && <Typography>{question.description}</Typography>}
      {OPTIONS_QUESTION_TYPES.includes(question.type) && (
        <Stack>
          {question.choices?.map((option: Option, optionIndex: number) => (
            <OptionReadOnly
              key={option.value}
              option={option}
              index={optionIndex}
              color="success"
              type={
                question.type === QuestionType.MULTIPLE_CHOICE
                  ? FormOptionsTypes.RADIO
                  : FormOptionsTypes.CHECKBOX
              }
            />
          ))}
        </Stack>
      )}
    </ButtonBase>
  );
};

export default Question;