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

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

import AddToCalendar from "./Actions/AddToCalendar"
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<React.ReactNode>(
    { id: "booking.confirmation.text" },
    {
      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,
  }

  return (
    <header className={styles.header}>
      <hgroup className={styles.hgroup}>
        <Title as="h2" color="red" textTransform="uppercase" type="h2">
          {intl.formatMessage({ id: "booking.confirmation.title" })}
        </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}
        />
        <ManageBooking />
        <DownloadInvoice mainRef={mainRef} />
      </div>
    </header>
  )
}
