import * as Colours from "@mui/material/colors"
import { createTheme, 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(themeType: "light" | "dark") {
  if(themeType==="light") return ({
    default: "#f2f2f2",
    paper: "#fafafa"
  })

  return {
    default: "#303030", 
    paper: "#373737",    
  };
}

function options(themeType: "light" | "dark"): ThemeOptions {
  
  const signature = getSignatureColour();
  const accent = getSignatureAccentColour();
  const highlight = themeType === "light" ? "black" : "white";
  const bg = generateBackgroundShades(themeType)
  return {
    zIndex: {
      modal: 1300,
      popover: 1350
    },
    palette: {
      primary: Colours[getPrimaryColour() as keyof typeof Colours],
      secondary: Colours[getSecondaryColour() as keyof typeof Colours],
      background: bg,
      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(",")
    },
    components: {
      MuiAppBar: {
        styleOverrides: {
          colorPrimary: {
            backgroundColor: signature,
            color: accent,
          },
        },
      },
      MuiBottomNavigation: {
        styleOverrides: {
          root: {
            backgroundColor: signature
          }
        }
      },
      MuiBottomNavigationAction: {
        styleOverrides: {
          root: {
            backgroundColor: signature,
            color: Colours["grey"][500],
            "&$selected": {
              color: accent
            }
          }
        },
      },
      MuiCard: {
        styleOverrides: {
          root: {
            borderRadius: "5px",
            "@media (min-width: 600px)": {
              borderRadius: "7px"
            }
          }
        }
      },
      MuiChip: {
        styleOverrides: {
          root: {
            "@media (max-width: 600px)": {
              height: "24px"
            }
          },
          avatar: {
            "@media (max-width: 600px)": {
              height: "24px",
              width: "24px"
            }
          }
        },
      },
      MuiDialog: {
        styleOverrides: {
          paperFullScreen: {
            overflowX: "hidden"
          },
          root: {
            // zIndex: 1500
          }
        },
      },
      MuiDrawer: {
        styleOverrides: {
          root: {
            zIndex: 1300
          }
        },
      },
      MuiSlider: {
        styleOverrides: {
          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: {
        styleOverrides: {
          root: {
            background: "transparent"
          }
        },
      },
      MuiSwitch: {
        styleOverrides: {
          switchBase: {
            color: Colours.grey[400],
            "&$checked": {
              color: Colours.grey[100]
            },
            "&$checked + $track": {
              color: Colours.grey[100]
            }
          },
          checked: {},
          track: {}
        }
      },
      MuiButton: {
        styleOverrides: {
          root: {
            '& .MuiTouchRipple-root': {
              color: accent, // Customize ripple color here
              // color: "white"
            },
            '&:hover': {
              backgroundColor: "rgba(125, 125, 125, 0.2)",
              color: accent,
            },
          },
        },
      },
      MuiListItemButton: {
        styleOverrides: {
          root: {
            '& .MuiTouchRipple-root': {
              color: highlight, 
            },
            '&:hover': {
              color: highlight
            },
          },
        },
      },
      MuiCssBaseline: {
        styleOverrides: {
          body: {
            backgroundColor: bg, // Set your desired background color
            // color: '#333', // Optionally, you can also set the default text color
          },
        },
      },
      MuiSvgIcon: {
        styleOverrides: {
          root: {
            // Set the default icon color for light mode
            // color: "black", // Dark color for icons in light mode
          },
        },
      },
      MuiLink: {
        styleOverrides: {
          root: {
            color: 'inherit', // Default link color
            textDecoration: 'none', // Remove underline if desired
            '&:hover': {
              // color: 'red !important', // Your hover color
            },
          },
        },
      },
      // MuiDataGrid: {
      //   styleOverrides: {
      //     root: {
      //       backgroundColor: "black"
      //     },
      //   },
      // },
    }
  } as ThemeOptions;
}
