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

import { IconThumbDown, IconThumbUp } from '@material-hu/icons/tabler';
import IconButton from '@material-hu/mui/IconButton';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';

import HuTitle from '@material-hu/components/design-system/Title';

import { type SurveyQuestion } from 'src/pages/dashboard/learning/courses/types';

const FormThumbsRating = ({ question }: { question: SurveyQuestion }) => {
  const { control } = useFormContext();
  const { palette } = useTheme();

  const selectedThumbSx = {
    backgroundColor: palette.new.action.button.background.secondary.hover,
    borderColor: palette.new.border.neutral.brand,
    color: palette.new.text.neutral.brand,
    '& svg': {
      color: palette.new.text.neutral.brand,
      stroke: palette.new.text.neutral.brand,
    },
  };

  return (
    <Controller
      name={question?.id}
      control={control}
      rules={{ required: question?.required }}
      render={({ field: { onChange, value } }) => {
        const optionOne = question?.choices[0];
        const optionTwo = question?.choices[1];
        return (
          <Stack sx={{ gap: 1.5 }}>
            <HuTitle
              variant="S"
              title={question?.title}
            />
            <Stack sx={{ gap: 1, flexDirection: 'row' }}>
              <IconButton
                onClick={() => onChange(optionTwo)}
                variant="secondary"
                sx={{
                  ...(value === optionTwo ? selectedThumbSx : undefined),
                  '& svg': {
                    transform: 'rotateY(180deg)',
                  },
                }}
              >
                <IconThumbDown />
              </IconButton>
              <IconButton
                onClick={() => onChange(optionOne)}
                variant="secondary"
                sx={value === optionOne ? selectedThumbSx : undefined}
              >
                <IconThumbUp />
              </IconButton>
            </Stack>
          </Stack>
        );
      }}
    />
  );
};

export default FormThumbsRating;
