import Tooltip from '@design-system/Tooltip';
import Stack from '@mui/material/Stack';
import { useTheme } from '@mui/material/styles';

import { type SatisfactionChartProps } from './types';

const SatisfactionChart = ({
  promoters,
  detractors,
  neutrals,
  size = 'small',
  getTooltipTitle = (key, value) => `${key}: ${value}`,
}: SatisfactionChartProps) => {
  const total = promoters + detractors + neutrals;
  const theme = useTheme();

  const chartMeta = [
    {
      key: 'detractors',
      value: detractors,
      color: theme.palette.new.graphics.error[600],
    },
    {
      key: 'neutrals',
      value: neutrals,
      color: theme.palette.new.graphics.warning[600],
    },
    {
      key: 'promoters',
      value: promoters,
      color: theme.palette.new.graphics.success[700],
    },
  ] as const;

  return (
    <Stack sx={{ flexDirection: 'row', width: '100%', gap: 0.5 }}>
      {chartMeta.map(({ key, value, color }) => {
        if (value === 0) {
          return null;
        }

        return (
          <Tooltip
            key={key}
            description={getTooltipTitle(key, value)}
            followCursor
          >
            <Stack
              sx={{
                width: `calc(100% * ${value} / ${total})`,
                height: size === 'small' ? 8 : 16,
                backgroundColor: color,
                borderRadius: 1,
              }}
            />
          </Tooltip>
        );
      })}
    </Stack>
  );
};

export default SatisfactionChart;
