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

import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
import TripAdvisorIcon from "@/components/Icons/TripAdvisor"
import Image from "@/components/Image"
import Divider from "@/components/TempDesignSystem/Divider"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Title from "@/components/TempDesignSystem/Text/Title"

import ReadMore from "../../ReadMore"

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

import type { HotelInfoCardProps } from "@/types/components/hotelReservation/selectRate/hotelInfoCardProps"

export default function HotelInfoCard({ hotelData }: HotelInfoCardProps) {
  const hotelAttributes = hotelData?.data.attributes
  const intl = useIntl()

  const sortedFacilities = hotelAttributes?.detailedFacilities
    .sort((a, b) => b.sortOrder - a.sortOrder)
    .slice(0, 5)

  return (
    <article className={styles.container}>
      {hotelAttributes && (
        <section className={styles.wrapper}>
          <div className={styles.imageWrapper}>
            <Image
              src={hotelAttributes.hotelContent.images.imageSizes.medium}
              alt={hotelAttributes.hotelContent.images.metaData.altText}
              className={styles.image}
              fill
            />
            {hotelAttributes.ratings?.tripAdvisor && (
              <div className={styles.tripAdvisor}>
                <TripAdvisorIcon color="burgundy" />
                <Caption color="burgundy">
                  {hotelAttributes.ratings.tripAdvisor.rating}
                </Caption>
              </div>
            )}
            {/* TODO: gallery icon and image carousel */}
          </div>
          <div className={styles.hotelContent}>
            <div className={styles.hotelInformation}>
              <Title
                level="h3"
                textTransform="uppercase"
                className={styles.title}
              >
                {hotelAttributes.name}
              </Title>
              <Caption color="uiTextMediumContrast">
                {`${hotelAttributes.address.streetAddress}, ${hotelAttributes.address.city} ∙ ${hotelAttributes.location.distanceToCentre} ${intl.formatMessage({ id: "km to city center" })}`}
              </Caption>
              <Body color="uiTextHighContrast" className={styles.body}>
                {hotelAttributes.hotelContent.texts.descriptions.medium}
              </Body>
            </div>
            <Divider color="subtle" variant="vertical" />
            <div className={styles.facilities}>
              <div className={styles.facilityList}>
                <Body textTransform="bold" className={styles.facilityTitle}>
                  {intl.formatMessage({ id: "At the hotel" })}
                </Body>
                {sortedFacilities?.map((facility) => {
                  const IconComponent = mapFacilityToIcon(facility.id)
                  return (
                    <div className={styles.facilitiesItem} key={facility.id}>
                      {IconComponent && (
                        <IconComponent
                          className={styles.facilitiesIcon}
                          color="grey80"
                        />
                      )}
                      <Caption className={styles.facilityName}>
                        {facility.name}
                      </Caption>
                    </div>
                  )
                })}
              </div>
              <ReadMore
                label={intl.formatMessage({ id: "Show all amenities" })}
                hotelId={hotelAttributes.operaId}
                hotel={hotelAttributes}
              />
            </div>
          </div>
        </section>
      )}
    </article>
  )
}
