"use client"

import Link from "next/link"
import { useIntl } from "react-intl"

import { dt } from "@scandic-hotels/common/dt"
import { Divider } from "@scandic-hotels/design-system/Divider"
import Image from "@scandic-hotels/design-system/Image"
import ImageFallback from "@scandic-hotels/design-system/ImageFallback"
import { Typography } from "@scandic-hotels/design-system/Typography"

import useLang from "@/hooks/useLang"
import { getRelativePastTime } from "@/utils/getRelativePastTime"

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

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

export function Card({ stay }: StayCardProps) {
  const { bookingUrl, isWebAppOrigin: shouldLinkToMyStay } = stay.attributes

  if (!shouldLinkToMyStay) {
    return <CardContent stay={stay} />
  }

  return (
    <Link href={bookingUrl} className={styles.link}>
      <CardContent stay={stay} />
    </Link>
  )
}

function CardContent({ stay }: StayCardProps) {
  const lang = useLang()
  const intl = useIntl()

  const { checkinDate, checkoutDate, hotelInformation } = 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")

  const relativeTime = getRelativePastTime(checkoutDate, intl)

  return (
    <article className={styles.card}>
      {hotelInformation.hotelContent.images.src ? (
        <Image
          className={styles.image}
          alt={
            hotelInformation.hotelContent.images.altText ||
            hotelInformation.hotelContent.images.altText_En
          }
          src={hotelInformation.hotelContent.images.src}
          width={80}
          height={108}
        />
      ) : (
        <ImageFallback
          className={styles.fallback}
          height="108px"
          width="80px"
        />
      )}
      <div className={styles.content}>
        <div className={styles.details}>
          <Typography variant="Title/Subtitle/md">
            <h4 className={styles.hotelName}>{hotelInformation.hotelName}</h4>
          </Typography>

          {hotelInformation.cityName && (
            <Typography variant="Body/Supporting text (caption)/smRegular">
              <p className={styles.cityName}>{hotelInformation.cityName}</p>
            </Typography>
          )}
        </div>

        <Divider className={styles.divider} color="Border/Divider/Subtle" />

        <div className={styles.dateSection}>
          <div className={styles.chip}>
            <Typography variant="Body/Supporting text (caption)/smBold">
              <span className={styles.chipText}>{relativeTime}</span>
            </Typography>
          </div>
          <Typography variant="Body/Supporting text (caption)/smRegular">
            <div className={styles.dates}>
              <time className={styles.dateText} dateTime={arrivalDateTime}>
                {arrivalDate}
              </time>
              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
              <span className={styles.dateText}>→</span>
              <time className={styles.dateText} dateTime={departDateTime}>
                {departDate}
              </time>
            </div>
          </Typography>
        </div>
      </div>
    </article>
  )
}