import { useMemo } from 'react';

import CardContainer from '@design-system/CardContainer';
import BarChart from '@design-system/Charts/BarChart';
import { Stack, useTheme } from '@mui/material';

import { type LikertChartProps, SentimentType } from './types';

const LikertChart = ({
  data,
  onBarClick,
  footer,
  slotProps,
}: LikertChartProps) => {
  const theme = useTheme();

  const chartConfig = useMemo(() => {
    return {
      labels: data.map(stat => stat.label),
      datasets: [
        {
          data: data.map(stat => stat.percentage),
          backgroundColor: data.map(stat => {
            switch (stat.sentimentType) {
              case SentimentType.POSITIVE:
                return theme.palette.new.graphics.success[700];
              case SentimentType.NEGATIVE:
                return theme.palette.new.graphics.error[600];
              case SentimentType.NEUTRAL:
                return theme.palette.new.graphics.warning[600];
              default:
                return theme.palette.new.graphics.blackInk[600];
            }
          }),
          borderRadius: {
            topLeft: 8,
            topRight: 8,
          },
          borderSkipped: false,
        },
      ],
    };
  }, [data, theme]);

  return (
    <CardContainer
      color="grey"
      fullWidth
      {...slotProps?.cardContainer}
    >
      <Stack
        sx={{ maxHeight: 412 }}
        {...slotProps?.stack}
      >
        <BarChart
          type="bar"
          data={chartConfig}
          options={{
            responsive: true,
            maintainAspectRatio: false,
            onClick: (_event, elements) => {
              if (!onBarClick) return;
              if (elements.length === 0) return;

              const clickedIndex = elements[0].index;
              onBarClick(clickedIndex);
            },
            plugins: {
              legend: {
                display: false,
              },
              tooltip: {
                position: 'average',
                yAlign: 'bottom',
                displayColors: false,
                backgroundColor: theme.palette.new.background.elements.inverted,
                bodyColor: theme.palette.new.text.neutral.inverted,
                callbacks: {
                  title: () => '',
                  label: context => {
                    const label = context.label || '';
                    const value = context.parsed.y || 0;
                    return `${label}: ${value}%`;
                  },
                },
              },
            },
            scales: {
              x: {
                grid: {
                  display: false,
                },
                ticks: {
                  color: theme.palette.new.text.neutral.lighter,
                },
              },
              y: {
                min: 0,
                max: 100,
                grid: {
                  color: theme.palette.new.border.neutral.divider,
                },
                border: {
                  dash: [4, 4],
                },
                ticks: {
                  stepSize: 20,
                  color: theme.palette.new.text.neutral.lighter,
                },
              },
            },
          }}
        />
      </Stack>
      {footer}
    </CardContainer>
  );
};

export default LikertChart;
