web/components/HotelReservation/SelectRate/Rooms/index.tsx

"use client"

import { useCallback, useMemo, useState } from "react"

import RoomFilter from "../RoomFilter"
import RoomSelection from "../RoomSelection"
import { filterDuplicateRoomTypesByLowestPrice } from "./utils"

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

import {
  RoomPackageCodeEnum,
  type RoomPackageCodes,
} from "@/types/components/hotelReservation/selectRate/roomFilter"
import type { SelectRateProps } from "@/types/components/hotelReservation/selectRate/roomSelection"
import type { Rate } from "@/types/components/hotelReservation/selectRate/selectRate"
import type {
  RoomConfiguration,
  RoomsAvailability,
} from "@/server/routers/hotels/output"

export default function Rooms({
  roomsAvailability,
  roomCategories = [],
  user,
  packages,
}: SelectRateProps) {
  const visibleRooms: RoomConfiguration[] =
    filterDuplicateRoomTypesByLowestPrice(roomsAvailability.roomConfigurations)
  const [rateSummary, setRateSummary] = useState<Rate | null>(null)
  const [selectedPackages, setSelectedPackages] = useState<RoomPackageCodes[]>(
    []
  )

  const handleFilter = useCallback(
    (filter: Record<RoomPackageCodeEnum, boolean | undefined>) => {
      const filteredPackages = Object.keys(filter).filter(
        (key) => filter[key as RoomPackageCodeEnum]
      ) as RoomPackageCodeEnum[]

      setSelectedPackages(filteredPackages)

      // if (filteredPackages.length === 0) {
      //   setRooms({
      //     ...roomsAvailability,
      //     roomConfigurations: visibleRooms,
      //   })

      //   if (!!rateSummary) {
      //     setRateSummary({
      //       ...rateSummary,
      //       features: [],
      //     })
      //   }

      //   if (noRoomsAvailable) {
      //     setRoomsAvailable()
      //   }

      //   return
      // }

      // const filteredRooms = visibleRooms.filter((room) =>
      //   filteredPackages.every((filteredPackage) =>
      //     room.features.some((feature) => feature.code === filteredPackage)
      //   )
      // )
      // let notAvailableRooms = visibleRooms.filter((room) =>
      //   filteredPackages.every(
      //     (filteredPackage) =>
      //       !room.features.some((feature) => feature.code === filteredPackage)
      //   )
      // )
      // // Clone nested object to keep original object intact and not messup the room data
      // notAvailableRooms = JSON.parse(JSON.stringify(notAvailableRooms))
      // notAvailableRooms.forEach((room) => {
      //   room.status = "NotAvailable"
      // })
      // setRooms({
      //   ...roomsAvailability,
      //   roomConfigurations: [...filteredRooms, ...notAvailableRooms],
      // })

      // if (filteredRooms.length == 0) {
      //   setNoRoomsAvailable()
      // } else if (noRoomsAvailable) {
      //   setRoomsAvailable()
      // }

      // const petRoomPackage =
      //   (filteredPackages.includes(RoomPackageCodeEnum.PET_ROOM) &&
      //     packages.find((pkg) => pkg.code === RoomPackageCodeEnum.PET_ROOM)) ||
      //   undefined

      // const features = filteredRooms.find((room) =>
      //   room.features.some(
      //     (feature) => feature.code === RoomPackageCodeEnum.PET_ROOM
      //   )
      // )?.features

      // if (!!rateSummary) {
      //   setRateSummary({
      //     ...rateSummary,
      //     features: petRoomPackage && features ? features : [],
      //   })
      // }
    },
    [
      // roomsAvailability,
      // visibleRooms,
      // rateSummary,
      // packages,
      // noRoomsAvailable,
      // setNoRoomsAvailable,
      // setRoomsAvailable,
    ]
  )

  const filteredRooms = useMemo(() => {
    return visibleRooms.filter((room) =>
      selectedPackages.every((filteredPackage) =>
        room.features.some((feature) => feature.code === filteredPackage)
      )
    )
  }, [visibleRooms, selectedPackages])

  const rooms = useMemo(() => {
    if (selectedPackages.length === 0) {
      return {
        ...roomsAvailability,
        roomConfigurations: visibleRooms,
      }
    }

    let notAvailableRooms = visibleRooms
      .filter((room) =>
        selectedPackages.every(
          (filteredPackage) =>
            !room.features.some((feature) => feature.code === filteredPackage)
        )
      )
      .map((room) => ({
        ...room,
        status: "NotAvailable",
      }))

    return {
      ...roomsAvailability,
      roomConfigurations: [...filteredRooms, ...notAvailableRooms],
    }
  }, [roomsAvailability, visibleRooms, selectedPackages, filteredRooms])

  const rSummary: Rate | null = useMemo(() => {
    const petRoomPackage =
      (selectedPackages.includes(RoomPackageCodeEnum.PET_ROOM) &&
        packages.find((pkg) => pkg.code === RoomPackageCodeEnum.PET_ROOM)) ||
      undefined

    const features = filteredRooms.find((room) =>
      room.features.some(
        (feature) => feature.code === RoomPackageCodeEnum.PET_ROOM
      )
    )?.features

    if (!rateSummary) return null

    return {
      ...rateSummary,
      features: petRoomPackage && features ? features : [],
    }
  }, [filteredRooms, rateSummary, packages, selectedPackages])

  return (
    <div className={styles.content}>
      <RoomFilter
        numberOfRooms={rooms.roomConfigurations.length}
        onFilter={handleFilter}
        filterOptions={packages}
      />
      <RoomSelection
        roomsAvailability={rooms}
        roomCategories={roomCategories}
        user={user}
        packages={packages}
        selectedPackages={selectedPackages}
        setRateSummary={setRateSummary}
        rateSummary={rSummary}
      />
    </div>
  )
}