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

import { dt } from "@/lib/dt"

import { CalendarAddIcon } from "@/components/Icons"
import Button from "@/components/TempDesignSystem/Button"
import useLang from "@/hooks/useLang"

import type { AddToCalendarProps } from "@/types/components/hotelReservation/bookingConfirmation/actions/addToCalendar"

export default function AddToCalendar({
  checkInDate,
  event,
  hotelName,
}: AddToCalendarProps) {
  const intl = useIntl()
  const lang = useLang()

  async function downloadBooking() {
    const d = dt(checkInDate).locale(lang).format("YYYY-MM-DD")
    const filename = `${hotelName.toLowerCase().split(" ").join("_")}-${d}.ics`

    const file: Blob = await new Promise((resolve, reject) => {
      createEvent(event, (error, value) => {
        if (error) {
          reject(error)
        }

        resolve(new File([value], filename, { type: "text/calendar" }))
      })
    })

    const url = URL.createObjectURL(file)

    const anchor = document.createElement("a")
    anchor.href = url
    anchor.download = filename

    document.body.appendChild(anchor)
    anchor.click()
    document.body.removeChild(anchor)

    URL.revokeObjectURL(url)
  }

  return (
    <Button
      intent="text"
      onPress={downloadBooking}
      size="small"
      theme="base"
      variant="icon"
      wrapping
    >
      <CalendarAddIcon />
      {intl.formatMessage({ id: "Add to calendar" })}
    </Button>
  )
}