import { createTheme, Shadows, ThemeOptions } from '@mui/material/styles';
import { useTheme as useMuiTheme, Theme } from '@mui/material/styles';
import { amber, red } from '@mui/material/colors';
import { ThemeProvider } from '@mui/material/styles';
const generateShadows = (color: string): Shadows => {
  return [
    'none',
    `0px 2px 1px -1px ${color}`,
    `0px 1px 1px 0px ${color}`,
    `0px 1px 3px 0px ${color}`,
    `0px 2px 4px -1px ${color}`,

    `0px 3px 5px -1px ${color}`,
    `0px 3px 5px -1px ${color}`,
    `0px 4px 5px -2px ${color}`,
    `0px 5px 5px -3px ${color}`,
    `0px 5px 6px -3px ${color}`,

    `0px 6px 6px -3px ${color}`,
    `0px 6px 7px -4px ${color}`,
    `0px 7px 8px -4px ${color}`,
    `0px 7px 8px -4px ${color}`,
    `0px 8px 9px -5px ${color}`,

    `0px 8px 9px -5px ${color}`,
    `0px 9px 10px -5px ${color}`,
    `0px 9px 11px -6px ${color}`,
    `0px 10px 12px -6px ${color}`,
    `0px 10px 13px -6px ${color}`,

    `0px 11px 13px -7px ${color}`,
    `0px 11px 14px -7px ${color}`,
    `0px 12px 15px -7px ${color}`,
    `0px 12px 16px -8px ${color}`,
    `0px 13px 17px -8px ${color}`,
  ];
};
export const themeOptions: ThemeOptions = {
  // @ts-ignore
  // cssVariables: true,
  palette: {
    primary: {
      main: '#ffc107', // amber[300]
    },
    secondary: {
      main: '#ffa000', // amber[500]
    },
    divider: amber[200],
    common: {
      white: '#ffa000',
    },
    text: {
      primary: amber[600],
      secondary: amber[600],
    },
    background: {
      default: '#ffffff', // 设置默认背景颜色
      // paper: '#f5f5f5',   // 设置纸张背景颜色
    },
    error: {
      main: red[500],
    },
  },
  shadows: generateShadows('rgba(255, 193, 7, 0.2)'),
  typography: {
    // fontFamily: 'Roboto, sans-serif',
  },
  components: {
    MuiButtonBase: {
      defaultProps: {
        disableRipple: true,
      },
      styleOverrides: {
        root: {
          '&:hover': {
            backgroundColor: amber[100],
          },
        },
      },
    },
    MuiButtonGroup: {
      styleOverrides: {
        root: {
          '& .MuiButton-root': {
            borderColor: amber[600],
          },
        },
      },
    },
    MuiTextField: {
      styleOverrides: {
        root: {
          '& .MuiOutlinedInput-root': {
            '& fieldset': {
              borderColor: amber[300],
            },
            '&:hover fieldset': {
              borderColor: amber[500],
            },
            '& .MuiInputBase-input': {
              color: amber[600],
            },
          },
          '& .MuiInputLabel-root': {
            color: amber[600],
          },
        },
      },
    },
    MuiSelect: {
      styleOverrides: {
        root: {
          '& .MuiOutlinedInput-notchedOutline': {
            borderColor: amber[300],
          },
          '&:hover .MuiOutlinedInput-notchedOutline': {
            borderColor: amber[500],
          },
          '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
            borderColor: amber[500],
          },
          '& .MuiSelect-icon': {
            color: amber[500], // Set arrow icon color to primary
          },
        },
      },
    },
    MuiCard: {
      styleOverrides: {
        root: {
          // border: `1px solid ${amber[300]}`,
        },
      },
    },
  },
};

/**
 * https://bareynol.github.io/mui-theme-creator/
 */
export const theme = createTheme(themeOptions);

/**
 *
 * @returns
 */
export const useTheme = () => {
  return useMuiTheme<Theme>();
};

/**
 * 自定义主题设置。
 * @param param0 
 * @returns 
 */
export const CustomThemeProvider = ({ children, themeOptions: customThemeOptions }: { children: React.ReactNode; themeOptions?: ThemeOptions }) => {
  const theme = createTheme(customThemeOptions || themeOptions);
  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
};