import { useIntl } from "react-intl"

import { selectRate } from "@/constants/routes/hotelReservation"

import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"

import NoPriceAvailableCard from "../../HotelCard/NoPriceAvailableCard"
import HotelCardDialogImage from "../HotelCardDialogImage"

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

import type { HotelPin } from "@/types/components/hotelReservation/selectHotel/map"
import type { Lang } from "@/constants/languages"

interface StandaloneHotelCardProps {
  data: HotelPin
  lang: Lang
  imageError: boolean
  setImageError: (error: boolean) => void
}

export default function StandaloneHotelCardDialog({
  data,
  lang,
  imageError,
  setImageError,
}: StandaloneHotelCardProps) {
  const intl = useIntl()
  const {
    name,
    publicPrice,
    memberPrice,
    currency,
    amenities,
    images,
    ratings,
    operaId,
  } = data

  const firstImage = images[0]?.imageSizes?.small
  const altText = images[0]?.metaData?.altText

  return (
    <>
      <HotelCardDialogImage
        firstImage={firstImage}
        altText={altText}
        ratings={ratings || 0}
        imageError={imageError}
        setImageError={setImageError}
        position="left"
      />
      <div className={styles.content}>
        <div className={styles.header}>
          <div className={styles.detailsContainer}>
            <div className={styles.name}>
              <Body textTransform="bold">{name}</Body>
            </div>
          </div>
        </div>
        <div className={styles.facilities}>
          {amenities.slice(0, 3).map((facility) => {
            const IconComponent = mapFacilityToIcon(facility.id)
            return (
              <div className={styles.facilitiesItem} key={facility.id}>
                {IconComponent && (
                  <IconComponent width={16} height={16} color="grey80" />
                )}
                <Footnote color="uiTextMediumContrast">
                  {facility.name}
                </Footnote>
              </div>
            )
          })}
        </div>
        <div className={styles.pricesContainer}>
          {publicPrice || memberPrice ? (
            <>
              <div className={styles.priceCard}>
                <Caption type="bold">
                  {intl.formatMessage({ id: "From" })}
                </Caption>
                {publicPrice && (
                  <Subtitle type="two">
                    {publicPrice} {currency}
                    <Body asChild>
                      <span>/{intl.formatMessage({ id: "night" })}</span>
                    </Body>
                  </Subtitle>
                )}
                {memberPrice && (
                  <Subtitle
                    type="two"
                    color="red"
                    className={styles.memberPrice}
                  >
                    {memberPrice} {currency}
                    <Body asChild color="red">
                      <span>/{intl.formatMessage({ id: "night" })}</span>
                    </Body>
                  </Subtitle>
                )}
              </div>
              <Button
                asChild
                theme="base"
                size="small"
                className={styles.button}
              >
                <Link
                  href={`${selectRate(lang)}?hotel=${operaId}`}
                  color="none"
                  keepSearchParams
                >
                  {intl.formatMessage({ id: "See rooms" })}
                </Link>
              </Button>
            </>
          ) : (
            <NoPriceAvailableCard />
          )}
        </div>
      </div>
    </>
  )
}
