web/packages/design-system/lib/components/InfoCard/utils.ts

import type { VariantProps } from "class-variance-authority"

import { Theme } from "@scandic-hotels/common/utils/theme"
import type { variants as buttonVariants } from "../Button/variants"
import type { infoCardVariants } from "./variants"

type ButtonVariants = VariantProps<typeof buttonVariants>
type InfoCardButtonProps = {
  primaryButton: {
    variant: ButtonVariants["variant"]
    color: ButtonVariants["color"]
  }
  secondaryButton: {
    variant: ButtonVariants["variant"]
    color: ButtonVariants["color"]
  }
}

const PRIMARY = { variant: "Primary", color: "Primary" } as const
const PRIMARY_INVERTED = { variant: "Primary", color: "Inverted" } as const
const SECONDARY = { variant: "Secondary", color: "Primary" } as const
const SECONDARY_INVERTED = { variant: "Secondary", color: "Inverted" } as const
const TERTIARY = { variant: "Tertiary", color: "Primary" } as const

// Determine button variant and color based on card theme and hotel theme.
// This is done to avoid low contrast issues and conflicting colors in
// certain combinations and according to design guidelines.
export function getButtonProps(
  cardTheme: VariantProps<typeof infoCardVariants>["theme"],
  hotelTheme: Theme | null = Theme.scandic
): InfoCardButtonProps {
  let buttonProps: InfoCardButtonProps = {
    primaryButton: TERTIARY,
    secondaryButton: SECONDARY,
  }

  // Image theme always uses inverted buttons, regardless of hotel theme
  if (cardTheme === "Image") {
    return {
      primaryButton: PRIMARY_INVERTED,
      secondaryButton: SECONDARY_INVERTED,
    }
  }

  switch (hotelTheme) {
    case Theme.scandic:
      if (cardTheme === "Primary 2" || cardTheme === "Primary 3") {
        buttonProps = {
          primaryButton: PRIMARY_INVERTED,
          secondaryButton: SECONDARY_INVERTED,
        }
      }
      break
    case Theme.downtownCamper:
      if (
        cardTheme === "Primary 1" ||
        cardTheme === "Primary 2" ||
        cardTheme === "Primary 3" ||
        cardTheme === "Accent"
      ) {
        buttonProps = {
          primaryButton: PRIMARY_INVERTED,
          secondaryButton: SECONDARY_INVERTED,
        }
      }
      break
    case Theme.haymarket:
      if (cardTheme === "Primary 1" || cardTheme === "White") {
        buttonProps = {
          primaryButton: PRIMARY,
          secondaryButton: SECONDARY,
        }
      } else if (
        cardTheme === "Primary 2" ||
        cardTheme === "Primary 3" ||
        cardTheme === "Accent"
      ) {
        buttonProps = {
          primaryButton: PRIMARY_INVERTED,
          secondaryButton: SECONDARY_INVERTED,
        }
      }
      break
    case Theme.scandicGo:
      if (cardTheme === "Primary 1" || cardTheme === "Primary 2") {
        buttonProps = {
          primaryButton: PRIMARY_INVERTED,
          secondaryButton: SECONDARY_INVERTED,
        }
      }
      break
    case Theme.grandHotel:
      if (
        cardTheme === "Primary 2" ||
        cardTheme === "Primary 3" ||
        cardTheme === "Accent" ||
        cardTheme === "White"
      ) {
        buttonProps = {
          primaryButton: PRIMARY,
          secondaryButton: SECONDARY,
        }
      } else if (cardTheme === "Primary 1") {
        buttonProps = {
          primaryButton: PRIMARY_INVERTED,
          secondaryButton: SECONDARY_INVERTED,
        }
      }
      break
    case Theme.hotelNorge:
      if (
        cardTheme === "Primary 1" ||
        cardTheme === "Primary 2" ||
        cardTheme === "Primary 3"
      ) {
        buttonProps = {
          primaryButton: PRIMARY_INVERTED,
          secondaryButton: SECONDARY_INVERTED,
        }
      }
      break
    case Theme.marski:
      if (cardTheme === "Primary 1") {
        buttonProps = {
          primaryButton: TERTIARY,
          secondaryButton: SECONDARY_INVERTED,
        }
      } else if (cardTheme === "White") {
        buttonProps = {
          primaryButton: PRIMARY,
          secondaryButton: SECONDARY,
        }
      } else if (
        cardTheme === "Primary 2" ||
        cardTheme === "Primary 3" ||
        cardTheme === "Accent"
      ) {
        buttonProps = {
          primaryButton: PRIMARY_INVERTED,
          secondaryButton: SECONDARY_INVERTED,
        }
      }
      break
    case Theme.theDock:
      if (
        cardTheme === "Primary 1" ||
        cardTheme === "Accent" ||
        cardTheme === "White"
      ) {
        buttonProps = {
          primaryButton: PRIMARY,
          secondaryButton: SECONDARY,
        }
      } else if (cardTheme === "Primary 2" || cardTheme === "Primary 3") {
        buttonProps = {
          primaryButton: PRIMARY_INVERTED,
          secondaryButton: SECONDARY_INVERTED,
        }
      }
      break
    case Theme.bassinSeven:
      if (
        cardTheme === "Primary 3" ||
        cardTheme === "Accent" ||
        cardTheme === "White"
      ) {
        buttonProps = {
          primaryButton: PRIMARY,
          secondaryButton: SECONDARY,
        }
      } else if (cardTheme === "Primary 1" || cardTheme === "Primary 2") {
        buttonProps = {
          primaryButton: PRIMARY_INVERTED,
          secondaryButton: SECONDARY_INVERTED,
        }
      }
      break
    default:
      break
  }

  return buttonProps
}