"use client"

import { useCallback, useEffect, useRef } from "react"
import { Button as ButtonRAC } from "react-aria-components"
import { useIntl } from "react-intl"

import HotelLogoIcon from "@scandic-hotels/design-system/Icons/HotelLogoIcon"
import TripadvisorIcon from "@scandic-hotels/design-system/Icons/TripadvisorIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"

import { useDestinationPageHotelsMapStore } from "@/stores/destination-page-hotels-map"

import ButtonLink from "@/components/ButtonLink"
import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
import ImageGallery from "@/components/ImageGallery"
import Divider from "@/components/TempDesignSystem/Divider"
import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
import { getSingleDecimal } from "@/utils/numberFormatting"

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

import type { DestinationPagesHotelData } from "@/types/hotel"

export default function HotelListItem(data: DestinationPagesHotelData) {
  const intl = useIntl()
  const { hotel, url } = data
  const galleryImages = mapApiImagesToGalleryImages(hotel.galleryImages || [])
  const amenities = hotel.detailedFacilities.slice(0, 5)
  const address = `${hotel.address.streetAddress}, ${hotel.address.city}`

  const itemRef = useRef<HTMLElement>(null)
  const { setHoveredMarker, activeMarker, setActiveMarker } =
    useDestinationPageHotelsMapStore()

  useEffect(() => {
    if (activeMarker === hotel.id) {
      const element = itemRef.current
      if (element) {
        element.scrollIntoView({
          behavior: "smooth",
          block: "start",
          inline: "start",
        })
      }
    }
  }, [activeMarker, hotel.id])

  const handleMouseEnter = useCallback(() => {
    if (hotel.id) {
      setHoveredMarker(hotel.id)
    }
  }, [setHoveredMarker, hotel.id])

  const handleMouseLeave = useCallback(() => {
    setHoveredMarker(null)
  }, [setHoveredMarker])

  return (
    <article
      ref={itemRef}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
      className={`${styles.hotelListItem} ${activeMarker === hotel.id ? styles.activeCard : ""}`}
    >
      <div className={styles.imageWrapper}>
        <ImageGallery
          images={galleryImages}
          fill
          sizes="(min-width: 768px) 700px, 100vw"
          title={intl.formatMessage(
            {
              defaultMessage: "{title} - Image gallery",
            },
            { title: hotel.name }
          )}
        />
        {hotel.tripadvisor && (
          <Typography variant="Title/Overline/sm">
            <div className={styles.tripAdvisor}>
              <TripadvisorIcon color="CurrentColor" />
              <span>{hotel.tripadvisor}</span>
            </div>
          </Typography>
        )}
      </div>
      <div className={styles.content}>
        <div className={styles.intro}>
          <div className={styles.logo}>
            <HotelLogoIcon hotelId={hotel.id} hotelType={hotel.hotelType} />
          </div>
          <Typography variant="Title/Subtitle/lg">
            <h3>{hotel.name}</h3>
          </Typography>
          <Typography variant="Body/Supporting text (caption)/smRegular">
            <p className={styles.captions}>
              <Typography variant="Link/sm">
                <ButtonRAC
                  className={styles.addressButton}
                  onPress={() => setActiveMarker(hotel.id)}
                >
                  {address}
                </ButtonRAC>
              </Typography>
              <span>
                <Divider
                  className={styles.divider}
                  variant="vertical"
                  color="Border/Divider/Default"
                />
              </span>
              <span>
                {intl.formatMessage(
                  {
                    defaultMessage: "{number} km to city center",
                  },
                  {
                    number: getSingleDecimal(
                      hotel.location.distanceToCentre / 1000
                    ),
                  }
                )}
              </span>
            </p>
          </Typography>
        </div>
        <Typography variant="Body/Supporting text (caption)/smRegular">
          <ul className={styles.amenityList}>
            {amenities.map((amenity) => {
              return (
                <li className={styles.amenityItem} key={amenity.id}>
                  <FacilityToIcon
                    id={amenity.id}
                    color="CurrentColor"
                    size={20}
                  />
                  {amenity.name}
                </li>
              )
            })}
          </ul>
        </Typography>
        {url && (
          <div className={styles.ctaWrapper}>
            <ButtonLink
              href={url}
              variant="Tertiary"
              color="Primary"
              size="Small"
              typography="Body/Paragraph/mdBold"
            >
              {intl.formatMessage({
                defaultMessage: "See hotel details",
              })}
            </ButtonLink>
          </div>
        )}
      </div>
    </article>
  )
}
