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

declare module '@mui/material/styles' {
  interface Theme {
    customComponents: {
      orderSummary: {
        height: number;
      };
    };
  }

  interface ThemeOptions {
    customComponents?: {
      orderSummary?: {
        height?: number;
      };
    };
  }
  interface Palette {
    queued: {
      text: string;
      cake: string;
      main: string;
    };
    packing: {
      text: string;
      cake: string;
      main: string;
    };
    incomplete: {
      text: string;
      cake: string;
      main: string;
    };
    completed: {
      text: string;
      cake: string;
      main: string;
    };
    cooking: {
      text: string;
      cake: string;
      main: string;
    };
    waiting: {
      text: string;
      cake: string;
      main: string;
    };
    canceled: {
      text: string;
      cake: string;
      main: string;
    };
    scanning: {
      text: string;
      cake: string;
      main: string;
    };
  }
  interface PaletteOptions {
    queued: {
      text?: string;
      cake?: string;
      main?: string;
    };
    packing: {
      text?: string;
      cake?: string;
      main?: string;
    };
    incomplete: {
      text?: string;
      cake?: string;
      main?: string;
    };
    completed: {
      text?: string;
      cake?: string;
      main?: string;
    };
    cooking: {
      text?: string;
      cake?: string;
      main?: string;
    };
    waiting: {
      text?: string;
      cake?: string;
      main?: string;
    };
    canceled: {
      text?: string;
      cake?: string;
      main?: string;
    };
    scanning: {
      text?: string;
      main?: string;
      cake?: string;
    };
  }
}

const breakpointsTheme = createTheme();

const theme = createTheme({
  breakpoints: {
    values: {
      ...breakpointsTheme.breakpoints.values,
      xs: 0,
      sm: 600,
      md: 900,
      lg: 1300,
      xl: 1536,
    },
  },
  palette: {
    mode: 'light',
    primary: {
      main: '#121F56',
      light: '#3C81DB',
      dark: '#121F56',
    },
    secondary: {
      main: '#1DB3D1',
      light: '#B3EFFF',

      dark: '#052550',
    },
    text: {
      primary: '#232323',
      secondary: '#7B7B7B',
    },
    background: {
      default: '#F3F8FF',
    },
    divider: '#A7A7A7',
    error: { main: '#D32F2F', light: '#F5D7D7', dark: '#C62828' },
    warning: { main: '#ED6C02', light: '#FF9800' },
    success: { main: '#2E7D32', light: '#4CAF50', dark: '#1B5E20' },
    info: { main: '#1DB3D1', light: '#03A9F4' },
    queued: {
      text: '#011A5B',
      main: '#1DB3D1',
      cake: '#D8F7FE',
    },
    cooking: {
      text: '#011A5B',
      main: '#011A5B',
      cake: '#E6E8EF',
    },
    packing: {
      text: '#232323',
      main: '#FF9800',
      cake: '#FCE7D7',
    },
    incomplete: {
      main: '#D32F2F',
      cake: '#E99595',
    },
    waiting: {
      main: '#01579B',
      cake: '#7EA9CC',
    },
    completed: {
      text: '#232323',
      main: '#2E7D32',
      cake: '#B2DCB3',
    },
    canceled: { main: '#232323', cake: '#878787' },
    scanning: {
      text: '#232323',
      main: '#DF99B9',
      cake: '#F1D0DF',
    },
  },
  typography: {
    h1: {
      fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
      fontWeight: 300,
      fontSize: '40px',
      lineHeight: '50px',
    },
    h2: {
      fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
      fontWeight: 300,
      fontSize: '34px',
      lineHeight: '40px',
    },
    h3: {
      fontFamily: 'Poppins, Roboto, Helvetica, Arial, sans-serif',
      fontWeight: 500,
      fontSize: '30px',
      lineHeight: '36px',
    },
    h4: {
      fontFamily: 'Poppins, Roboto, Helvetica, Arial, sans-serif',
      fontWeight: 600,
      fontSize: '28px',
      lineHeight: '32px',
    },
    h5: {
      fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
      fontWeight: 500,
      fontSize: '22px',
      lineHeight: '26px',
    },
    h6: {
      fontFamily: 'Poppins, Roboto, Helvetica, Arial, sans-serif',
      fontWeight: 600,
      fontSize: '16px',
      lineHeight: '20px',
    },
    body1: {
      fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
      fontWeight: 400,
      fontSize: '16px',
      lineHeight: '18px',
    },
    body2: {
      fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
      fontWeight: 400,
      fontSize: '14px',
      lineHeight: '16px',
    },
    subtitle1: {
      fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
      fontWeight: 300,
      fontSize: '16px',
      lineHeight: '24px',
    },
    subtitle2: {
      fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
      fontWeight: 500,
      fontSize: '14px',
      lineHeight: '16px',
    },
    caption: {
      fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
      fontWeight: 400,
      fontSize: '12px',
      lineHeight: '16px',
    },
    overline: {
      fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
      fontWeight: 400,
      fontSize: '14px',
      lineHeight: '16px',
    },
  },
  mixins: {
    toolbar: {
      height: 56,
    },
  },
  components: {
    MuiListItemIcon: {
      styleOverrides: {
        root: {
          minWidth: '46px',
        },
      },
    },
    MuiGrid: {
      styleOverrides: {
        item: {
          paddingTop: 12,
        },
      },
    },
    MuiAutocomplete: {
      styleOverrides: {
        popper: {
          zIndex: 100001,
        },
      },
    },
  },
  customComponents: {
    orderSummary: {
      height: 62,
    },
  },
});

export default theme;