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

import styles from './iconButton.module.css'

const variantKeys = {
  theme: {
    Primary: 'Primary',
    Tertiary: 'Tertiary',
    Inverted: 'Inverted',
    Black: 'Black',
  },
  style: {
    Normal: 'Normal',
    Muted: 'Muted',
    Elevated: 'Elevated',
    Faded: 'Faded',
  },
} as const

export const config = {
  variants: {
    theme: {
      [variantKeys.theme.Primary]: styles['theme-primary'],
      [variantKeys.theme.Tertiary]: styles['theme-tertiary'],
      [variantKeys.theme.Inverted]: styles['theme-inverted'],
      [variantKeys.theme.Black]: styles['theme-black'],
    },
    // Some variants cannot be used in combination with certain style variants.
    // The style variant will be applied using the compoundVariants.
    style: {
      [variantKeys.style.Normal]: '',
      [variantKeys.style.Muted]: '',
      [variantKeys.style.Elevated]: '',
      [variantKeys.style.Faded]: '',
    },
  },
  compoundVariants: [
    // Primary should only use Normal
    { theme: variantKeys.theme.Primary, className: styles['style-normal'] },

    // Tertiary should only use Elevated
    {
      theme: variantKeys.theme.Tertiary,
      className: styles['style-elevated'],
    },

    // Black should only use Muted
    { theme: variantKeys.theme.Black, className: styles['style-muted'] },

    // Inverted can use any style variant
    {
      theme: variantKeys.theme.Inverted,
      style: variantKeys.style.Normal,
      className: styles['style-normal'],
    },
    {
      theme: variantKeys.theme.Inverted,
      style: variantKeys.style.Muted,
      className: styles['style-muted'],
    },
    {
      theme: variantKeys.theme.Inverted,
      style: variantKeys.style.Elevated,
      className: styles['style-elevated'],
    },
    {
      theme: variantKeys.theme.Inverted,
      style: variantKeys.style.Faded,
      className: styles['style-faded'],
    },
  ],
  defaultVariants: {
    theme: variantKeys.theme.Primary,
    style: variantKeys.style.Normal,
  },
}

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