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

import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
import { PriceTagIcon, ScandicLogoIcon } from "@/components/Icons"
import TripAdvisorIcon from "@/components/Icons/TripAdvisor"
import Button from "@/components/TempDesignSystem/Button"
import Chip from "@/components/TempDesignSystem/Chip"
import Link from "@/components/TempDesignSystem/Link"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import Title from "@/components/TempDesignSystem/Text/Title"

import ReadMore from "../ReadMore"
import ImageGallery from "../SelectRate/ImageGallery"
import { hotelCardVariants } from "./variants"

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

import { HotelCardListingType } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
import type { HotelCardProps } from "@/types/components/hotelReservation/selectHotel/hotelCardProps"

export default function HotelCard({
  hotel,
  type = HotelCardListingType.PageListing,
}: HotelCardProps) {
  const intl = useIntl()

  const { hotelData } = hotel
  const { price } = hotel

  const amenities = hotelData.detailedFacilities.slice(0, 5)

  const classNames = hotelCardVariants({
    type,
  })

  return (
    <article className={classNames}>
      <section className={styles.imageContainer}>
        {hotelData.gallery && (
          <ImageGallery
            title={hotelData.name}
            images={[
              hotelData.hotelContent.images,
              ...hotelData.gallery.heroImages,
            ]}
          />
        )}
        <div className={styles.tripAdvisor}>
          <Chip intent="primary" className={styles.tripAdvisor}>
            <TripAdvisorIcon color="white" />
            {hotelData.ratings?.tripAdvisor.rating}
          </Chip>
        </div>
      </section>
      <section className={styles.hotelInformation}>
        <ScandicLogoIcon color="red" />
        <Title as="h4" textTransform="capitalize">
          {hotelData.name}
        </Title>
        <Footnote color="uiTextMediumContrast">
          {`${hotelData.address.streetAddress}, ${hotelData.address.city}`}
        </Footnote>
        <Footnote color="uiTextMediumContrast">
          {`${hotelData.location.distanceToCentre} ${intl.formatMessage({ id: "km to city center" })}`}
        </Footnote>
      </section>
      <section className={styles.hotel}>
        <div className={styles.facilities}>
          {amenities.map((facility) => {
            const IconComponent = mapFacilityToIcon(facility.id)
            return (
              <div className={styles.facilitiesItem} key={facility.id}>
                {IconComponent && <IconComponent color="grey80" />}
                <Caption color="textMediumContrast">{facility.name}</Caption>
              </div>
            )
          })}
        </div>
        <ReadMore
          label={intl.formatMessage({ id: "See hotel details" })}
          hotelId={hotelData.operaId}
          hotel={hotelData}
        />
      </section>
      <section className={styles.prices}>
        <div>
          <Chip intent="primary" className={styles.public}>
            <PriceTagIcon color="white" width={15} height={15} />
            {intl.formatMessage({ id: "Public price from" })}
          </Chip>
          <Caption color="textMediumContrast">
            {price?.regularAmount} {price?.currency} /
            {intl.formatMessage({ id: "night" })}
          </Caption>
          <Footnote color="uiTextMediumContrast">approx 280 eur</Footnote>
        </div>
        <div>
          <Chip intent="primary" className={styles.member}>
            <PriceTagIcon color="white" width={15} height={15} />
            {intl.formatMessage({ id: "Member price from" })}
          </Chip>
          <Caption color="textMediumContrast">
            {price?.memberAmount} {price?.currency} /
            {intl.formatMessage({ id: "night" })}
          </Caption>
          <Footnote color="uiTextMediumContrast">approx 280 eur</Footnote>
        </div>
        <Button
          asChild
          theme="base"
          intent="tertiary"
          size="small"
          className={styles.button}
        >
          {/* TODO: Localize link and also use correct search params */}
          <Link
            href={`/en/hotelreservation/select-rate?hotel=${hotelData.operaId}`}
            color="none"
            keepSearchParams
          >
            {intl.formatMessage({ id: "See rooms" })}
          </Link>
        </Button>
      </section>
    </article>
  )
}