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

import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
import TripAdvisorIcon from "@/components/Icons/TripAdvisor"
import Alert from "@/components/TempDesignSystem/Alert"
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 ImageGallery from "../ImageGallery"

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}>
            {hotelAttributes.gallery && (
              <ImageGallery
                title={hotelAttributes.name}
                images={[
                  hotelAttributes.hotelContent.images,
                  ...hotelAttributes.gallery.heroImages,
                ]}
              />
            )}
            {hotelAttributes.ratings?.tripAdvisor && (
              <div className={styles.tripAdvisor}>
                <TripAdvisorIcon color="burgundy" />
                <Caption color="burgundy">
                  {hotelAttributes.ratings.tripAdvisor.rating}
                </Caption>
              </div>
            )}
          </div>
          <div className={styles.hotelContent}>
            <div className={styles.hotelInformation}>
              <Title as="h2" textTransform="uppercase">
                {hotelAttributes.name}
              </Title>
              <div className={styles.hotelAddressDescription}>
                <Caption color="uiTextMediumContrast">
                  {`${hotelAttributes.address.streetAddress}, ${hotelAttributes.address.city} ∙ ${hotelAttributes.location.distanceToCentre} ${intl.formatMessage({ id: "km to city center" })}`}
                </Caption>
                <Body color="uiTextHighContrast">
                  {hotelAttributes.hotelContent.texts.descriptions.medium}
                </Body>
              </div>
            </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"
                        />
                      )}
                      <Body color="uiTextHighContrast">{facility.name}</Body>
                    </div>
                  )
                })}
              </div>
              <ReadMore
                label={intl.formatMessage({ id: "Show all amenities" })}
                hotelId={hotelAttributes.operaId}
                hotel={hotelAttributes}
              />
            </div>
          </div>
        </section>
      )}
      {hotelAttributes?.meta?.specialAlerts.map((alert) => {
        return (
          <div className={styles.hotelAlert} key={`wrapper_${alert.id}`}>
            <Alert
              key={alert.id}
              type={alert.type}
              heading={alert.heading}
              text={alert.text}
            />
          </div>
        )
      })}
    </article>
  )
}
