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

"use client"

import { useIsSSR } from "@react-aria/ssr"
import { useContext, useRef } from "react"
import { Dialog, Modal, ModalOverlay } from "react-aria-components"
import { useIntl } from "react-intl"

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

import { SidePeekContext } from "@/components/SidePeeks/SidePeekProvider"

import Button from "../Button"

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

import type { SidePeekProps } from "./sidePeek"

function SidePeek({
  children,
  title,
  contentKey,
  handleClose,
  isOpen,
  openInRoot = false,
}: React.PropsWithChildren<SidePeekProps>) {
  const isSSR = useIsSSR()
  const intl = useIntl()
  const rootDiv = useRef<HTMLDivElement>(null)

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

  if (isSSR) {
    return (
      <div className={styles.visuallyHidden}>
        <h2>{title}</h2>
        {children}
      </div>
    )
  }

  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 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}
                <Button
                  aria-label={intl.formatMessage({ id: "Close" })}
                  className={styles.closeButton}
                  intent="text"
                  onPress={onClose}
                >
                  <MaterialIcon icon="close" color="Icon/Interactive/Default" />
                </Button>
              </header>
              <div className={styles.sidePeekContent}>{children}</div>
            </aside>
          </Dialog>
        </Modal>
      </ModalOverlay>
    </div>
  )
}

export default SidePeek