import * as React from "react";
import { createTheme, alpha, ThemeOptions } from "@mui/material/styles";
import { common } from "@mui/material/colors";
import { PaletteMode } from "@mui/material";

import { darkDesignTokens } from "@/theme/dark";
import { neutral } from "@/theme/color";

declare module "@mui/material/styles" {
  interface PaletteOptions {
    custom?: {
      background?: string;
      button?: {
        secondary: string;
      };
    };

    line?: {
      primary: string;
    };
  }

  interface Palette {
    custom: {
      background?: string;
      button?: {
        secondary: string;
      };
    };

    line?: {
      primary: string;
    };
  }

  interface TypeText {
    light?: string;
  }
}

const lightDesignTokens: Partial<ThemeOptions> = {
  typography: {
    fontFamily: [
      "Inter",
      "-apple-system",
      "BlinkMacSystemFont",
      '"Segoe UI"',
      "Roboto",
      '"Helvetica Neue"',
      "Arial",
      "sans-serif",
      '"Apple Color Emoji"',
      '"Segoe UI Emoji"',
      '"Segoe UI Symbol"',
    ].join(","),
  },
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          borderRadius: "6px",
          textTransform: "none",
          boxShadow: "none",
        },
        // sizeSmall: {
        //   padding: "6px 16px",
        // },
        // sizeMedium: {
        //   padding: "8px 20px",
        // },
        // sizeLarge: {
        //   padding: "11px 24px",
        // },
        // textSizeSmall: {
        //   padding: "7px 12px",
        // },
        // textSizeMedium: {
        //   padding: "9px 16px",
        // },
        // textSizeLarge: {
        //   padding: "12px 16px",
        // },
      },
    },
  },
  palette: {
    custom: {
      background: "#4047FF",
      // button: {
      //   main: "#0F8CFF",
      //   secondary: "linear-gradient(180deg, #0CA6F2 -10%, #3D64EA 100%)",
      // },
      // text: {
      //   primary: "#26263F",
      //   secondary: "#566583",
      //   light: "#DCDFE6",
      // },
      // line: {
      //   primary: "#EAEAEA",
      // },
      // error: {
      //   main: "#ED1212",
      // },
      // success: {
      //   main: "#09D698",
      // },
    },
    background: {
      default: common.white,
      paper: common.white,
    },
    action: {
      active: neutral[500],
      disabled: alpha(neutral[900], 0.38),
      disabledBackground: alpha(neutral[900], 0.12),
      focus: alpha(neutral[900], 0.16),
      hover: alpha("#0CA7FF", 0.1),
      selected: alpha("#0CA7FF", 0.12),
    },
    text: {
      primary: neutral[900],
      secondary: neutral[500],
      disabled: alpha(neutral[900], 0.38),
    },
    primary: {
      main: "#0CA7FF",
      light: "#61C6FF",
      dark: "#0F8CFF",
      contrastText: common.white,
    },
  },
};

const lightDesignTokens_V2: Partial<ThemeOptions> = {
  ...lightDesignTokens,
  palette: {
    ...lightDesignTokens.palette,
    custom: {
      ...lightDesignTokens.palette?.custom,
      button: {
        secondary: "linear-gradient(180deg, #0CA6F2 -10%, #3D64EA 100%)",
      },
    },
    text: {
      primary: "#26263F",
      secondary: "#566583",
      light: "#DCDFE6",
    },
    success: {
      main: "#09D698",
    },
    error: {
      main: "#ED1212",
    },
    line: {
      primary: "#EAEAEA",
    },
    primary: {
      main: "#0F8CFF",
    },
  },
};

export const getDesignTokens = (mode: PaletteMode | "v2light") => ({
  palette: {
    // mode,
    ...(mode === "light" && lightDesignTokens.palette),
    ...(mode === "v2light" && lightDesignTokens_V2.palette),
    // ...(mode === "dark" && darkDesignTokens.palette),
  },
  typography: {
    ...lightDesignTokens.typography,
    ...(mode === "v2light" && lightDesignTokens_V2.typography),
  },
  components: {
    ...(mode === "light" && lightDesignTokens.components),
    ...(mode === "v2light" && lightDesignTokens_V2.components),
    // ...(mode === "dark" && darkDesignTokens.components),
  },
});