import { FC, ReactElement } from 'react';

import ThumbDownOutlined from '@material-hu/icons/material/ThumbDownOutlined';
import ThumbUpOutlined from '@material-hu/icons/material/ThumbUpOutlined';
import { IconContainerProps } from '@material-hu/mui/Rating';
import Stack from '@material-hu/mui/Stack';

import { useLokaliseTranslation } from 'src/utils/i18n';

import {
  FormRatingProps,
  FormRating,
} from 'src/components/FormInputs/FormRating';
import { ThumbTypes } from 'src/components/FormInputs/FormThumbRating/types';

const thumbIcons: {
  [index: string]: {
    type: ThumbTypes;
    icon: ReactElement;
  };
} = {
  1: {
    type: ThumbTypes.DOWN,
    icon: (
      <ThumbDownOutlined
        color="primary"
        sx={{
          fontSize: '40px',
        }}
      />
    ),
  },
  2: {
    type: ThumbTypes.UP,
    icon: (
      <ThumbUpOutlined
        color="primary"
        sx={{
          fontSize: '40px',
        }}
      />
    ),
  },
};

type ThumbContainerProps = IconContainerProps;

const ThumbContainer: FC<ThumbContainerProps> = props => {
  const { value, ...iconContainerProps } = props;

  return <span {...iconContainerProps}>{thumbIcons[value].icon}</span>;
};

export type FormThumbRatingProps = FormRatingProps & {
  fullWidth?: boolean;
};

export const FormThumbRating: FC<FormThumbRatingProps> = props => {
  const { fullWidth = false, ...ratingProps } = props;

  const { t } = useLokaliseTranslation('backoffice_only');

  const getLabelText = (value: number) => {
    if (!value) return '';
    return t('form_thumb_rating.label', { context: thumbIcons[value].type });
  };

  return (
    <Stack
      sx={{
        flexDirection: 'column',
        gap: '2px',
        width: fullWidth ? '100%' : undefined,
      }}
    >
      <FormRating
        {...ratingProps}
        getLabelText={getLabelText}
        highlightSelectedOnly
        max={2}
        IconContainerComponent={ThumbContainer}
        sx={{
          gap: 3,
          '& > span': {
            flex: 1,
          },
        }}
      />
    </Stack>
  );
};

export default FormThumbRating;