web/components/HotelReservation/HotelCardListing/index.tsx

"use client"
import { useSearchParams } from "next/navigation"
import { useMemo } from "react"

import Title from "@/components/TempDesignSystem/Text/Title"

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

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

import {
  type HotelCardListingProps,
  HotelCardListingTypeEnum,
} 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 searchParams = useSearchParams()

  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:
        return [...hotelData].sort(
          (a, b) =>
            parseInt(a.price?.memberAmount ?? "0", 10) -
            parseInt(b.price?.memberAmount ?? "0", 10)
        )
      case SortOrder.Distance:
      default:
        return [...hotelData].sort(
          (a, b) =>
            a.hotelData.location.distanceToCentre -
            b.hotelData.location.distanceToCentre
        )
    }
  }, [hotelData, sortBy])

  const hotels = useMemo(() => {
    const appliedFilters = searchParams.get("filters")?.split(",")
    if (!appliedFilters || appliedFilters.length === 0) return sortedHotels

    return sortedHotels.filter((hotel) =>
      appliedFilters.every((appliedFilterId) =>
        hotel.hotelData.detailedFacilities.some(
          (facility) => facility.id.toString() === appliedFilterId
        )
      )
    )
  }, [searchParams, sortedHotels])

  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}
          />
        ))
      ) : (
        <Title>No hotels found</Title>
      )}
    </section>
  )
}