import { useMemo } from 'react';

import { useChartColors } from '@composed-components/peopleExperience/hooks/useChartColors';
import CardContainer from '@design-system/CardContainer';
import DonutChart from '@design-system/Charts/DonutChart';
import { Stack, useTheme } from '@mui/material';
import { truncate } from 'lodash';

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

const SelectChart = ({
  data,
  onSegmentClick,
  footer,
  slotProps,
}: SelectChartProps) => {
  const theme = useTheme();
  const { getColor } = useChartColors();

  const chartConfig = useMemo(() => {
    const labels = data.map(item => item.label);
    const values = data.map(item => item.value);
    const colors = labels.map((_, index) => getColor(index));

    return {
      labels: labels.map(label => truncate(label, { length: 30 })),
      datasets: [
        {
          data: values,
          backgroundColor: colors,
          borderWidth: 0,
        },
      ],
    };
  }, [data, getColor]);

  return (
    <CardContainer
      color="grey"
      sx={{
        '& .MuiCardContent-root': {
          display: 'flex',
          flexDirection: 'column',
          ...slotProps?.root,
        },
      }}
      fullWidth
      {...slotProps?.cardContainer}
    >
      <Stack
        sx={{
          alignItems: 'center',
          justifyContent: 'center',
          height: '100%',
          width: '100%',
          maxHeight: 320,
        }}
      >
        <DonutChart
          type="doughnut"
          data={chartConfig}
          options={{
            radius: 120,
            layout: {
              padding: 0,
            },
            aspectRatio: 2,
            responsive: true,
            onClick: (_event, elements) => {
              if (!onSegmentClick) return;
              if (elements.length === 0) return;

              const clickedIndex = elements[0].index;
              onSegmentClick(clickedIndex);
            },
            plugins: {
              legend: {
                position: 'right',
                align: 'center',
                fullSize: false,
                onClick: () => null,
                labels: {
                  color: theme.palette.new.text.neutral.default,
                },
              },
              tooltip: {
                displayColors: false,
                yAlign: 'bottom',
                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 || 0;
                    return `${label}: ${value}%`;
                  },
                },
              },
            },
          }}
        />
      </Stack>
      {footer}
    </CardContainer>
  );
};

export default SelectChart;