import { useEffect } from "react"
import { useIntl } from "react-intl"

import { useRatesStore } from "@/stores/select-rate"

import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { useRoomContext } from "@/contexts/Room"

import SelectedRoomPanel from "./SelectedRoomPanel"
import { roomSelectionPanelVariants } from "./variants"

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

export default function MultiRoomWrapper({
  children,
  isMultiRoom,
}: React.PropsWithChildren<{ isMultiRoom: boolean }>) {
  const intl = useIntl()
  const activeRoom = useRatesStore((state) => state.activeRoom)
  const { bookingRoom, isActiveRoom, roomNr, selectedRate } = useRoomContext()

  const onlyAdultsMsg = intl.formatMessage(
    { id: "{adults} adults" },
    { adults: bookingRoom.adults }
  )
  const adultsAndChildrenMsg = intl.formatMessage(
    { id: "{adults} adults, {children} children" },
    {
      adults: bookingRoom.adults,
      children: bookingRoom.childrenInRoom?.length,
    }
  )

  useEffect(() => {
    requestAnimationFrame(() => {
      const SCROLL_OFFSET = 100
      const roomElements = document.querySelectorAll(`.${styles.roomContainer}`)

      const selectedRoom = roomElements[activeRoom]

      if (selectedRoom) {
        const elementPosition = selectedRoom.getBoundingClientRect().top
        const offsetPosition = elementPosition + window.scrollY - SCROLL_OFFSET

        window.scrollTo({
          top: offsetPosition,
          behavior: "smooth",
        })
      }
    })
  }, [activeRoom])

  if (isMultiRoom) {
    const classNames = roomSelectionPanelVariants({
      active: isActiveRoom,
      selected: !!selectedRate && !isActiveRoom,
    })
    return (
      <div className={styles.roomContainer}>
        {selectedRate && !isActiveRoom ? null : (
          <Subtitle className={styles.subtitle} color="uiTextHighContrast">
            {intl.formatMessage(
              { id: "Room {roomIndex}" },
              { roomIndex: roomNr }
            )}
            ,{" "}
            {bookingRoom.childrenInRoom?.length
              ? adultsAndChildrenMsg
              : onlyAdultsMsg}
          </Subtitle>
        )}
        <div className={classNames}>
          <div className={styles.roomPanel}>
            <SelectedRoomPanel room={bookingRoom} />
          </div>
          <div className={styles.roomSelectionPanel}>{children}</div>
        </div>
      </div>
    )
  }

  return children
}