import * as Colours from "@mui/material/colors"
import { createTheme, darken, lighten, responsiveFontSizes, Theme, ThemeOptions } from '@mui/material/styles';
import {
  getPrimaryColour,
  getSecondaryColour,
  getSignatureAccentColour,
  getSignatureColour
} from "../services/whiteLabel";

export function CreateTheme(themeType: "light" | "dark"): Theme {
  return responsiveFontSizes(createTheme(options(themeType)));
}

function generateBackgroundShades(baseColor: string, themeType: "light" | "dark") {
  if(themeType==="light") return ({
    default: lighten(baseColor, 0.75),
    paper: lighten(baseColor, 0.75)
  })

  return {
    default: darken(baseColor, 0.50),  // Lightens the base color for background.default
    paper: darken(baseColor, 0.50),    // Slightly less light for background.paper
  };
}

function options(themeType: "light" | "dark"): ThemeOptions {
  
  const signature = getSignatureColour();
  const accent = getSignatureAccentColour();
  return {
    palette: {
      primary: Colours[getPrimaryColour() as keyof typeof Colours],
      secondary: Colours[getSecondaryColour() as keyof typeof Colours],
      background: generateBackgroundShades(Colours.grey[800], themeType),
      mode: themeType,
      bxt: {
        primaryBlue: "#005bb0",
        lightBlue: "#1a86ec",
        darkBlue: "#081d55",
        rubberDuckYellow: "#ffd45c"
      },
      status: {
        succes: "#4caf50",
        unknown: "0288d1",
        unstable: "rgb(189, 200, 33)",
        risk: "#ffd642",
        warning: "#ffb74d",
        alert: "#f44336"
      }
    },
    // typography: {
    //   fontFamily: [
    //     "Open Sans",
    //     "-apple-system",
    //     "BlinkMacSystemFont",
    //     '"Segoe UI"',
    //     '"Helvetica Neue"',
    //     "Arial",
    //     "sans-serif",
    //     '"Apple Color Emoji"',
    //     '"Segoe UI Emoji"',
    //     '"Segoe UI Symbol"'
    //   ].join(",")
    // },
    overrides: {
      MuiAppBar: {
        colorPrimary: {
          backgroundColor: signature,
          color: accent
        }
      },
      MuiBottomNavigation: {
        root: {
          backgroundColor: signature
        }
      },
      MuiBottomNavigationAction: {
        root: {
          backgroundColor: signature,
          color: Colours["grey"][500],
          "&$selected": {
            color: accent
          }
        }
      },
      MuiCard: {
        root: {
          borderRadius: "5px",
          "@media (min-width: 600px)": {
            borderRadius: "7px"
          }
        }
      },
      MuiChip: {
        root: {
          "@media (max-width: 600px)": {
            height: "24px"
          }
        },
        avatar: {
          "@media (max-width: 600px)": {
            height: "24px",
            width: "24px"
          }
        }
      },
      MuiDialog: {
        paperFullScreen: {
          overflowX: "hidden"
        }
      },
      MuiSlider: {
        root: {
          height: 5
        },
        thumb: {
          height: 18,
          width: 18,
          marginTop: -6,
          marginLeft: -9,
          "&:focus,&:hover,&$active": {
            boxShadow: "inherit"
          }
        },
        active: {},
        valueLabel: {
          left: "calc(-50% + 2px)"
        },
        track: {
          height: 7,
          borderRadius: 4
        },
        rail: {
          height: 7,
          borderRadius: 4
        },
        vertical: {
          "& .MuiSlider-thumb": {
            marginLeft: "-8px !important"
          }
        }
      },
      MuiStepper: {
        root: {
          background: "transparent"
        }
      },
      MuiSwitch: {
        switchBase: {
          color: Colours.grey[400],
          "&$checked": {
            color: Colours.grey[100]
          },
          "&$checked + $track": {
            color: Colours.grey[100]
          }
        },
        checked: {},
        track: {}
      }
    }
  } as ThemeOptions;
}