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

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

import { ChevronUpIcon } from "@/components/Icons"
import Button from "@/components/TempDesignSystem/Button"
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 {
    actions: { closeSection },
    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} data-multiroom="true">
        <div className={styles.header}>
          {selectedRate && !isActiveRoom ? null : (
            <Subtitle className={styles.subtitle} color="uiTextHighContrast">
              {intl.formatMessage(
                { id: "Room {roomIndex}" },
                { roomIndex: roomNr }
              )}
              ,{" "}
              {bookingRoom.childrenInRoom?.length
                ? adultsAndChildrenMsg
                : onlyAdultsMsg}
            </Subtitle>
          )}
          {selectedRate && isActiveRoom ? (
            <Button
              intent="text"
              onClick={closeSection}
              size="medium"
              theme="base"
              variant="icon"
            >
              {intl.formatMessage({ id: "Close" })}
              <ChevronUpIcon height={20} width={20} />
            </Button>
          ) : null}
        </div>
        <div className={classNames}>
          <div className={styles.roomPanel}>
            <SelectedRoomPanel />
          </div>
          <div className={styles.roomSelectionPanel}>{children}</div>
        </div>
      </div>
    )
  }

  return children
}
