import * as colors from '@material-hu/mui/colors';
import { useTheme } from '@material-hu/mui/styles';

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

import { getPercent } from '../utils';

import LinearDistributionChart, {
  LinearDistributionChartProps,
} from './LinearDistributionChart';

type FavorabilityChartProps = {
  positives: number;
  neutrals: number;
  negatives: number;
  variant?: LinearDistributionChartProps['variant'];
};

const composeValue = (value: number, total: number) => getPercent(value, total);

const FavorabilityChart = ({
  positives,
  negatives,
  neutrals,
  variant,
}: FavorabilityChartProps) => {
  const { t } = useLokaliseTranslation('people_experience');
  const theme = useTheme();
  const hasData = ![positives, negatives, neutrals].every(value => !value);

  const emptySeries = [
    { id: 'empty', value: 1, color: theme.palette.new.graphics.blackInk[100] },
  ];

  const chartData = [
    {
      serie: {
        id: 'negatives',
        value: negatives,
        color: theme.palette.new.graphics.error[500],
      },
      tooltip: t('NEGATIVES'),
    },
    {
      serie: { id: 'neutrals', value: neutrals, color: colors.orange[500] },
      tooltip: t('NEUTRALS'),
    },
    {
      serie: {
        id: 'positives',
        value: positives,
        color: theme.palette.new.graphics.success[500],
      },
      tooltip: t('POSITIVES'),
    },
  ];
  return (
    <LinearDistributionChart
      series={hasData ? chartData.map(({ serie }) => serie) : emptySeries}
      getTooltipTitle={
        hasData
          ? (value, total, index) =>
              `${chartData[index].tooltip}: ${composeValue(value, total)}%`
          : undefined
      }
      variant={variant}
    />
  );
};

export default FavorabilityChart;
