web/apps/scandic-web/components/TempDesignSystem/SidePeekSelfControlled/index.tsx

"use client"

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

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

import useSetOverflowVisibleOnRA from "@/hooks/useSetOverflowVisibleOnRA"

import SidePeekSEO from "./SidePeekSEO"

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

import type { SidePeekSelfControlledProps } from "./sidePeek"

export default function SidePeekSelfControlled({
  children,
  title,
}: React.PropsWithChildren<SidePeekSelfControlledProps>) {
  const intl = useIntl()
  return (
    <>
      <ModalOverlay className={styles.overlay} isDismissable>
        <Modal className={styles.modal}>
          <Dialog className={styles.dialog} aria-label={title}>
            {({ close }) => (
              <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={close}
                    aria-label={intl.formatMessage({
                      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
}