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

import { myStay } from "@/constants/routes/myStay"

import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import Title from "@/components/TempDesignSystem/Text/Title"
import useLang from "@/hooks/useLang"

import AddToCalendar from "../../AddToCalendar"
import AddToCalendarButton from "./Actions/AddToCalendarButton"
// import DownloadInvoice from "./Actions/DownloadInvoice"
import { generateDateTime } from "./Actions/helpers"
import ManageBooking from "./Actions/ManageBooking"

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

import type { EventAttributes } from "ics"

import type { BookingConfirmationHeaderProps } from "@/types/components/hotelReservation/bookingConfirmation/header"

export default function Header({
  booking,
  hotel,
  // mainRef,
  refId,
}: BookingConfirmationHeaderProps) {
  const intl = useIntl()
  const lang = useLang()

  const text = intl.formatMessage(
    {
      defaultMessage:
        "Thank you for booking with us! We look forward to welcoming you and hope you have a pleasant stay. If you have any questions or need to make changes to your reservation, please <emailLink>contact us.</emailLink>",
    },
    {
      emailLink: (str) => (
        <Link color="burgundy" href="#" textDecoration="underline">
          {str}
        </Link>
      ),
    }
  )

  const event: EventAttributes = {
    busyStatus: "FREE",
    categories: ["booking", "hotel", "stay"],
    created: generateDateTime(booking.createDateTime),
    description: hotel.hotelContent.texts.descriptions?.medium,
    end: generateDateTime(booking.checkOutDate),
    endInputType: "utc",
    geo: {
      lat: hotel.location.latitude,
      lon: hotel.location.longitude,
    },
    location: `${hotel.address.streetAddress}, ${hotel.address.zipCode} ${hotel.address.city} ${hotel.address.country}`,
    start: generateDateTime(booking.checkInDate),
    startInputType: "utc",
    status: "CONFIRMED",
    title: hotel.name,
    url: hotel.contactInformation.websiteUrl,
  }

  const bookingUrlPath = `${myStay[lang]}?RefId=${refId}`

  return (
    <header className={styles.header}>
      <hgroup className={styles.hgroup}>
        <Title as="h2" color="red" textTransform="uppercase" type="h2">
          {intl.formatMessage({
            defaultMessage: "Booking confirmation",
          })}
        </Title>
        <Title as="h2" color="burgundy" textTransform="uppercase" type="h1">
          {hotel.name}
        </Title>
      </hgroup>
      <Subtitle color="uiTextHighContrast" type="two">
        {intl.formatMessage(
          {
            defaultMessage: "Booking number {value}",
          },
          {
            value: booking.confirmationNumber,
          }
        )}
      </Subtitle>
      <Body className={styles.body}>{text}</Body>
      <div className={styles.actions}>
        <AddToCalendar
          checkInDate={booking.checkInDate}
          event={event}
          hotelName={hotel.name}
          renderButton={(onPress) => <AddToCalendarButton onPress={onPress} />}
        />
        <ManageBooking bookingUrl={bookingUrlPath} />
        {/* Download Invoice will be added later (currently available on My Stay) */}
        {/* <DownloadInvoice mainRef={mainRef} /> */}
      </div>
    </header>
  )
}
