import { useTheme } from '@material-hu/mui/index';
import Stack from '@material-hu/mui/Stack/Stack';

import BarChart from '@material-hu/components/design-system/Charts/BarChart';

import ServiceItemsStateChartSkeleton from './ServiceItemsStateChartSkeleton';

type ServiceItemsStateChartProps = {
  data: number[];
  labels: string[];
  loading: boolean;
};

const ServiceItemsStateChart = ({
  labels,
  data,
  loading,
}: ServiceItemsStateChartProps) => {
  const theme = useTheme();

  // Main and hover colors for the chart
  const colors = [
    [
      theme.palette.new.action.background.brand.disabled,
      theme.palette.new.text.neutral.disabled,
    ],
    [theme.palette.newBase?.purple[500], theme.palette.newBase?.purple[600]],
    [theme.palette.newBase?.skyBlue[500], theme.palette.newBase?.skyBlue[600]],
    [theme.palette.newBase?.yellow[500], theme.palette.newBase?.yellow[600]],
    [theme.palette.newBase?.green[500], theme.palette.newBase?.green[600]],
    [theme.palette.newBase?.red[500], theme.palette.newBase?.red[600]],
  ];

  if (loading) {
    return <ServiceItemsStateChartSkeleton />;
  }

  return (
    <Stack sx={{ height: 250, width: '100%' }}>
      <BarChart
        type="bar"
        data={{
          labels,
          datasets: [
            {
              data: data,
              backgroundColor: colors.map(color => color[0]),
              hoverBackgroundColor: colors.map(color => color[1]),
              borderRadius: 4,
              borderSkipped: 'start',
            },
          ],
        }}
        options={{
          maintainAspectRatio: false,
          indexAxis: 'y',
          plugins: {
            legend: { display: false },
            tooltip: {
              titleFont: {
                family: 'Roboto',
                size: 16,
                weight: 600,
              },
              bodyFont: {
                family: 'Roboto',
                size: 14,
              },
              callbacks: {
                label: ctx => {
                  const value = ctx.parsed.x;
                  const total = (ctx.dataset.data as number[]).reduce(
                    (a, b) => a + b,
                    0,
                  );

                  if (!value || !total) return '';

                  const percentage = ((value / total) * 100).toFixed(2);
                  return `${percentage}% (${value.toLocaleString()})`;
                },
              },
            },
          },
          scales: {
            x: {
              grid: { display: false },
              border: { display: false },
              ticks: {
                stepSize: Math.max(...data) <= 10 ? 1 : undefined,
                font: { family: 'Roboto', size: 14 },
              },
            },
            y: {
              grid: { display: true },
              border: { display: true },
              ticks: {
                font: { family: 'Roboto', size: 16 },
              },
            },
          },
        }}
      />
    </Stack>
  );
};

export default ServiceItemsStateChart;