import { cva } from 'class-variance-authority'

import { deepmerge } from 'deepmerge-ts'
import styles from './chip-button.module.css'
import { config as typographyConfig } from '../Typography/variants'

const variantKeys = {
  variant: {
    Default: 'Default',
    Outlined: 'Outlined',
    FilterRounded: 'FilterRounded',
  },
  style: {
    Medium: 'Medium',
    Large: 'Large',
  },
  typography: {
    Bold: 'Body/Supporting text (caption)/smBold',
    Regular: 'Body/Supporting text (caption)/smRegular',
  },
} as const

export const config = {
  variants: {
    variant: {
      [variantKeys.variant.Default]: styles.Default,
      [variantKeys.variant.Outlined]: styles.Outlined,
      [variantKeys.variant.FilterRounded]: styles.FilterRounded,
    },
    selected: {
      true: '',
      false: '',
    },
    size: {
      [variantKeys.style.Medium]: '',
      [variantKeys.style.Large]: '',
    },
  },
  compoundVariants: [
    {
      variant: variantKeys.variant.Default,
      className: [
        typographyConfig.variants.variant[
          'Body/Supporting text (caption)/smBold'
        ],
      ],
    },
    {
      variant: variantKeys.variant.Outlined,
      className: [
        typographyConfig.variants.variant[
          'Body/Supporting text (caption)/smBold'
        ],
      ],
    },
    {
      variant: variantKeys.variant.FilterRounded,
      size: variantKeys.style.Medium,
      selected: true,
      className: [
        typographyConfig.variants.variant[
          'Body/Supporting text (caption)/smRegular'
        ],
        styles.selected,
        styles.medium,
      ],
    },
    {
      variant: variantKeys.variant.FilterRounded,
      size: variantKeys.style.Medium,
      selected: false,
      className: [
        typographyConfig.variants.variant[
          'Body/Supporting text (caption)/smRegular'
        ],
        styles.medium,
      ],
    },
    {
      variant: variantKeys.variant.FilterRounded,
      size: variantKeys.style.Large,
      selected: true,
      className: [
        typographyConfig.variants.variant[
          'Body/Supporting text (caption)/smRegular'
        ],
        styles.selected,
        styles.large,
      ],
    },
    {
      variant: variantKeys.variant.FilterRounded,
      size: variantKeys.style.Large,
      selected: false,
      className: [
        typographyConfig.variants.variant[
          'Body/Supporting text (caption)/smRegular'
        ],
        styles.large,
      ],
    },
  ],
  defaultVariants: {
    variant: variantKeys.variant.Default,
  },
}

export const variants = cva(styles.chip, config)

const chipConfig = {
  variants: {
    ...config.variants,
  },
  defaultVariants: config.defaultVariants,
} as const

export function withChipButton<T>(config: T) {
  return deepmerge(chipConfig, config)
}