import { type FC } from 'react';

import SentimentSatisfiedIcon from '@material-hu/icons/material/SentimentSatisfied';
import SentimentVeryDissatisfiedIcon from '@material-hu/icons/material/SentimentVeryDissatisfied';
import SentimentVerySatisfiedIcon from '@material-hu/icons/material/SentimentVerySatisfied';
import Box, { type BoxProps } from '@material-hu/mui/Box';
import IconButton from '@material-hu/mui/IconButton';
import { styled } from '@material-hu/mui/styles';
import Tooltip from '@material-hu/mui/Tooltip';
import Typography from '@material-hu/mui/Typography';

import { useTranslation } from 'src/components/dashboard/chat/i18n';

const feedbacks = [
  {
    type: 'HAPPY',
    value: 0,
    Icon: SentimentVerySatisfiedIcon,
    label: 'Bien',
  },
  {
    type: 'NORMAL',
    value: 1,
    Icon: SentimentSatisfiedIcon,
    label: 'Normal',
  },
  {
    type: 'SAD',
    value: 2,
    Icon: SentimentVeryDissatisfiedIcon,
    label: 'Mal',
  },
];

const Container = styled(Box)({
  textAlign: 'center',
  marginTop: '3em',
  '& .icon': {
    fontSize: '50px',
  },
});

export type ChatQualifyProps = BoxProps & {
  onFeedback?: (value: number) => void;
};

const ChatQualify: FC<ChatQualifyProps> = props => {
  const { onFeedback, ...boxProps } = props;

  const { t } = useTranslation();

  const handleFeedback = (value: number) => {
    onFeedback && onFeedback(value);
  };

  return (
    <Container {...boxProps}>
      <Typography variant="body2">{t('ARE_YOU_SATISFIED')}</Typography>
      {feedbacks.map(({ type, value, Icon, label }) => (
        <Tooltip
          key={type}
          title={label}
        >
          <IconButton
            onClick={() => handleFeedback(value)}
            aria-label={label}
          >
            <Icon className="icon" />
          </IconButton>
        </Tooltip>
      ))}
      <Typography variant="body2">{t('post:anonymous_answer')}</Typography>
    </Container>
  );
};

export default ChatQualify;