import { useTranslation } from 'react-i18next';

import { Circle } from '@mui/icons-material';
import { Stack, Typography, useTheme } from '@mui/material';
import { IconCircleFilled } from '@tabler/icons-react';

import { getColorScoreThreshold } from '../../constants';
import { ScoreType } from '../../types';

type ColorLegendProps = {
  from: number;
  to: number;
  color: string;
};

const ColorLegend = ({ from, to, color }: ColorLegendProps) => {
  const { t } = useTranslation('material_hu_only');
  return (
    <Stack sx={{ flexDirection: 'row', gap: 1, alignItems: 'center' }}>
      <Circle sx={{ color }} />
      <Typography
        sx={{
          fontSize: '14px',
          color: theme => theme.palette.new.text.neutral.lighter,
          whiteSpace: 'nowrap',
        }}
      >
        {t('people_experience.from_to', { from, to })}
      </Typography>
    </Stack>
  );
};

type ScoreTypeLegendProps = {
  scoreTypeId: ScoreType;
};

const ScoreTypeLegend = ({ scoreTypeId }: ScoreTypeLegendProps) => {
  const { t } = useTranslation('material_hu_only');
  const theme = useTheme();
  if (scoreTypeId === ScoreType.DIFFERENCE) {
    return (
      <Stack
        sx={{
          alignItems: 'flex-end',
          gap: 1,
          color: theme.palette.new.text.neutral.lighter,
          fontSize: '14px',
        }}
      >
        <Stack sx={{ flexDirection: 'row', gap: 2 }}>
          <Stack sx={{ flexDirection: 'row', gap: 1 }}>
            <IconCircleFilled
              size={16}
              color={theme.palette.new.graphics.error[600]}
            />
            <Typography sx={{ fontSize: '14px' }}>
              {t('people_experience.negative_difference')}
            </Typography>
          </Stack>
          <Stack sx={{ flexDirection: 'row', gap: 1 }}>
            <Circle sx={{ color: theme.palette.new.graphics.success[600] }} />
            <Typography sx={{ fontSize: '14px' }}>
              {t('people_experience.positive_difference')}
            </Typography>
          </Stack>
        </Stack>
        <Typography
          sx={{ fontSize: '14px' }}
          hidden
        >
          {t('people_experience.difference_legend_description')}
        </Typography>
      </Stack>
    );
  }

  if (scoreTypeId === ScoreType.SCORE) {
    return (
      <Stack sx={{ flexDirection: 'row', gap: 2, flexWrap: 'wrap' }}>
        {getColorScoreThreshold(theme).map(({ from, to, color }) => (
          <ColorLegend
            key={from}
            from={from * 100}
            to={to * 100}
            color={color}
          />
        ))}
      </Stack>
    );
  }
};

export default ScoreTypeLegend;
