import { serverClient } from "@/lib/trpc/server"

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 { getLang } from "@/i18n/serverContext"

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

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

export default async function HotelCard({
  checkInDate,
  checkOutDate,
  hotelId,
  price,
}: HotelCardProps) {
  const intl = await getIntl()

  const hotelData = await serverClient().hotel.get({
    hotelId: hotelId.toString(),
    language: getLang(),
  })

  if (!hotelData) return null

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

  return (
    <article className={styles.card}>
      <section className={styles.imageContainer}>
        <Image
          src={hotelData.hotel.hotelContent.images.imageSizes.large}
          alt={hotelData.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" />
            {hotelData.hotel.ratings?.tripAdvisor.rating}
          </Chip>
        </div>
      </section>
      <section className={styles.hotelInformation}>
        <ScandicLogoIcon color="red" />
        <Title as="h4" textTransform="capitalize">
          {hotelData.hotel.name}
        </Title>
        <Footnote color="textMediumContrast" className={styles.adress}>
          {`${hotelData.hotel.address.streetAddress}, ${hotelData.hotel.address.city}`}
        </Footnote>
        <Footnote color="textMediumContrast">
          {`${hotelData.hotel.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} 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">
            {price?.memberAmount} SEK / 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>
  )
}