import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
import ImageGallery from "@/components/ImageGallery"
import SkeletonShimmer from "@/components/SkeletonShimmer"
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 { getIntl } from "@/i18n"
import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
import { getSingleDecimal } from "@/utils/numberFormatting"

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

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

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

export default async function HotelInfoCard({ hotel }: HotelInfoCardProps) {
  const intl = await getIntl()

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

  const galleryImages = mapApiImagesToGalleryImages(hotel.galleryImages || [])

  return (
    <article className={styles.container}>
      <section className={styles.wrapper}>
        <div className={styles.imageWrapper}>
          <ImageGallery title={hotel.name} images={galleryImages} fill />
          {hotel.ratings?.tripAdvisor && (
            <TripAdvisorChip rating={hotel.ratings.tripAdvisor.rating} />
          )}
        </div>
        <div className={styles.hotelContent}>
          <div className={styles.hotelInformation}>
            <Title as="h2" textTransform="uppercase">
              {hotel.name}
            </Title>
            <div className={styles.hotelAddressDescription}>
              <Caption color="uiTextMediumContrast">
                {intl.formatMessage(
                  {
                    id: "{address}, {city} ∙ {distanceToCityCenterInKm} km to city center",
                  },
                  {
                    address: hotel.address.streetAddress,
                    city: hotel.address.city,
                    distanceToCityCenterInKm: getSingleDecimal(
                      hotel.location.distanceToCentre / 1000
                    ),
                  }
                )}
              </Caption>
              <Body color="uiTextHighContrast">
                {hotel.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 Icon = (
                  <FacilityToIcon id={facility.id} color="Icon/Default" />
                )
                return (
                  <div className={styles.facilitiesItem} key={facility.id}>
                    {Icon && Icon}
                    <Body color="uiTextHighContrast">{facility.name}</Body>
                  </div>
                )
              })}
            </div>
            <ReadMore
              label={intl.formatMessage({ id: "See all amenities" })}
              hotelId={hotel.operaId}
              hotel={hotel}
              showCTA={false}
            />
          </div>
        </div>
      </section>
      {hotel.specialAlerts.map((alert) => (
        <div className={styles.hotelAlert} key={`wrapper_${alert.id}`}>
          <Alert
            key={alert.id}
            type={alert.type}
            heading={alert.heading}
            text={alert.text}
          />
        </div>
      ))}
    </article>
  )
}

export function HotelInfoCardSkeleton() {
  return (
    <article className={styles.container}>
      <section className={styles.wrapper}>
        <div className={styles.imageWrapper}>
          <SkeletonShimmer height={"100%"} width={"100%"} />
        </div>
        <div className={styles.hotelContent}>
          <div className={styles.hotelInformation}>
            <SkeletonShimmer width={"60ch"} height={"40px"} />
            <div className={styles.hotelAddressDescription}>
              <Caption color="uiTextMediumContrast">
                <SkeletonShimmer width={"40ch"} />
              </Caption>
              <Body color="uiTextHighContrast">
                <SkeletonShimmer width={"60ch"} />
                <SkeletonShimmer width={"58ch"} />
                <SkeletonShimmer width={"45ch"} />
              </Body>
            </div>
          </div>
          <Divider color="subtle" variant="vertical" />
          <div className={styles.facilities}>
            <div className={styles.facilityList}>
              <Body textTransform="bold" className={styles.facilityTitle}>
                <SkeletonShimmer width={"20ch"} />
              </Body>
              {[1, 2, 3, 4, 5]?.map((id) => {
                return (
                  <div className={styles.facilitiesItem} key={id}>
                    <SkeletonShimmer width={"10ch"} />
                  </div>
                )
              })}
            </div>
            <div className={styles.hotelAlert}>
              <SkeletonShimmer width={"18ch"} />
            </div>
          </div>
        </div>
      </section>
    </article>
  )
}
