import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
import {
  ChevronRightIcon,
  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 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 sortedAmenities = hotel.detailedFacilities
    .sort((a, b) => b.sortOrder - a.sortOrder)
    .slice(0, 5)

  return (
    <article className={styles.card}>
      <div className={styles.imageContainer}>
        <Image
          src={hotel.hotelContent.images.imageSizes.large}
          alt={hotel.hotelContent.images.metaData.altText}
          width={300}
          height={200}
          className={styles.image}
        />
        <div className={styles.tripAdvisor}>
          <Chip intent="primary" className={styles.tripAdvisor}>
            <TripAdvisorIcon color="white" />
            {hotel.ratings?.tripAdvisor.rating}
          </Chip>
        </div>
      </div>
      <header className={styles.header}>
        <ScandicLogoIcon color="red" />
        <Title as="h4" textTransform="capitalize">
          {hotel.name}
        </Title>
        <Footnote color="textMediumContrast" className={styles.adress}>
          {`${hotel.address.streetAddress}, ${hotel.address.city}`}
        </Footnote>
        <Footnote color="textMediumContrast">
          {`${hotel.location.distanceToCentre} ${intl.formatMessage({ id: "km to city center" })}`}
        </Footnote>
      </header>
      <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>
        <Link href="#" color="burgundy" className={styles.link}>
          {intl.formatMessage({ id: "See hotel details" })}
          <ChevronRightIcon color="burgundy" />
        </Link>
      </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">2820 SEK / night</Caption>
          <Footnote color="textMediumContrast">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">2820 SEK / night</Caption>
          <Footnote color="textMediumContrast">approx 280 eur</Footnote>
        </div>
        <Button
          asChild
          theme="base"
          intent="tertiary"
          size="small"
          className={styles.button}
        >
          <Link href="#" color="none">
            {intl.formatMessage({ id: "See rooms" })}
          </Link>
        </Button>
      </section>
    </article>
  )
}