import { Link as RouterLink, LinkProps as RouterLinkProps } from "react-router";
import {
  createTheme,
  ThemeOptions,
  ThemeProvider,
  TypographyVariantsOptions,
} from "@mui/material";
import React, { useMemo } from "react";
import ComponentsOverrides from "./components";
import Palette from "./palette";
import CustomShadows from "./shadows";
import Typography from "./typography";
import { ThemeMode } from "../types/config";
import { CustomShadowProps } from "../types/theme";

export const LinkBehavior = React.forwardRef<
  HTMLAnchorElement,
  Omit<RouterLinkProps, "to"> & { href: RouterLinkProps["to"] }
>((props, ref) => {
  const { href, ...other } = props;
  // Map href (Material UI) -> to (react-router)
  return <RouterLink ref={ref} to={href} {...other} />;
});

export default function ThemeCustomization({
  children,
}: {
  children: React.ReactNode;
}) {
  let themeMode: any = ThemeMode.LIGHT;
  const fontFamily = '"Public Sans", sans-serif';

  const getWindowScheme = () => {
    if (typeof window !== "undefined") {
      return window.matchMedia("(prefers-color-scheme: dark)").matches;
    }
    return false;
  };

  if (themeMode === ThemeMode.AUTO) {
    const autoMode = getWindowScheme();
    if (autoMode) {
      themeMode = ThemeMode.DARK;
    } else {
      themeMode = ThemeMode.LIGHT;
    }
  }

  const theme = Palette(themeMode);

  const themeTypography: TypographyVariantsOptions =
    useMemo<TypographyVariantsOptions>(
      () => Typography(fontFamily),
      // eslint-disable-next-line react-hooks/exhaustive-deps
      [fontFamily]
    );
  const themeCustomShadows: CustomShadowProps = useMemo<CustomShadowProps>(
    () => CustomShadows(theme),
    [theme]
  );

  const themeOptions: ThemeOptions = useMemo(
    () => ({
      palette: theme.palette,
      customShadows: themeCustomShadows,
      typography: themeTypography,
    }),
    [theme, themeCustomShadows, themeTypography]
  );

  const themes = createTheme(themeOptions);

  themes.components = ComponentsOverrides(themes);

  return <ThemeProvider theme={themes}>{children}</ThemeProvider>;
}