"use client"

import { useIntl } from "react-intl"

import Body from "@/components/TempDesignSystem/Text/Body"
import Title from "@/components/TempDesignSystem/Text/Title"

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,
}: BookingConfirmationHeaderProps) {
  const intl = useIntl()

  const text = intl.formatMessage({
    defaultMessage:
      "Thank you for your booking! We look forward to welcoming you and hope you have a pleasant stay.",
  })

  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,
  }

  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>
      <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 booking={booking} />
        {/* Download Invoice will be added later (currently available on My Stay) */}
        {/* <DownloadInvoice mainRef={mainRef} /> */}
      </div>
    </header>
  )
}
