'use client'

import { useEffect } from 'react'
import { Dialog, Modal, ModalOverlay } from 'react-aria-components'
import { useIntl } from 'react-intl'

import usePopStateHandler from '@scandic-hotels/common/hooks/usePopStateHandler'
import useSetOverflowVisibleOnRA from '@scandic-hotels/common/hooks/useSetOverflowVisibleOnRA'

import { IconButton } from '../../IconButton'
import { MaterialIcon } from '../../Icons/MaterialIcon'
import { Typography } from '../../Typography'

import SidePeekSEO from '../SidePeekSEO'

import styles from './sidePeekSelfControlled.module.css'

interface SidePeekSelfControlledProps extends React.PropsWithChildren {
  title: string
  isOpen: boolean
  onClose: () => void
}

export default function SidePeekSelfControlled({
  children,
  isOpen,
  onClose,
  title,
}: SidePeekSelfControlledProps) {
  const intl = useIntl()

  function handleClose(moveBack = false) {
    if (moveBack) {
      window.history.back()
    } else {
      onClose()
    }
  }

  // Only register popstate handler when open
  usePopStateHandler(() => handleClose(), isOpen)

  useEffect(() => {
    if (isOpen) {
      window.history.pushState(null, '', window.location.href)
    }
  }, [isOpen])

  return (
    <>
      <ModalOverlay
        className={styles.overlay}
        isDismissable
        onOpenChange={() => handleClose(true)}
        isOpen={isOpen}
      >
        <Modal className={styles.modal}>
          <Dialog className={styles.dialog} aria-label={title}>
            <aside className={styles.sidePeek}>
              <header className={styles.header}>
                {title ? (
                  <Typography variant="Title/md" className={styles.heading}>
                    <h2>{title}</h2>
                  </Typography>
                ) : null}
                <IconButton
                  theme="Black"
                  style="Muted"
                  onPress={() => handleClose(true)}
                  aria-label={intl.formatMessage({
                    id: 'common.close',
                    defaultMessage: 'Close',
                  })}
                >
                  <MaterialIcon
                    icon="close"
                    size={24}
                    color="Icon/Interactive/Default"
                  />
                </IconButton>
              </header>
              <div className={styles.sidePeekContent}>{children}</div>
              <KeepBodyVisible />
            </aside>
          </Dialog>
        </Modal>
      </ModalOverlay>

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

function KeepBodyVisible() {
  const toggle = useSetOverflowVisibleOnRA()
  useEffect(() => {
    toggle(true)
    return () => toggle(false)
  }, [toggle])
  return null
}