"use client"
import { useEffect, useState } from "react"

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

import { CalendarIcon } from "@/components/Icons"
import Image from "@/components/Image"
import Link from "@/components/TempDesignSystem/Link"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Title from "@/components/TempDesignSystem/Text/Title"
import useLang from "@/hooks/useLang"

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

import type { StayCardProps } from "@/types/components/myPages/stays/stayCard"

const useCheckIfExternal = (bookingUrl: string) => {
  const [isExternal, setIsExternal] = useState(false)

  useEffect(() => {
    if (typeof window !== "undefined") {
      const hostName = window.location.hostname
      const bookingURL = new URL(bookingUrl)

      const hostsMatch = hostName === bookingURL.hostname
      const langRouteRegex = /^\/[a-zA-Z]{2}\//

      setIsExternal(!hostsMatch || !langRouteRegex.test(bookingURL.pathname))
    }
  }, [bookingUrl])

  return isExternal
}

export default function StayCard({ stay }: StayCardProps) {
  const lang = useLang()

  const { checkinDate, checkoutDate, hotelInformation, bookingUrl } =
    stay.attributes

  const arrival = dt(checkinDate).locale(lang)
  const arrivalDate = arrival.format("DD MMM")
  const arrivalDateTime = arrival.format("YYYY-MM-DD")
  const depart = dt(checkoutDate).locale(lang)
  const departDate = depart.format("DD MMM YYYY")
  const departDateTime = depart.format("YYYY-MM-DD")

  // TODO: Remove this check (and hook) and only return <Link /> when current web is deleted
  const isExternal = useCheckIfExternal(bookingUrl)

  const linkProps = {
    href: bookingUrl,
    className: styles.link,
    children: (
      <article className={styles.stay}>
        <Image
          className={styles.image}
          alt={hotelInformation.hotelContent.images.metaData.altText}
          src={hotelInformation.hotelContent.images.imageSizes.small}
          width={420}
          height={240}
        />
        <footer className={styles.footer}>
          <Title as="h5" className={styles.hotel} level="h3">
            {hotelInformation.hotelName}
          </Title>
          <div className={styles.date}>
            <CalendarIcon color="burgundy" height={24} width={24} />
            <Caption asChild>
              <time dateTime={arrivalDateTime}>{arrivalDate}</time>
            </Caption>
            {" - "}
            <Caption asChild>
              <time dateTime={departDateTime}>{departDate}</time>
            </Caption>
          </div>
        </footer>
      </article>
    ),
  }

  return isExternal ? <a {...linkProps} /> : <Link {...linkProps} />
}