import { FontMetrics } from "@capsizecss/core";
import { ButtonProps, Variants } from "design-system/components/Button";
import { ScreenBaseProps } from "design-system/components/Screen";
import { TextProps } from "design-system/components/Text";
import { BoxProps } from "design-system/primitives/Box/Box";
import { ColorThemeKeys, FontSizes, FontTypesAndWeights, FontWeights } from "design-system/theme/types";
import { ButtonVariantProps } from "./getButtonVariants";

type TextVariant = { [name: string]: FontTypesAndWeights & { size: FontSizes; color: ColorThemeKeys } };

export const createButtonVariantOverrides = <T extends Partial<ButtonVariantProps>>(variants: T) => variants;

export const createTextVariants = <T extends TextVariant>(variants: T) => variants;

type FontConfig = Partial<
  Record<FontWeights, { normal: string; italic?: string; marginCorrection?: number }>
>;

export type ThemeConfig = {
  spacing: Record<string, number>;
  radius: Record<string, number>;
  typography: {
    sizes: Record<string, { fontSize: number; lineHeight: number }>;
    fontMetrics: Record<string, FontMetrics | undefined>;
    fontConfig: Record<string, FontConfig>;
  };
};

export const createThemeConfig = <T extends ThemeConfig>(config: T) => config;

export type ThemeColorConfig<K extends string> = Record<K, string>;

export const createThemeColors = <K extends string>(config: {
  dark?: Partial<ThemeColorConfig<K>>;
  light: ThemeColorConfig<K>;
}) => ({ light: config.light, dark: { ...config.light, ...config.dark } });

export type DefaultButton = Omit<ButtonProps, "children" | "variants" | "themecolor"> & {
  variant: Variants;
  themeColor: ColorThemeKeys;
  textVariant: TextProps["variant"];
};

export const createDefaults = (config: {
  Button: DefaultButton;
  Text: Omit<TextProps, "children" | "variants"> & { variant: NonNullable<TextProps["variant"]> };
  Screen: Omit<BoxProps, "backgroundColor"> & { backgroundColor: ColorThemeKeys } & ScreenBaseProps;
}) => config;

export type CreateThemeConfig = {
  defaults: ReturnType<typeof createDefaults>;
  colors: ReturnType<typeof createThemeColors>;
  config: ReturnType<typeof createThemeConfig>;
  variants: {
    Text: ReturnType<typeof createTextVariants>;
    Button: ReturnType<typeof createButtonVariantOverrides>;
  };
};
export const createTheme = <T extends CreateThemeConfig>(config: T) => config;