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

import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

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

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

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

  const lowHelperText = question.description?.split(';')[0];
  const highHelperText = question.description?.split(';')[1];

  return (
    <Stack sx={{ gap: 1.5 }}>
      <HuTitle
        variant="S"
        title={question.title}
      />
      <Controller
        control={control}
        name={question.id}
        defaultValue={null}
        rules={{ required: question.required }}
        render={({ field: { ref, ...field } }) => (
          <HuButtonGroup
            {...field}
            fullWidth
            defaultValue={null}
            showCheckIcon={false}
            labels={question.choices}
          />
        )}
      />
      {(lowHelperText || highHelperText) && (
        <Stack
          sx={{
            flexDirection: 'row',
            justifyContent: 'space-between',
            alignItems: 'center',
          }}
        >
          {lowHelperText && (
            <Typography
              variant="globalXXS"
              sx={{
                color: palette.new.text.neutral.disabled,
              }}
            >
              {lowHelperText}
            </Typography>
          )}
          {highHelperText && (
            <Typography
              variant="globalXXS"
              sx={{
                color: palette.new.text.neutral.disabled,
              }}
            >
              {highHelperText}
            </Typography>
          )}
        </Stack>
      )}
    </Stack>
  );
};

export default FormNumberRating;
