import {
  createTextVariants,
  createThemeColors,
  createThemeConfig,
  createDefaults,
  createTheme,
  createButtonVariantOverrides,
} from "design-system/tools/createTheme";
import latoMetrics from "@capsizecss/metrics/lato";
import { transparentize } from "design-system/tools/colorUtils";

const componentDefaults = createDefaults({
  Button: {
    height: 50,
    variant: "solid",
    textVariant: "button",
    themeColor: "primary",
    borderRadius: "20px",
    paddingHorizontal: "24px",
    onPressAnimatedScale: 0.99,
  },
  Text: { variant: "body", color: "text-base" },
  Screen: {
    paddingHorizontal: "32px",
    paddingVertical: "24px",
    backgroundColor: "canvas-base",
  },
});

const colors = {
  white: "#FFFFFF",
  black: "#000000",
  error: "#D33F3F",
  success: "#2D9B5F",
};

export const themeColors = createThemeColors({
  light: {
    white: colors.white,
    black: colors.black,
    error: colors.error,
    success: colors.success,
    primary: "#EC9707",
    secondary: "#3FA3D3",

    // canvas
    "canvas-base": "#C3C6D5",
    "canvas-card": colors.white,

    // button
    "button-primary": "#EC9707",

    // text
    "text-base": "#111111",
    "text-contrast": "#F3F5F6",

    //input
    "input-background": "rgba(255,255,255,0.2)",
    "input-focussed": "#3FA3D3",
    "input-error": colors.error,

    divider: transparentize("#868586", 0.25),
    "tabBar-inactive": "#868586",
    "tabBar-active": "#EC9707",
  },
  // dark: {},
});

export type ThemeConfig = typeof themeConfig;
const themeConfig = createThemeConfig({
  spacing: {
    "0px": 0,
    "5px": 5,
    "12px": 10,
    "24px": 24,
    "32px": 32,
    "40px": 40,
    "60px": 60,
  },
  radius: {
    "0px": 0,
    "4px": 4,
    "12px": 12,
    "16px": 16,
    "20px": 20,
    "24px": 24,
    full: 9999,
  },
  typography: {
    fontConfig: {
      Lato: {
        hairline: { normal: "Lato-Hairline", italic: "Lato-HairlineItalic" },
        thin: { normal: "Lato-Thin", italic: "Lato-ThinItalic" },
        light: { normal: "Lato-Light", italic: "Lato-LightItalic" },
        normal: { normal: "Lato-Regular", italic: "Lato-RegularItalic" },
        medium: { normal: "Lato-Medium", italic: "Lato-MediumItalic" },
        semibold: { normal: "Lato-Semibold", italic: "Lato-SemiboldItalic" },
        bold: { normal: "Lato-Bold", italic: "Lato-BoldItalic", marginCorrection: 2 },
        heavy: { normal: "Lato-Heavy", italic: "Lato-HeavyItalic" },
        black: { normal: "Lato-Black", italic: "Lato-BlackItalic" },
      },
    },
    fontMetrics: {
      Lato: latoMetrics,
    },
    sizes: {
      "32px": { fontSize: 32, lineHeight: 36 },
      "24px": { fontSize: 24, lineHeight: 28 },
      "20px": { fontSize: 20, lineHeight: 24 },
      "18px": { fontSize: 18, lineHeight: 16 },
      "17px": { fontSize: 17, lineHeight: 24 },
      "15px": { fontSize: 15, lineHeight: 18 },
      "14px": { fontSize: 14, lineHeight: 17 },
      "12px": { fontSize: 12, lineHeight: 16 },
    },
  },
});

const buttonVariants = createButtonVariantOverrides({
  link: { paddingVertical: "5px", textVariant: "body" },
  icon: { width: 30, height: 30, borderRadius: "full" },
});

export type TextVariants = typeof textVariant;
export const textVariant = createTextVariants({
  title: { size: "32px", family: "Lato", weight: "bold", color: "text-base" },
  header: { size: "24px", family: "Lato", weight: "bold", color: "text-base" },
  body: { size: "17px", family: "Lato", weight: "normal", color: "text-base" },
  small: { size: "14px", family: "Lato", weight: "normal", color: "text-base" },
  caption: { size: "12px", family: "Lato", weight: "normal", color: "text-base" },
  button: { size: "24px", family: "Lato", weight: "bold", color: "text-base" },
});

export type CustomTheme = typeof customTheme;

export const customTheme = createTheme({
  defaults: componentDefaults,
  colors: themeColors,
  config: themeConfig,
  variants: { Text: textVariant, Button: buttonVariants },
});