import { TeaserCard } from "@scandic-hotels/design-system/TeaserCard"
import {
  CardsGridEnum,
  CardsGridLayoutEnum,
} from "@scandic-hotels/trpc/types/cardsGridEnum"

import InfoCard from "@/components/ContentType/StartPage/InfoCard"
import { Section } from "@/components/Section"
import { SectionHeader } from "@/components/Section/Header"
import Card from "@/components/TempDesignSystem/Card"
import Grids from "@/components/TempDesignSystem/Grids"
import LoyaltyCard from "@/components/TempDesignSystem/LoyaltyCard"

import type { CardsGrid as CardsGridBlock } from "@scandic-hotels/trpc/types/blocks"
import type { VariantProps } from "class-variance-authority"

import type { headingVariants } from "@/components/Section/Header/headingVariants"
import type { StackableGridProps } from "../TempDesignSystem/Grids/Stackable/stackable"

interface CardsGridProps extends Pick<CardsGridBlock, "cards_grid"> {
  headingLevel?: "h1" | "h2"
  headingTypography?: VariantProps<typeof headingVariants>["typography"]
}

export default function CardsGrid({
  cards_grid,
  headingLevel = "h2",
  headingTypography = "Title/sm",
}: CardsGridProps) {
  let columns: StackableGridProps["columns"]

  switch (cards_grid.layout) {
    case CardsGridLayoutEnum.ONE_COLUMN:
      columns = 1
      break
    case CardsGridLayoutEnum.TWO_COLUMNS:
      columns = 2
      break
    case CardsGridLayoutEnum.THREE_COLUMNS:
      columns = 3
      break
    default:
      columns = 3
  }

  return (
    <Section>
      <SectionHeader
        heading={cards_grid.title}
        preamble={cards_grid.preamble}
        headingLevel={headingLevel}
        typography={headingTypography}
        link={cards_grid.link}
      />
      <Grids.Stackable columns={columns}>
        {cards_grid.cards.map((card, index) => {
          switch (card.__typename) {
            case CardsGridEnum.cards.Card:
              return (
                <Card
                  theme={
                    card.backgroundImage ? "image" : (cards_grid.theme ?? "one")
                  }
                  key={card.system.uid}
                  scriptedTopTitle={card.scripted_top_title}
                  heading={card.heading}
                  bodyText={card.body_text}
                  secondaryButton={card.secondaryButton}
                  primaryButton={card.primaryButton}
                  backgroundImage={card.backgroundImage}
                  imageGradient
                />
              )
            case CardsGridEnum.cards.InfoCard:
              return (
                <InfoCard
                  key={card.system.uid}
                  scriptedTopTitle={card.scriptedTopTitle}
                  heading={card.heading}
                  bodyText={card.bodyText}
                  image={card.image}
                  theme={card.theme ?? "one"}
                  primaryButton={card.primaryButton}
                  secondaryButton={card.secondaryButton}
                  imagePosition={index % 2 === 0 ? "right" : "left"}
                />
              )
            case CardsGridEnum.cards.TeaserCard:
              return (
                <TeaserCard
                  key={card.system.uid}
                  heading={card.heading}
                  bodyText={card.body_text}
                  primaryButton={card.primaryButton}
                  secondaryButton={card.secondaryButton}
                  sidePeekButton={card.sidePeekButton}
                  sidePeekContent={card.sidePeekContent}
                  image={card.image}
                />
              )
            case CardsGridEnum.cards.LoyaltyCard:
              return (
                <LoyaltyCard
                  key={card.system.uid}
                  image={card.image}
                  heading={card.heading}
                  bodyText={card.body_text}
                  link={card.link}
                />
              )
          }
        })}
      </Grids.Stackable>
    </Section>
  )
}
