"use client"

import { useRef, useState } from "react"
import { useIntl } from "react-intl"

import SectionContainer from "@/components/Section/Container"
import SectionHeader from "@/components/Section/Header"
import Grids from "@/components/TempDesignSystem/Grids"
import ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton"

import { RoomCard } from "./RoomCard"

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

import type { RoomsProps } from "@/types/components/hotelPage/room"
import { HotelHashValues } from "@/types/components/hotelPage/tabNavigation"

export function Rooms({ hotelId, rooms }: RoomsProps) {
  const intl = useIntl()
  const showToggleButton = rooms.length > 3
  const [allRoomsVisible, setAllRoomsVisible] = useState(!showToggleButton)

  const scrollRef = useRef<HTMLDivElement>(null)

  function handleShowMore() {
    if (scrollRef.current && allRoomsVisible) {
      scrollRef.current.scrollIntoView({ behavior: "smooth" })
    }
    setAllRoomsVisible((state) => !state)
  }

  return (
    <SectionContainer
      id={HotelHashValues.rooms}
      className={styles.roomsContainer}
    >
      <div ref={scrollRef} className={styles.scrollRef}></div>
      <SectionHeader
        textTransform="capitalize"
        title={intl.formatMessage({ id: "Rooms" })}
        preamble={null}
      />
      <Grids.Stackable
        className={`${styles.grid} ${allRoomsVisible ? styles.allVisible : ""}`}
      >
        {rooms.map((room) => (
          <div key={room.id}>
            <RoomCard hotelId={hotelId} room={room} />
          </div>
        ))}
      </Grids.Stackable>

      {showToggleButton ? (
        <ShowMoreButton
          loadMoreData={handleShowMore}
          showLess={allRoomsVisible}
          textShowMore="Show more rooms"
          textShowLess="Show less rooms"
        />
      ) : null}
    </SectionContainer>
  )
}
