import { type FC } from 'react';
import { type UseControllerProps } from 'react-hook-form';

import Rating, {
  type IconContainerProps,
  type RatingProps,
} from '@material-hu/mui/Rating';
import Stack from '@material-hu/mui/Stack';
import { alpha, useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

import Button from '@material-hu/components/design-system/Buttons/Button';

import HugoFormNumberRating from './HugoFormNumberRating';

export type NumberContainerProps = IconContainerProps & {
  value: number;
  max: number;
  selectedValue?: string;
  hoveredValue?: number;
  readonly?: boolean;
};

export function IconContainer({
  value,
  selectedValue,
  max,
  readonly = false,
  ...other
}: NumberContainerProps) {
  const theme = useTheme();
  const selected = value === parseInt(selectedValue as string);

  const primaryColor = readonly
    ? theme.palette.new.background.layout.default
    : theme.palette.new.text.neutral.brand;

  const getColors = () => {
    if (selected) {
      return {
        backgroundColor: alpha(primaryColor, 0.12),
        color: primaryColor,
      };
    }

    return {
      backgroundColor: theme.palette.new.background.layout.tertiary,
      color: primaryColor,
    };
  };

  return (
    <Stack
      {...other}
      component="span"
      sx={{
        width: '100%',
        color: 'red',
      }}
    >
      <Button
        variant="tertiary"
        sx={{
          minWidth: '40px',
          width: '100%',
          border: ({ palette }) =>
            `1px solid ${readonly ? palette.new.border.neutral.default : alpha(primaryColor, 0.4)}`,
          ...(value < max && {
            borderRightColor: 'transparent',
            borderTopRightRadius: 0,
            borderBottomRightRadius: 0,
          }),
          ...(value > 1 && {
            ml: '-1px',
            borderTopLeftRadius: 0,
            borderBottomLeftRadius: 0,
          }),
          ...getColors(),
        }}
      >
        <Typography
          variant="globalS"
          sx={{
            color: readonly
              ? theme.palette.new.text.neutral.disabled
              : 'inherit',
          }}
        >
          {value}
        </Typography>
      </Button>
    </Stack>
  );
}

type Props = RatingProps &
  Omit<UseControllerProps, 'name'> & {
    name?: string;
    max?: number;
    lowHelperText?: string;
    highHelperText?: string;
    disableForm?: boolean;
    disableFormValue?: string | number;
  };

const HugoNumberRating: FC<Props> = ({
  name,
  lowHelperText,
  highHelperText,
  rules,
  defaultValue,
  value,
  max = 5,
  disableForm = false,
  ...rest
}) => {
  const hasForm = name && !disableForm;

  return (
    <Stack
      sx={{
        width: 1,
        flexDirection: 'column',
        gap: 1,
      }}
    >
      {hasForm && (
        <HugoFormNumberRating
          name={name}
          max={max}
          defaultValue={defaultValue}
          {...rest}
        />
      )}
      {!hasForm && (
        <Rating
          value={Number(value)}
          max={max}
          IconContainerComponent={iconProps => (
            <IconContainer
              {...iconProps}
              max={max}
              selectedValue={String(value)}
              readonly={true}
            />
          )}
          getLabelText={v => `${v}`}
          highlightSelectedOnly
          sx={{
            cursor: 'default',
            width: '100%',
            '& .MuiRating-iconFocus': {
              transform: 'none !important',
              scale: '1 !important',
            },
            '.MuiRating-pristine': {
              display: 'none',
            },
            '& > label': {
              flex: 1,
            },
          }}
          {...rest}
        />
      )}
      {(lowHelperText || highHelperText) && (
        <Stack
          sx={{
            gap: 1,
            flexDirection: 'row',
            justifyContent: 'space-between',
            alignItems: 'center',
          }}
        >
          {lowHelperText && (
            <Typography
              variant="globalXS"
              sx={{
                color: ({ palette }) => palette.new.text.neutral.disabled,
              }}
            >
              {lowHelperText}
            </Typography>
          )}
          {highHelperText && (
            <Typography
              variant="globalXS"
              sx={{
                color: ({ palette }) => palette.new.text.neutral.disabled,
              }}
            >
              {highHelperText}
            </Typography>
          )}
        </Stack>
      )}
    </Stack>
  );
};

export default HugoNumberRating;
