'use client'

import { useCallback, useContext, useRef } from 'react'
import { Dialog, Modal, ModalOverlay } from 'react-aria-components'
import { IconButton } from '../IconButton'
import { MaterialIcon } from '../Icons/MaterialIcon'
import { Typography } from '../Typography'

import { SidePeekContext } from './SidePeekContext'

import SidePeekSEO from './SidePeekSEO'

import { debounce } from '@scandic-hotels/common/utils/debounce'
import styles from './sidePeek.module.css'

interface SidePeekProps {
  contentKey?: string
  title: string
  isOpen?: boolean
  openInRoot?: boolean
  handleClose?: (isOpen: boolean) => void
  closeLabel: string
}

export default function SidePeek({
  children,
  title,
  contentKey,
  handleClose,
  isOpen,
  openInRoot = false,
  closeLabel,
}: React.PropsWithChildren<SidePeekProps>) {
  const rootDiv = useRef<HTMLDivElement>(null)
  const headerRef = useRef<HTMLElement>(null)
  const dialogRef = useRef<HTMLDivElement>(null)

  const context = useContext(SidePeekContext)

  const updateHeightRefCallback = useCallback((node: HTMLElement | null) => {
    if (node) {
      const debouncedUpdate = debounce(([entry]: ResizeObserverEntry[]) => {
        const height = entry.contentRect.height

        dialogRef.current?.style.setProperty(
          '--sidepeek-header-height',
          `${height}px`
        )
      }, 100)

      const observer = new ResizeObserver(debouncedUpdate)
      observer.observe(node)

      return () => {
        observer.unobserve(node)
        observer.disconnect()
        dialogRef.current?.style.removeProperty('--sidepeek-header-height')
      }
    }
  }, [])

  function onClose() {
    const closeHandler = handleClose || context?.handleClose
    closeHandler?.(false)
  }

  return (
    <>
      <div ref={openInRoot ? null : rootDiv}>
        <ModalOverlay
          UNSTABLE_portalContainer={rootDiv.current || undefined}
          className={styles.overlay}
          isOpen={
            isOpen || (!!contentKey && contentKey === context?.activeSidePeek)
          }
          onOpenChange={onClose}
          isDismissable
        >
          <Modal className={styles.modal}>
            <Dialog
              ref={dialogRef}
              className={styles.dialog}
              aria-label={title}
            >
              <aside className={styles.aside}>
                <header
                  ref={(node) => {
                    headerRef.current = node
                    return updateHeightRefCallback(node)
                  }}
                  className={styles.header}
                >
                  <div className={styles.headerContent}>
                    {title ? (
                      <Typography variant="Title/md">
                        <h2 className={styles.heading}>{title}</h2>
                      </Typography>
                    ) : null}
                    <IconButton
                      theme="Black"
                      style="Muted"
                      aria-label={closeLabel}
                      onPress={onClose}
                    >
                      <MaterialIcon
                        icon="close"
                        color="Icon/Interactive/Default"
                      />
                    </IconButton>
                  </div>
                </header>
                <div className={styles.sidePeekContent}>{children}</div>
              </aside>
            </Dialog>
          </Modal>
        </ModalOverlay>
      </div>

      <SidePeekSEO title={title}>{children}</SidePeekSEO>
    </>
  )
}