import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useLayoutEffect, useRef } from 'react';
import { createPortal } from 'react-dom';
import styled from 'styled-components';
import { Wrap, spacing } from '../../spacing';
import { zIndex } from '../../style/theme';
import { getThemePropSelector } from '../../utils';
import { Button } from '../buttonv2/Buttonv2.component';
import { Icon } from '../icon/Icon.component';
import { Text } from '../text/Text.component';
const ModalContainer = styled.div `
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: ${zIndex.modal};
`;
const ModalContent = styled.div `
  display: flex;
  flex-direction: column;
  background-color: ${getThemePropSelector('backgroundLevel1')};
  color: ${getThemePropSelector('textPrimary')};
  border-radius: 5px;
  overflow: hidden;
  min-width: 250px;
  min-height: 150px;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  max-height: calc(100vh - ${spacing.r24} - ${spacing.r24});
`;
const ModalHeader = styled.div `
  display: flex;
  padding: ${spacing.r16} ${spacing.r16} ${spacing.r16} ${spacing.r32};
  background-color: ${(props) => props.theme.backgroundLevel3};
`;
const ModalBody = styled.div `
  padding: ${spacing.r32};
  flex-grow: 1;
  background-color: ${(props) => props.theme.backgroundLevel4};
  overflow-y: auto;
`;
const ModalFooter = styled.div `
  padding: ${spacing.r16};
  background-color: ${(props) => props.theme.backgroundLevel3};
`;
const Modal = ({ isOpen, close, title, children, footer, subTitle, role = 'dialog', ...rest }) => {
    const modalContainer = useRef(document.createElement('div'));
    useLayoutEffect(() => {
        document.body && document.body.prepend(modalContainer.current);
        return () => {
            document.body && document.body.removeChild(modalContainer.current);
        };
    }, [modalContainer]);
    useEffect(() => {
        if (isOpen) {
            //Auto focus the modal when it opens
            modalContainer.current.setAttribute('tabindex', '0');
            modalContainer.current.focus();
            //Listen to esc key to close the modal
            const handleEsc = (event) => {
                if (event.key === 'Escape') {
                    close && close();
                }
            };
            document.addEventListener('keydown', handleEsc);
            return () => {
                document.removeEventListener('keydown', handleEsc);
            };
        }
    }, [isOpen]);
    return isOpen
        ? createPortal(_jsx(ModalContainer, { className: "sc-modal", role: role, "aria-modal": "true", "aria-labelledby": "dialog_label", "aria-describedby": "dialog_desc", ...rest, children: _jsxs(ModalContent, { className: "sc-modal-content", children: [_jsx(ModalHeader, { className: "sc-modal-header", children: _jsxs(Wrap, { style: { flex: 1 }, children: [_jsx(Text, { variant: "Larger", id: "dialog_label", children: title }), close ? (_jsx(Button, { icon: _jsx(Icon, { name: "Close" }), onClick: close, tooltip: {
                                        overlay: 'Close modal',
                                    } })) : (_jsx(_Fragment, { children: subTitle }))] }) }), _jsx(ModalBody, { className: "sc-modal-body", id: "dialog_desc", children: children }), footer && (_jsx(ModalFooter, { className: "sc-modal-footer", children: footer }))] }) }), modalContainer.current)
        : null;
};
export { Modal };
