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/mdRegular': styles['Title-mdRegular'],
      'Title/sm': styles['Title-sm'],
      'Title/smRegular': styles['Title-smRegular'],
      '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: config.defaultVariants,
} as const

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