"use client"
import { cx } from "class-variance-authority"
import { useIntl } from "react-intl"

import { BookingCodeChip } from "@scandic-hotels/design-system/BookingCodeChip"
import { Typography } from "@scandic-hotels/design-system/Typography"

import { useMyStayStore } from "@/stores/my-stay"

import styles from "./bookingCode.module.css"

export default function BookingCode() {
  const intl = useIntl()
  const { bookingCode, isCampaignRate } = useMyStayStore((state) => ({
    bookingCode: state.bookedRoom.bookingCode,
    isCampaignRate: state.bookedRoom.isCampaignRate,
  }))

  if (!bookingCode && !isCampaignRate) {
    return null
  }

  const codeType = isCampaignRate
    ? intl.formatMessage({
        id: "booking.campaignCode",
        defaultMessage: "Campaign code",
      })
    : intl.formatMessage({
        id: "booking.bookingCode",
        defaultMessage: "Booking code",
      })

  const showCodeType = bookingCode || !isCampaignRate

  return (
    <div className={cx(styles.row, { [styles.rightAligned]: !showCodeType })}>
      {showCodeType && (
        <Typography variant="Body/Supporting text (caption)/smRegular">
          <p>{codeType}</p>
        </Typography>
      )}

      <BookingCodeChip
        bookingCode={bookingCode}
        isCampaign={isCampaignRate}
        withText={!showCodeType}
      />
    </div>
  )
}