import { useMemo } from 'react';

import { useTheme } from '@mui/material';

const SHADES = [100, 300, 400, 500, 700, 900, 950] as const;

export const useChartColors = () => {
  const theme = useTheme();

  return useMemo(() => {
    const brand = theme.palette.new.graphics.brand;
    const purple = theme.palette.new.graphics.purple;
    const isLight = theme.palette.mode === 'light';

    const colorOptions = [
      ...SHADES.map(shade => brand[shade]),
      ...SHADES.map(shade => purple[shade]),
    ];

    const contrastColorOptions = [
      ...Array.from({ length: SHADES.length }, () => ({
        light: isLight ? brand[100] : brand[950],
        dark: isLight ? brand[950] : brand[100],
      })),
      ...Array.from({ length: SHADES.length }, () => ({
        light: isLight ? purple[100] : purple[950],
        dark: isLight ? purple[950] : purple[100],
      })),
    ];

    const blackInk = theme.palette.new.graphics.blackInk;
    const fallbackColor = blackInk[500];
    const defaultContrast = {
      light: theme.palette.new.background.elements.default,
      dark: blackInk[950],
    };

    return {
      colorOptions,
      fallbackColor,
      getColor: (index: number) =>
        colorOptions[index % colorOptions.length] || fallbackColor,
      getContrastColors: (index: number) =>
        contrastColorOptions[index % contrastColorOptions.length] ||
        defaultContrast,
    };
  }, [theme]);
};
