import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
import { PriceTagIcon, ScandicLogoIcon } from "@/components/Icons"
import TripAdvisorIcon from "@/components/Icons/TripAdvisor"
import Image from "@/components/Image"
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 { getIntl } from "@/i18n"

import ReadMore from "../ReadMore"

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

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

export default async function HotelCard({ hotel }: HotelCardProps) {
  const intl = await getIntl()

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

  const sortedAmenities = hotelData.detailedFacilities
    .sort((a, b) => b.sortOrder - a.sortOrder)
    .slice(0, 5)

  return (
    <article className={styles.card}>
      <section className={styles.imageContainer}>
        <Image
          src={hotelData.hotelContent.images.imageSizes.medium}
          alt={hotelData.hotelContent.images.metaData.altText}
          width={300}
          height={200}
          className={styles.image}
        />
        <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}>
          {sortedAmenities.map((facility) => {
            const IconComponent = mapFacilityToIcon(facility.name)
            return (
              <div className={styles.facilitiesItem} key={facility.id}>
                {IconComponent && <IconComponent color="grey80" />}
                <Caption color="textMediumContrast">{facility.name}</Caption>
              </div>
            )
          })}
        </div>
        <ReadMore 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" color="none">
            {intl.formatMessage({ id: "See rooms" })}
          </Link>
        </Button>
      </section>
    </article>
  )
}
