import { CSSProperties } from "react";
import { proxy } from "valtio";
//utils
import { pxToRem, spacing } from "./utils";

export const state = proxy<{
  type: "light" | "dark";
  setType: (type: "light" | "dark") => void;
}>({
  type: "light",
  setType: (type) => {
    state.type = type;
  },
});

const theme = {
  typography: {
    headline: {
      large: {
        fontFamily: "Roboto",
        fontSize: 32,
        fontWeight: 400,
        lineHeight: 40 / 32,
      } as CSSProperties,
      medium: {
        fontFamily: "Roboto",
        fontSize: 28,
        fontWeight: 400,
        lineHeight: 36 / 28,
      } as CSSProperties,
      small: {
        fontFamily: "Roboto",
        fontSize: 24,
        fontWeight: 400,
        lineHeight: 32 / 24,
      } as CSSProperties,
    },
    title: {
      large: {
        fontFamily: "Roboto",
        fontSize: 22,
        fontWeight: 400,
        lineHeight: 28 / 22,
      } as CSSProperties,
      medium: {
        fontFamily: "Roboto",
        fontSize: 16,
        fontWeight: 500,
        lineHeight: 24 / 16,
        letterSpacing: 0.1,
      } as CSSProperties,
      small: {
        fontFamily: "Roboto",
        fontSize: 14,
        fontWeight: 500,
        lineHeight: 20 / 14,
        letterSpacing: 0.1,
      } as CSSProperties,
    },
    label: {
      large: {
        fontFamily: `-apple-system, "Segoe UI", Roboto`,
        fontSize: 14,
        fontWeight: 500,
        lineHeight: 20 / 14,
        letterSpacing: 0.1,
      } as CSSProperties,
      medium: {
        fontFamily: "Roboto",
        fontSize: 12,
        fontWeight: 500,
        lineHeight: 16 / 12,
        letterSpacing: 0.5,
      } as CSSProperties,
      small: {
        fontFamily: "Roboto",
        fontSize: 11,
        fontWeight: 500,
        lineHeight: 16 / 11,
        letterSpacing: 0.5,
      } as CSSProperties,
    },
    body: {
      large: {
        fontFamily: "Roboto",
        fontSize: 16,
        fontWeight: 400,
        lineHeight: 24 / 16,
        letterSpacing: 0.5,
      } as CSSProperties,
      medium: {
        fontFamily: "Roboto",
        fontSize: 14,
        fontWeight: 400,
        lineHeight: 20 / 14,
        letterSpacing: 0.25,
      } as CSSProperties,
      small: {
        fontFamily: "Roboto",
        fontSize: 12,
        fontWeight: 400,
        lineHeight: 16 / 12,
        letterSpacing: 0.4,
      } as CSSProperties,
    },
    h1: {
      fontFamily: "Roboto",
      fontSize: "2.25rem",
      fontWeight: 400,
      lineHeight: "1.22",
    } as CSSProperties,
    h2: {
      fontFamily: "Roboto",
      fontSize: "2rem",
      fontWeight: 400,
      lineHeight: "1.25",
    } as CSSProperties,
    h3: {
      fontFamily: "Roboto",
      fontSize: "1.75rem",
      fontWeight: 400,
      lineHeight: "1.285",
    } as CSSProperties,
    h4: {
      fontFamily: "Roboto",
      fontSize: "1.5rem",
      fontWeight: 400,
      lineHeight: "1.333",
    } as CSSProperties,
    h5: {
      fontFamily: "Roboto",
      fontSize: "1.25rem",
      fontWeight: 400,
      lineHeight: "1.272",
    } as CSSProperties,
    h6: {
      fontFamily: "Roboto",
      fontSize: "1rem",
      fontWeight: 400,
      lineHeight: "1.333",
    } as CSSProperties,
    display: {
      large: {
        fontFamily: "Roboto",
        fontSize: 57,
        fontWeight: 400,
        lineHeight: 64 / 57,
        letterSpacing: -0.25,
      } as CSSProperties,
      medium: {
        fontFamily: "Roboto",
        fontSize: 45,
        fontWeight: 400,
        lineHeight: 52 / 45,
      } as CSSProperties,
      small: {
        fontFamily: "Roboto",
        fontSize: 36,
        fontWeight: 400,
        lineHeight: 44 / 36,
      } as CSSProperties,
    },
    display1: {
      fontFamily: "Roboto",
      fontSize: "4rem",
      fontWeight: 400,
      lineHeight: "1.187",
      letterSpacing: "-0.031rem",
    } as CSSProperties,
    display2: {
      fontFamily: "Roboto",
      fontSize: "3.562rem",
      fontWeight: 400,
      lineHeight: "1.122",
      letterSpacing: "-0.016rem",
    } as CSSProperties,
    display3: {
      fontFamily: "Roboto",
      fontSize: "2.813rem",
      fontWeight: 400,
      lineHeight: "1.155",
    } as CSSProperties,
    subhead1: {
      fontFamily: "Roboto",
      fontSize: "1rem",
      fontWeight: 500,
      lineHeight: "1.5",
      letterSpacing: "0.006rem",
    } as CSSProperties,
    subhead2: {
      fontFamily: "Roboto",
      fontSize: "0.875rem",
      fontWeight: 500,
      lineHeight: "1.428",
      letterSpacing: "0.006rem",
    } as CSSProperties,
    button: {
      fontFamily: "Roboto",
      fontSize: "0.875rem",
      fontWeight: 500,
      lineHeight: "1.428",
      letterSpacing: "0.006rem",
    } as CSSProperties,
    body1: {
      fontFamily: "Roboto",
      fontSize: "1rem",
      fontWeight: 400,
      lineHeight: "1.5",
      letterSpacing: "0.031rem",
    } as CSSProperties,
    body2: {
      fontFamily: "Roboto",
      fontSize: "0.875rem",
      fontWeight: 400,
      lineHeight: "1.428",
      letterSpacing: "0.016rem",
    } as CSSProperties,
    caption: {
      fontFamily: "Roboto",
      fontSize: "0.75rem",
      fontWeight: 400,
      lineHeight: "1.333",
      letterSpacing: "0.025rem",
    } as CSSProperties,
    overline: {
      fontFamily: "Roboto",
      fontSize: "0.75rem",
      fontWeight: 500,
      lineHeight: "1.333",
      letterSpacing: "0.031rem",
    } as CSSProperties,
    labelSmall: {
      fontFamily: "Roboto",
      fontSize: 11,
      fontWeight: 500,
      lineHeight: 16 / 11,
      letterSpacing: 0.5,
    } as CSSProperties,
  },
  colorStyles: {
    type: "light" as "light" | "dark",
    sys: {
      light: {
        primary: "rgba(103, 80, 164, 1)",
        onPrimary: "#FFFFFF",
        primaryContainer: "#EADDFF",
        onPrimaryContainer: "#21005D",
        secondary: "#625B71",
        onSecondary: "#FFFFFF",
        secondaryContainer: "#E8DEF8",
        onSecondaryContainer: "#1D192B",
        tertiary: "#7D5260",
        onTertiary: "#FFFFFF",
        tertiaryContainer: "#FFD8E4",
        onTertiaryContainer: "#31111D",
        error: "#B3261E",
        onError: "#FFFFFF",
        errorContainer: "#F9DEDC",
        onErrorContainer: "#410E0B",
        background: "#FFFFFF",
        onBackground: "#1C1B1F",
        surface: "#FFFBFE",
        onSurface: "#1C1B1F",
        surfaceVariant: "#E7E0EC",
        onSurfaceVariant: "#49454F",
        outline: "#79747E",
        inverseOnSurface: "#F4EFF4",
        inverseSurface: "#3313033",
      },
      dark: {
        primary: "#D0BCFF",
        onPrimary: "#381E72",
        primaryContainer: "#4F378B",
        onPrimaryContainer: "#EADDFF",
        secondary: "#CCC2DC",
        onSecondary: "#332D41",
        secondaryContainer: "#4A4458",
        onSecondaryContainer: "#E8DEF8",
        tertiary: "#EFB8C8",
        onTertiary: "#492532",
        tertiaryContainer: "#633B48",
        onTertiaryContainer: "#FFD8E4",
        error: "#F2B8B5",
        onError: "#601410",
        errorContainer: "#8C1D18",
        onErrorContainer: "#F9DEDC",
        background: "#1C1B1F",
        onBackground: "#E6E1E5",
        surface: "#1C1B1F",
        onSurface: "#E6E1E5",
        surfaceVariant: "#49454F",
        onSurfaceVariant: "#CAC4D0",
        outline: "#938F99",
        inverseOnSurface: "#1C1B1F",
        inverseSurface: "#E6E1E5",
      },
    },
    ref: {
      primary: {
        primary0: "#000000",
        primary10: "#21005D",
        primary20: "#381E72",
        primary30: "#4F378B",
        primary40: "#6750A4",
        primary50: "#7F67BE",
        primary60: "#9A82DB",
        primary70: "#B69DF8",
        primary80: "#D0BCFF",
        primary90: "#EADDFF",
        primary95: "#F6EDFF",
        primary99: "#FFFBFE",
        primary100: "#FFFFFF",
      },
      secondary: {
        secondary0: "#000000",
        secondary10: "#1D192B",
        secondary20: "#332D41",
        secondary30: "#4A4458",
        secondary40: "#1625B71",
        secondary50: "#7A7289",
        secondary60: "#958DA5",
        secondary70: "#B0A7C0",
        secondary80: "#CCC2DC",
        secondary90: "#E8DEF8",
        secondary95: "#F6EDFF",
        secondary99: "#FFFBFE",
        secondary100: "#FFFFFF",
      },
      tertiary: {
        tertiary0: "#000000",
        tertiary10: "#31111D",
        tertiary20: "#492532",
        tertiary30: "#633B48",
        tertiary40: "#7D5260",
        tertiary50: "#986977",
        tertiary60: "#B58392",
        tertiary70: "#D29DAC",
        tertiary80: "#EFB8C8",
        tertiary90: "#FFD8E4",
        tertiary95: "#FFECF1",
        tertiary99: "#FFFBFA",
        tertiary100: "#FFFFFF",
      },
      neutral: {
        neutral0: "#000000",
        neutral10: "#1C1B1F",
        neutral20: "#313033",
        neutral30: "#484649",
        neutral40: "#605D62",
        neutral50: "#787579",
        neutral60: "#939094",
        neutral70: "#AEAAAE",
        neutral80: "#C9C5CA",
        neutral90: "#E6E1E5",
        neutral95: "#F4EFF4",
        neutral99: "#FFFBFE",
        neutral100: "#FFFFFF",
      },
      neutralVariant: {
        neutralVariant0: "#000000",
        neutralVariant10: "#1D1A22",
        neutralVariant20: "#322F37",
        neutralVariant30: "#49454F",
        neutralVariant40: "#605D66",
        neutralVariant50: "#79747E",
        neutralVariant60: "#938F99",
        neutralVariant70: "#AEA9B4",
        neutralVariant80: "#CAC4D0",
        neutralVariant90: "#E7E0EC",
        neutralVariant95: "#F5EEFA",
        neutralVariant99: "#FFFBFE",
        neutralVariant100: "#FFFFFF",
      },
      error: {
        error0: "#000000",
        error10: "#410E0B",
        error20: "#601410",
        error30: "#8C1D18",
        error40: "#B3261E",
        error50: "#DC362E",
        error60: "#E46962",
        error70: "#EC928E",
        error80: "#F2B8B5",
        error90: "#F9DEDC",
        error95: "#FCEEEE",
        error99: "#FFFBF9",
        error100: "#FFFFFF",
      },
    },
    readOnly: {
      light: {
        surface1: `linear-gradient(0deg, rgba(103, 80, 164, 0.05), rgba(103, 80, 164, 0.05)), #FFFBFE;`,
        surface2: `linear-gradient(0deg, rgba(103, 80, 164, 0.08), rgba(103, 80, 164, 0.08)), #FFFBFE;`,
        surface3: `linear-gradient(0deg, rgba(103, 80, 164, 0.11), rgba(103, 80, 164, 0.11)), #FFFBFE;`,
        surface4: `linear-gradient(0deg, rgba(103, 80, 164, 0.12), rgba(103, 80, 164, 0.12)), #FFFBFE;`,
        surface5: `linear-gradient(0deg, rgba(103, 80, 164, 0.14), rgba(103, 80, 164, 0.14)), #FFFBFE;`,
        black: `#000000`,
        white: `#FFFFFF`,
        primary: {
          opacity08: `rgba(103, 80, 164, 0.08)`,
          opacity12: `rgba(103, 80, 164, 0.12)`,
          opacity16: `rgba(103, 80, 164, 0.16)`,
        },
        onPrimary: {
          opacity08: `rgba(255, 255, 255, 0.08)`,
          opacity12: `rgba(255, 255, 255, 0.12)`,
          opacity16: `rgba(255, 255, 255, 0.16)`,
        },
        onPrimaryContainer: {
          opacity08: `rgba(33, 0, 93, 0.08)`,
          opacity12: `rgba(33, 0, 93, 0.12)`,
          opacity16: `rgba(33, 0, 93, 0.16)`,
        },
        secondary: {
          opacity08: `rgba(98, 91, 113, 0.08)`,
          opacity12: `rgba(98, 91, 113, 0.12)`,
          opacity16: `rgba(98, 91, 113, 0.16)`,
        },
        onSecondary: {
          opacity08: `rgba(255, 255, 255, 0.08)`,
          opacity12: `rgba(255, 255, 255, 0.12)`,
          opacity16: `rgba(255, 255, 255, 0.16)`,
        },
        onSecondaryContainer: {
          opacity08: `rgba(29, 25, 43, 0.08)`,
          opacity12: `rgba(29, 25, 43, 0.12)`,
          opacity16: `rgba(29, 25, 43, 0.16)`,
        },
        tertiary: {
          opacity08: `rgba(125, 82, 96, 0.08)`,
          opacity12: `rgba(125, 82, 96, 0.12)`,
          opacity16: `rgba(125, 82, 96, 0.16)`,
        },
        onTertiary: {
          opacity08: `rgba(255, 255, 255, 0.08)`,
          opacity12: `rgba(255, 255, 255, 0.12)`,
          opacity16: `rgba(255, 255, 255, 0.16)`,
        },
        onTertiaryContainer: {
          opacity08: `rgba(49, 17, 29, 0.08)`,
          opacity12: `rgba(49, 17, 29, 0.12)`,
          opacity16: `rgba(49, 17, 29, 0.16)`,
        },
        primaryContainer: {
          opacity08: `rgba(234, 221, 255, 0.08)`,
          opacity12: `rgba(234, 221, 255, 0.12)`,
          opacity16: `rgba(234, 221, 255, 0.16)`,
        },
        secondaryContainer: {
          opacity08: `rgba(232, 222, 248, 0.08)`,
          opacity12: `rgba(232, 222, 248, 0.12)`,
          opacity16: `rgba(232, 222, 248, 0.16)`,
        },
        tertiaryContainer: {
          opacity08: `rgba(255, 216, 228, 0.08)`,
          opacity12: `rgba(255, 216, 228, 0.12)`,
          opacity16: `rgba(255, 216, 228, 0.16)`,
        },
        error: {
          opacity08: `rgba(179, 38, 30, 0.08)`,
          opacity12: `rgba(179, 38, 30, 0.12)`,
          opacity16: `rgba(179, 38, 30, 0.16)`,
        },
        errorContainer: {
          opacity08: `rgba(249, 222, 220, 0.08)`,
          opacity12: `rgba(249, 222, 220, 0.12)`,
          opacity16: `rgba(249, 222, 220, 0.16)`,
        },
        onError: {
          opacity08: `rgba(255, 255, 255, 0.08)`,
          opacity12: `rgba(255, 255, 255, 0.12)`,
          opacity16: `rgba(255, 255, 255, 0.16)`,
        },
        onErrorContainer: {
          opacity08: `rgba(65, 14, 11, 0.08)`,
          opacity12: `rgba(65, 14, 11, 0.12)`,
          opacity16: `rgba(65, 14, 11, 0.16)`,
        },
        background: {
          opacity08: `rgba(255, 251, 254, 0.08)`,
          opacity12: `rgba(255, 251, 254, 0.12)`,
          opacity16: `rgba(255, 251, 254, 0.16)`,
        },
        onBackground: {
          opacity08: `rgba(28, 27, 31, 0.08)`,
          opacity12: `rgba(28, 27, 31, 0.12)`,
          opacity16: `rgba(28, 27, 31, 0.16)`,
        },
        surface: {
          opacity08: `rgba(255, 251, 254, 0.08)`,
          opacity12: `rgba(255, 251, 254, 0.12)`,
          opacity16: `rgba(255, 251, 254, 0.16)`,
        },
        onSurface: {
          opacity08: `rgba(28, 27, 31, 0.08)`,
          opacity12: `rgba(28, 27, 31, 0.12)`,
          opacity16: `rgba(28, 27, 31, 0.16)`,
        },
        surfaceVariant: {
          opacity08: `rgba(231, 224, 236, 0.08)`,
          opacity12: `rgba(231, 224, 236, 0.12)`,
          opacity16: `rgba(231, 224, 236, 0.16)`,
        },
        onSurfaceVariant: {
          opacity08: `rgba(73, 69, 79, 0.08)`,
          opacity12: `rgba(73, 69, 79, 0.12)`,
          opacity16: `rgba(73, 69, 79, 0.16)`,
        },
        outline: {
          opacity08: `rgba(121, 116, 126, 0.08)`,
          opacity12: `rgba(121, 116, 126, 0.12)`,
          opacity16: `rgba(121, 116, 126, 0.16)`,
        },
        inverseSurface: {
          opacity08: `rgba(49, 48, 51, 0.08)`,
          opacity12: `rgba(49, 48, 51, 0.12)`,
          opacity16: `rgba(49, 48, 51, 0.16)`,
        },
        inverseOnSurface: {
          opacity08: `rgba(244, 239, 244, 0.08)`,
          opacity12: `rgba(244, 239, 244, 0.12)`,
          opacity16: `rgba(244, 239, 244, 0.16)`,
        },
      },
      dark: {
        surface1: `linear-gradient(0deg, rgba(208, 188, 255, 0.05), rgba(208, 188, 255, 0.05)), #1C1B1F;`,
        surface2: `linear-gradient(0deg, rgba(208, 188, 255, 0.08), rgba(208, 188, 255, 0.08)), #1C1B1F;`,
        surface3: `linear-gradient(0deg, rgba(208, 188, 255, 0.11), rgba(208, 188, 255, 0.11)), #1C1B1F;`,
        surface4: `linear-gradient(0deg, rgba(208, 188, 255, 0.12), rgba(208, 188, 255, 0.12)), #1C1B1F;`,
        surface5: `linear-gradient(0deg, rgba(208, 188, 255, 0.14), rgba(208, 188, 255, 0.14)), #1C1B1F;`,
        black: `#000000`,
        white: `#FFFFFF`,
        primary: {
          opacity08: `rgba(208, 188, 255, 0.08)`,
          opacity12: `rgba(208, 188, 255, 0.12)`,
          opacity16: `rgba(208, 188, 255, 0.16)`,
        },
        onPrimary: {
          opacity08: `rgba(56, 30, 114, 0.08)`,
          opacity12: `rgba(56, 30, 114, 0.12)`,
          opacity16: `rgba(56, 30, 114, 0.16)`,
        },
        onPrimaryContainer: {
          opacity08: `rgba(234, 221, 255, 0.08)`,
          opacity12: `rgba(234, 221, 255, 0.12)`,
          opacity16: `rgba(234, 221, 255, 0.16)`,
        },
        secondary: {
          opacity08: `rgba(204, 194, 220, 0.08)`,
          opacity12: `rgba(204, 194, 220, 0.12)`,
          opacity16: `rgba(204, 194, 220, 0.16)`,
        },
        onSecondary: {
          opacity08: `rgba(51, 45, 65, 0.08)`,
          opacity12: `rgba(51, 45, 65, 0.12)`,
          opacity16: `rgba(51, 45, 65, 0.16)`,
        },
        onSecondaryContainer: {
          opacity08: `rgba(232, 222, 248, 0.08)`,
          opacity12: `rgba(232, 222, 248, 0.12)`,
          opacity16: `rgba(232, 222, 248, 0.16)`,
        },
        tertiary: {
          opacity08: `rgba(239, 184, 200, 0.08)`,
          opacity12: `rgba(239, 184, 200, 0.12)`,
          opacity16: `rgba(239, 184, 200, 0.16)`,
        },
        onTertiary: {
          opacity08: `rgba(73, 37, 50, 0.08)`,
          opacity12: `rgba(73, 37, 50, 0.12)`,
          opacity16: `rgba(73, 37, 50, 0.16)`,
        },
        onTertiaryContainer: {
          opacity08: `rgba(255, 216, 228, 0.08)`,
          opacity12: `rgba(255, 216, 228, 0.12)`,
          opacity16: `rgba(255, 216, 228, 0.16)`,
        },
        primaryContainer: {
          opacity08: `rgba(79, 55, 139, 0.08)`,
          opacity12: `rgba(79, 55, 139, 0.12)`,
          opacity16: `rgba(79, 55, 139, 0.16)`,
        },
        secondaryContainer: {
          opacity08: `rgba(74, 68, 88, 0.08)`,
          opacity12: `rgba(74, 68, 88, 0.12)`,
          opacity16: `rgba(74, 68, 88, 0.16)`,
        },
        tertiaryContainer: {
          opacity08: `rgba(99, 59, 72, 0.08)`,
          opacity12: `rgba(99, 59, 72, 0.12)`,
          opacity16: `rgba(99, 59, 72, 0.16)`,
        },
        error: {
          opacity08: `rgba(242, 184, 181, 0.08)`,
          opacity012: `rgba(242, 184, 181, 0.12)`,
          opacity016: `rgba(242, 184, 181, 0.16)`,
        },
        errorContainer: {
          opacity08: `rgba(140, 29, 24, 0.08)`,
          opacity12: `rgba(140, 29, 24, 0.12)`,
          opacity16: `rgba(140, 29, 24, 0.16)`,
        },
        onError: {
          opacity08: `rgba(96, 20, 16, 0.08)`,
          opacity12: `rgba(96, 20, 16, 0.12)`,
          opacity16: `rgba(96, 20, 16, 0.16)`,
        },
        onErrorContainer: {
          opacity08: `rgba(249, 222, 220, 0.08)`,
          opacity12: `rgba(249, 222, 220, 0.12)`,
          opacity16: `rgba(249, 222, 220, 0.16)`,
        },
        background: {
          opacity08: `rgba(28, 27, 31, 0.08)`,
          opacity12: `rgba(28, 27, 31, 0.12)`,
          opacity16: `rgba(28, 27, 31, 0.16)`,
        },
        onBackground: {
          opacity08: `rgba(230, 225, 229, 0.08)`,
          opacity12: `rgba(230, 225, 229, 0.12)`,
          opacity16: `rgba(230, 225, 229, 0.16)`,
        },
        surface: {
          opacity08: `rgba(28, 27, 31, 0.08)`,
          opacity12: `rgba(28, 27, 31, 0.12)`,
          opacity16: `rgba(28, 27, 31, 0.16)`,
        },
        onSurface: {
          opacity08: `rgba(230, 225, 229, 0.08)`,
          opacity12: `rgba(230, 225, 229, 0.12)`,
          opacity16: `rgba(230, 225, 229, 0.16)`,
        },
        surfaceVariant: {
          opacity08: `rgba(73, 69, 79, 0.08)`,
          opacity12: `rgba(73, 69, 79, 0.12)`,
          opacity16: `rgba(73, 69, 79, 0.16)`,
        },
        onSurfaceVariant: {
          opacity08: `rgba(202, 196, 208, 0.08)`,
          opacity12: `rgba(202, 196, 208, 0.12)`,
          opacity16: `rgba(202, 196, 208, 0.16)`,
        },
        outline: {
          opacity08: `rgba(147, 143, 153, 0.08)`,
          opacity12: `rgba(147, 143, 153, 0.12)`,
          opacity16: `rgba(147, 143, 153, 0.16)`,
        },
        inverseOnSurface: {
          opacity08: `rgba(28, 27, 31, 0.08)`,
          opacity12: `rgba(28, 27, 31, 0.12)`,
          opacity16: `rgba(28, 27, 31, 0.16)`,
        },
        inverseSurface: {
          opacity08: `rgba(230, 225, 229, 0.08)`,
          opacity12: `rgba(230, 225, 229, 0.12)`,
          opacity16: `rgba(230, 225, 229, 0.16)`,
        },
      },
    },
  },
  effectStyles: {
    getElevation: (type: "dark" | "light", level: number) => {
      return new Map([
        [
          "light",
          new Map<number, string>([
            [
              1,
              `0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.3)`,
            ],
            [
              2,
              `0px 2px 6px 2px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.3)`,
            ],
            [
              3,
              `0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0,0,0,0.30)`,
            ],
            [
              4,
              `0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px 0px rgba(0,0,0,0.30)`,
            ],
            [
              5,
              `0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px 0px rgba(0,0,0,0.30)`,
            ],
          ]).get(level),
        ],
        [
          "dark",
          new Map([
            [
              1,
              `0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0,0,0,0.30)`,
            ],
            [
              2,
              `0px 2px 6px 2px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0,0,0,0.30)`,
            ],
            [
              3,
              `0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0,0,0,0.30)`,
            ],
            [
              4,
              `0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px 0px rgba(0,0,0,0.30)`,
            ],
            [
              5,
              `0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px 0px rgba(0,0,0,0.30)`,
            ],
          ]).get(level),
        ],
      ]).get(type) as string;
    },
    light: {
      1: `0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.3);`,
      2: `0px 2px 6px 2px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.3)`,
      3: `0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0,0,0,0.30);`,
      4: `0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px 0px rgba(0,0,0,0.30);`,
      5: `0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px 0px rgba(0,0,0,0.30);`,
    },
    dark: {
      /* offset-x | offset-y | blur-radius | spread-radius | color */
      // box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
      1: `0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0,0,0,0.30);`,
      2: `0px 2px 6px 2px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0,0,0,0.30);`,
      3: `0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0,0,0,0.30);`,
      4: `0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px 0px rgba(0,0,0,0.30);`,
      5: `0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px 0px rgba(0,0,0,0.30);`,
    },
  },
  breakPoints: {
    points(key: "xs" | "sm" | "md" | "lg" | "xl") {
      return new Map<typeof key, number>([
        ["xs", 0],
        ["sm", 600],
        ["md", 905],
        ["lg", 1240],
        ["xl", 1440],
      ]).get(key) as number;
    },
  },
  getZIndex: (surface: "AppBar" | "menu") => {
    return new Map<typeof surface, number>([
      ["AppBar", 1000],
      ["menu", 1100],
    ]).get(surface) as number;
  },
  pxToRem,
  spacing,
};

export default theme;