"use client"
import { useEffect } from "react"
import { useIntl } from "react-intl"

import { useBookingFlowConfig } from "../../../bookingFlowConfig/bookingFlowConfigContext"
import useLang from "../../../hooks/useLang"
import { Promo } from "./Promo"

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

import type { BookingConfirmation } from "@scandic-hotels/trpc/types/bookingConfirmation"

import type { AdditionalInfoCookieValue } from "../../../types/components/findMyBooking/additionalInfoCookieValue"

type PromosProps = Pick<BookingConfirmation, "booking">

export function Promos({ booking }: PromosProps) {
  const intl = useIntl()
  const lang = useLang()
  const { routes } = useBookingFlowConfig()

  const { refId, confirmationNumber, hotelId } = booking
  const { email, firstName, lastName } = booking.guest
  useEffect(() => {
    // Setting the `bv` cookie allows direct access to My stay without prompting for more information.
    const value: AdditionalInfoCookieValue = {
      email,
      firstName,
      lastName,
      confirmationNumber,
    }
    document.cookie = `bv=${JSON.stringify(value)}; Path=/; Max-Age=600; Secure; SameSite=Strict`
  }, [confirmationNumber, email, firstName, lastName])

  const myStayURL = `${routes.myStay[lang]}?RefId=${encodeURIComponent(refId)}`
  return (
    <div className={styles.promos}>
      <Promo
        buttonText={intl.formatMessage({
          id: "bookingConfirmation.promos.buyAddonsButtonText",
          defaultMessage: "View and buy extras",
        })}
        href={myStayURL}
        text={intl.formatMessage({
          id: "bookingConfirmation.promos.buyAddonsDescription",
          defaultMessage:
            "Discover the little extra touches to make your upcoming stay even more unforgettable.",
        })}
        title={intl.formatMessage({
          id: "bookingConfirmation.promos.buyAddonsTitle",
          defaultMessage: "Spice things up",
        })}
      />
      <Promo
        buttonText={intl.formatMessage({
          id: "bookingConfirmation.promos.bookAnotherStayButtonText",
          defaultMessage: "Book another stay",
        })}
        href={`/${lang}?hotel=${hotelId}`}
        text={intl.formatMessage({
          id: "booking.bookAnotherStayDescription",
          defaultMessage:
            "Get inspired and start dreaming beyond your next trip. Explore more Scandic destinations.",
        })}
        title={intl.formatMessage({
          id: "booking.bookNextStay.title",
          defaultMessage: "Book your next stay",
        })}
      />
    </div>
  )
}