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
    default:
      break
  }

  return buttonProps
}