"use client"

import { dt } from "@scandic-hotels/common/dt"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import Image from "@scandic-hotels/design-system/Image"
import Link from "@scandic-hotels/design-system/OldDSLink"
import { Typography } from "@scandic-hotels/design-system/Typography"

import useLang from "@/hooks/useLang"

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

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

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

  const shouldLinkToMyStay = isWebAppOrigin

  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 { 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")

  return (
    <article className={styles.stay}>
      <Image
        className={styles.image}
        alt={
          hotelInformation.hotelContent.images.altText ||
          hotelInformation.hotelContent.images.altText_En
        }
        src={hotelInformation.hotelContent.images.src}
        width={420}
        height={240}
      />
      <footer className={styles.footer}>
        <Typography variant="Title/xs" className={styles.hotel}>
          <h3>{hotelInformation.hotelName}</h3>
        </Typography>
        <div className={styles.date}>
          <MaterialIcon
            icon="calendar_month"
            color="Icon/Interactive/Default"
          />
          <Typography variant="Body/Supporting text (caption)/smRegular">
            <p>
              <time dateTime={arrivalDateTime}>{arrivalDate}</time>
              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
              {" - "}
              <time dateTime={departDateTime}>{departDate}</time>
            </p>
          </Typography>
        </div>
      </footer>
    </article>
  )
}