import { cva } from "class-variance-authority"
import { deepmerge } from "deepmerge-ts"

import styles from "./typography.module.css"

export const config = {
  variants: {
    variant: {
      "Title/lg": styles["Title-lg"],
      "Title/md": styles["Title-md"],
      "Title/mdLowCase": styles["Title-mdLowCase"],
      "Title/sm": styles["Title-sm"],
      "Title/smLowCase": styles["Title-smLowCase"],
      "Title/xs": styles["Title-xs"],
      "Title/Decorative/lg": styles["Title-Decorative-lg"],
      "Title/Decorative/md": styles["Title-Decorative-md"],
      "Title/Subtitle/lg": styles["Title-Subtitle-lg"],
      "Title/Subtitle/md": styles["Title-Subtitle-md"],
      "Title/Overline/sm": styles["Title-Overline-sm"],
      "Body/Lead text": styles["Body-Lead-text"],
      "Body/Paragraph/mdRegular": styles["Body-Paragraph-mdRegular"],
      "Body/Paragraph/mdBold": styles["Body-Paragraph-mdBold"],
      "Body/Supporting text (caption)/smRegular":
        styles["Body-Supporting-text-caption-smRegular"],
      "Body/Supporting text (caption)/smBold":
        styles["Body-Supporting-text-caption-smBold"],
      "Body/Underline/md": styles["Body-Underline-md"],
      "Body/Underline/sm": styles["Body-Underline-sm"],
      "Tag/sm": styles["Tag-sm"],
      "Link/md": styles["Link-md"],
      "Link/sm": styles["Link-sm"],
      "Label/xsRegular": styles["Label-xsRegular"],
      "Label/xsBold": styles["Label-xsBold"],
    },
  },
  defaultVariants: {
    variant: "Body/Paragraph/mdRegular",
  },
} as const

export const variants = cva({}, config)

const typographyConfig = {
  variants: {
    typography: config.variants.variant,
  },
  defaultVariants: {
    typography: config.defaultVariants.variant,
  },
} as const

export function withTypography<T>(config: T) {
  return deepmerge(typographyConfig, config)
}