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

import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"

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

import Button from "@/components/TempDesignSystem/Button"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { useRoomContext } from "@/contexts/SelectRate/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 roomMsg = intl.formatMessage(
    {
      defaultMessage: "Room {roomIndex}",
    },
    { roomIndex: roomNr }
  )

  const adultsMsg = intl.formatMessage(
    {
      defaultMessage: "{adults, plural, one {# adult} other {# adults}}",
    },
    { adults: bookingRoom.adults }
  )

  const childrenMsg = intl.formatMessage(
    {
      defaultMessage: "{children, plural, one {# child} other {# children}}",
    },
    {
      children: bookingRoom.childrenInRoom?.length,
    }
  )

  const onlyAdultsMsg = adultsMsg
  const adultsAndChildrenMsg = [adultsMsg, childrenMsg].join(", ")
  const guestsMsg = bookingRoom.childrenInRoom?.length
    ? adultsAndChildrenMsg
    : onlyAdultsMsg

  const title = [roomMsg, guestsMsg].join(", ")

  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 color="uiTextHighContrast">{title}</Subtitle>
          )}
          {selectedRate && isActiveRoom ? (
            <Button
              intent="text"
              onClick={closeSection}
              size="medium"
              theme="base"
              variant="icon"
            >
              {intl.formatMessage({
                defaultMessage: "Close",
              })}
              <MaterialIcon
                icon="keyboard_arrow_up"
                size={20}
                color="CurrentColor"
              />
            </Button>
          ) : null}
        </div>
        <div className={classNames}>
          <div className={styles.roomPanel}>
            <SelectedRoomPanel />
          </div>
          <div className={styles.roomSelectionPanel}>{children}</div>
        </div>
      </div>
    )
  }

  return children
}