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

import Stack from '@material-hu/mui/Stack';
import Typography, { type TypographyProps } from '@material-hu/mui/Typography';

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

type FormNumberInputHugoProps = {
  name: string;
  title: string;
  lowHelperText: string;
  highHelperText: string;
  choices: string[];
  description?: string;
  lowHelperTextSx?: TypographyProps['sx'];
  highHelperTextSx?: TypographyProps['sx'];
};

const FormNumberRatingHugo = ({
  name,
  title,
  lowHelperText,
  highHelperText,
  choices,
  description,
  lowHelperTextSx,
  highHelperTextSx,
}: FormNumberInputHugoProps) => {
  const { control } = useFormContext();

  return (
    <Stack sx={{ gap: 1 }}>
      <HuTitle
        variant="S"
        title={title}
        description={description}
      />
      <Controller
        control={control}
        name={name}
        rules={{ required: true }}
        render={({ field: { ref, ...field } }) => (
          <HuButtonGroup
            {...field}
            fullWidth
            showCheckIcon={false}
            labels={choices as [string, string]}
          />
        )}
      />
      {(lowHelperText || highHelperText) && (
        <Stack
          sx={{
            flexDirection: 'row',
            justifyContent: 'space-between',
            alignItems: 'center',
          }}
        >
          {lowHelperText && (
            <Typography
              variant="globalXS"
              sx={{
                ...lowHelperTextSx,
                color: ({ palette }) =>
                  palette?.textColors?.neutralTextDisabled,
                maxWidth: '60px',
              }}
            >
              {lowHelperText}
            </Typography>
          )}
          {highHelperText && (
            <Typography
              variant="globalXS"
              sx={{
                ...highHelperTextSx,
                color: ({ palette }) =>
                  palette?.textColors?.neutralTextDisabled,
                maxWidth: '60px',
                textAlign: 'right',
              }}
            >
              {highHelperText}
            </Typography>
          )}
        </Stack>
      )}
    </Stack>
  );
};

export default FormNumberRatingHugo;