web/components/HotelReservation/HotelCardListing/index.tsx

"use client"
import { useSearchParams } from "next/navigation"
import { useEffect, useMemo, useState } from "react"
import { useIntl } from "react-intl"

import { useHotelFilterStore } from "@/stores/hotel-filters"

import { BackToTopButton } from "@/components/TempDesignSystem/BackToTopButton"

import HotelCard from "../HotelCard"
import { DEFAULT_SORT } from "../SelectHotel/HotelSorter"

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

import {
  type HotelCardListingProps,
  HotelCardListingTypeEnum,
  type HotelData,
} from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
import { SortOrder } from "@/types/components/hotelReservation/selectHotel/hotelSorter"

export default function HotelCardListing({
  hotelData,
  type = HotelCardListingTypeEnum.PageListing,
  activeCard,
  onHotelCardHover,
}: HotelCardListingProps) {
  const intl = useIntl()
  const searchParams = useSearchParams()
  const activeFilters = useHotelFilterStore((state) => state.activeFilters)
  const setResultCount = useHotelFilterStore((state) => state.setResultCount)
  const [showBackToTop, setShowBackToTop] = useState<boolean>(false)

  const sortBy = useMemo(
    () => searchParams.get("sort") ?? DEFAULT_SORT,
    [searchParams]
  )

  const sortedHotels = useMemo(() => {
    switch (sortBy) {
      case SortOrder.Name:
        return [...hotelData].sort((a, b) =>
          a.hotelData.name.localeCompare(b.hotelData.name)
        )
      case SortOrder.TripAdvisorRating:
        return [...hotelData].sort(
          (a, b) =>
            (b.hotelData.ratings?.tripAdvisor.rating ?? 0) -
            (a.hotelData.ratings?.tripAdvisor.rating ?? 0)
        )
      case SortOrder.Price:
        const getPricePerNight = (hotel: HotelData): number => {
          return (
            hotel.price?.member?.localPrice?.pricePerNight ??
            hotel.price?.public?.localPrice?.pricePerNight ??
            0
          )
        }
        return [...hotelData].sort(
          (a, b) => getPricePerNight(a) - getPricePerNight(b)
        )
      case SortOrder.Distance:
      default:
        return [...hotelData].sort(
          (a, b) =>
            a.hotelData.location.distanceToCentre -
            b.hotelData.location.distanceToCentre
        )
    }
  }, [hotelData, sortBy])

  const hotels = useMemo(() => {
    if (activeFilters.length === 0) {
      setResultCount(sortedHotels.length)
      return sortedHotels
    }

    const filteredHotels = sortedHotels.filter((hotel) =>
      activeFilters.every((appliedFilterId) =>
        hotel.hotelData.detailedFacilities.some(
          (facility) => facility.id.toString() === appliedFilterId
        )
      )
    )

    setResultCount(filteredHotels.length)
    return filteredHotels
  }, [activeFilters, sortedHotels, setResultCount])

  useEffect(() => {
    const handleScroll = () => {
      const hasScrolledPast = window.scrollY > 490
      setShowBackToTop(hasScrolledPast)
    }

    window.addEventListener("scroll", handleScroll, { passive: true })
    return () => window.removeEventListener("scroll", handleScroll)
  }, [])

  function scrollToTop() {
    window.scrollTo({ top: 0, behavior: "smooth" })
  }

  return (
    <section className={styles.hotelCards}>
      {hotels?.length
        ? hotels.map((hotel) => (
            <HotelCard
              key={hotel.hotelData.operaId}
              hotel={hotel}
              type={type}
              state={hotel.hotelData.name === activeCard ? "active" : "default"}
              onHotelCardHover={onHotelCardHover}
            />
          ))
        : null}
      {showBackToTop && <BackToTopButton onClick={scrollToTop} />}
    </section>
  )
}