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

import { DEFAULT_THEME, Theme } from '@scandic-hotels/common/utils/theme'
import styles from './infoCard.module.css'

const variantKeys = {
  theme: {
    'Primary 1': 'Primary 1',
    'Primary 2': 'Primary 2',
    'Primary 3': 'Primary 3',
    Accent: 'Accent',
    Image: 'Image',
    White: 'White',
  },
  height: {
    fixed: 'fixed',
    dynamic: 'dynamic',
  },
} as const

export const infoCardConfig = {
  variants: {
    theme: {
      [variantKeys.theme['Primary 1']]: styles['theme-primary-1'],
      [variantKeys.theme['Primary 2']]: styles['theme-primary-2'],
      [variantKeys.theme['Primary 3']]: styles['theme-primary-3'],
      [variantKeys.theme['Accent']]: styles['theme-accent'],
      [variantKeys.theme['Image']]: styles['theme-image'],
      [variantKeys.theme['White']]: styles['theme-white'],
    },
    height: {
      [variantKeys.height.fixed]: styles['height-fixed'],
      [variantKeys.height.dynamic]: styles['height-dynamic'],
    },
    // Only Theme.scandic can be used with the Angled variant.
    // The topTitleAngled variant will be applied using the compoundVariants.
    topTitleAngled: {
      true: undefined,
      false: undefined,
    },
    // The hotelTheme is not used to apply styles directly,
    // but is needed for compound variants and to get the correct button color.
    // The class name for the hotelTheme is applied on page level.
    hotelTheme: {
      [Theme.scandic]: undefined,
      [Theme.downtownCamper]: undefined,
      [Theme.haymarket]: undefined,
      [Theme.scandicGo]: undefined,
      [Theme.grandHotel]: undefined,
      [Theme.hotelNorge]: undefined,
      [Theme.marski]: undefined,
      [Theme.theDock]: undefined,
    },
  },
  compoundVariants: [
    {
      hotelTheme: Theme.scandic,
      topTitleAngled: true,
      class: styles['top-title-angled'],
    },
  ],
  defaultVariants: {
    theme: variantKeys.theme['Primary 1'],
    height: variantKeys.height.fixed,
    topTitleAngled: false,
    hotelTheme: DEFAULT_THEME,
  },
}

export const infoCardVariants = cva(styles.infoCard, infoCardConfig)