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,
      [Theme.bassinSeven]: 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)