import { Trans, useTranslation } from 'react-i18next';

import {
  Divider,
  type PopoverProps,
  Stack,
  Typography,
  useTheme,
} from '@mui/material';

import CustomPopover from '../../CustomPopover';
import { formatScore } from '../utils';

const getTranslationKey = (value: number) => {
  const baseKey = 'people_experience.score_filtered';

  if (value === 0) {
    return `${baseKey}_equal`;
  }

  return `${baseKey}_${value > 0 ? 'positive' : 'negative'}`;
};

type ResultItemProps = {
  title: string;
  value: number;
};

const ResultItem = ({ title, value }: ResultItemProps) => (
  <Stack sx={{ flexDirection: 'row', gap: 2, justifyContent: 'space-between' }}>
    <Typography
      sx={{
        fontWeight: 'fontWeightMedium',
        color: theme => theme.palette.new.text.neutral.default,
      }}
    >
      {title}
    </Typography>
    <Typography sx={{ color: theme => theme.palette.new.text.neutral.default }}>
      {formatScore(value)}
    </Typography>
  </Stack>
);

const ScoreComparisonPopover = ({
  score,
  baseScore,
  difference,
  ...props
}: PopoverProps & {
  score: number;
  baseScore: number;
  difference: number;
}) => {
  const { t } = useTranslation('material_hu_only');
  const theme = useTheme();

  const getDifferenceTextColor = () => {
    if (difference === 0) {
      return;
    }

    return difference > 0
      ? theme.palette.new.graphics.success[600]
      : theme.palette.new.graphics.error[600];
  };

  return (
    <CustomPopover
      {...props}
      slotProps={{
        paper: {
          sx: {
            p: 0,
          },
        },
      }}
    >
      <Stack sx={{ width: '240px', gap: 1, p: 2 }}>
        {[
          {
            id: 'filtered',
            title: t('people_experience.your_filtered_score'),
            value: score,
          },
          {
            id: 'score',
            title: t('people_experience.survey'),
            value: baseScore,
          },
        ].map(item => (
          <ResultItem
            key={item.id}
            title={item.title}
            value={item.value}
          />
        ))}
        <Divider />
        <Typography sx={{ color: theme.palette.new.text.neutral.default }}>
          <Trans
            i18nKey={getTranslationKey(difference)}
            t={t}
            values={{ count: Math.abs(formatScore(difference)) }}
            components={{
              text: (
                <Typography
                  component="span"
                  color={getDifferenceTextColor()}
                />
              ),
            }}
          />
        </Typography>
      </Stack>
      <Typography
        sx={{
          p: 0.5,
          bgcolor: theme.palette.new.background.feedback.highlight,
          color: theme.palette.new.text.feedback.highlight,
          borderRadius: `0 0 ${theme.spacing(2)} ${theme.spacing(2)}`,
          border: `1px solid ${theme.palette.new.border.states.highlight}`,
          width: '100%',
          textAlign: 'center',
          display: 'block',
        }}
        variant="globalXXS"
      >
        {t('people_experience.results_comparing')}
      </Typography>
    </CustomPopover>
  );
};

export default ScoreComparisonPopover;
