import { useIntl } from "react-intl"

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 styles from "./hotelCard.module.css"

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

export default function HotelCard({ hotel }: HotelCardProps) {
  const intl = useIntl()

  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="textMediumContrast" className={styles.adress}>
          {`${hotelData?.address?.streetAddress}, ${hotelData?.address?.city}`}
        </Footnote>
        <Footnote color="textMediumContrast">
          {`${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>
        <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">
            {price?.regularAmount} {price?.currency} /
            {intl.formatMessage({ id: "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">
            {price?.memberAmount} {price?.currency} /
            {intl.formatMessage({ id: "night" })}
          </Caption>
          <Footnote color="textMediumContrast">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>
  )
}