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

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

export const buttonVariants = cva(styles.btn, {
  variants: {
    intent: {
      inverted: styles.inverted,
      primary: styles.primary,
      secondary: styles.secondary,
      tertiary: styles.tertiary,
      text: styles.text,
      textInverted: styles.text,
    },
    size: {
      small: styles.small,
      medium: styles.medium,
      large: styles.large,
    },
    theme: {
      base: '',
      primaryDark: '',
      primaryStrong: '',
      primaryLight: '',
      secondaryLight: '',
      secondaryDark: '',
      tertiaryLight: '',
      tertiaryDark: '',
    },
    variant: {
      clean: styles.clean,
      default: styles.default,
      icon: styles.icon,
    },
    wrapping: {
      true: styles.wrapping,
    },
    clean: {
      true: styles.clean,
    },
    fullWidth: {
      true: styles.fullWidth,
    },
  },
  defaultVariants: {
    intent: 'primary',
    size: 'medium',
    theme: 'primaryLight',
    variant: 'default',
  },

  compoundVariants: [
    {
      className: styles.basePrimary,
      intent: 'primary',
      theme: 'base',
    },
    {
      className: styles.baseSecondary,
      intent: 'secondary',
      theme: 'base',
    },
    {
      className: styles.baseTertiary,
      intent: 'tertiary',
      theme: 'base',
    },
    {
      className: styles.baseInverted,
      intent: 'inverted',
      theme: 'base',
    },
    {
      className: styles.primaryDarkPrimary,
      intent: 'primary',
      theme: 'primaryDark',
    },
    {
      className: styles.primaryDarkSecondary,
      intent: 'secondary',
      theme: 'primaryDark',
    },
    {
      className: styles.primaryLightPrimary,
      intent: 'primary',
      theme: 'primaryLight',
    },
    {
      className: styles.primaryLightSecondary,
      intent: 'secondary',
      theme: 'primaryLight',
    },
    {
      className: styles.primaryStrongPrimary,
      intent: 'primary',
      theme: 'primaryStrong',
    },
    {
      className: styles.primaryStrongSecondary,
      intent: 'secondary',
      theme: 'primaryStrong',
    },
    {
      className: styles.secondaryDarkPrimary,
      intent: 'primary',
      theme: 'secondaryDark',
    },
    {
      className: styles.secondaryDarkSecondary,
      intent: 'secondary',
      theme: 'secondaryDark',
    },
    {
      className: styles.secondaryLightPrimary,
      intent: 'primary',
      theme: 'secondaryLight',
    },
    {
      className: styles.secondaryLightSecondary,
      intent: 'secondary',
      theme: 'secondaryLight',
    },
    {
      className: styles.tertiaryDarkPrimary,
      intent: 'primary',
      theme: 'tertiaryDark',
    },
    {
      className: styles.tertiaryDarkSecondary,
      intent: 'secondary',
      theme: 'tertiaryDark',
    },
    {
      className: styles.tertiaryLightPrimary,
      intent: 'primary',
      theme: 'tertiaryLight',
    },
    {
      className: styles.tertiaryLightSecondary,
      intent: 'secondary',
      theme: 'tertiaryLight',
    },
    {
      className: styles.baseText,
      intent: 'text',
      theme: 'base',
    },
    {
      className: styles.baseTextInverted,
      intent: 'textInverted',
      theme: 'base',
    },
  ],
})