import { useMemo } from 'react';

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

export type SidebarColors = {
  MAIN_WHITE: string;
  MAIN_LIGHT_GREY: string;
  TITLE_COLOR: string;
  ROW_HOVER: string;
  NESTED_ROW_HOVER: string;
  EXPANDED_ROW: string;
};

export const useSidebarColors = (): SidebarColors => {
  const { palette } = useTheme();

  return useMemo(
    () => ({
      MAIN_WHITE: palette.new.background.elements.default,
      MAIN_LIGHT_GREY: palette.new.background.layout.default,
      TITLE_COLOR: palette.new.text.neutral.lighter,
      ROW_HOVER: palette.new.action.background.neutral.hover,
      NESTED_ROW_HOVER: `color-mix(
        in srgb,
        ${palette.new.action.background.neutral.focus} 80%,
        ${palette.new.action.background.brand.selected}
      )`,
      EXPANDED_ROW: palette.new.action.background.neutral.focus,
    }),
    [palette],
  );
};
