import React from 'react';
import type { FC } from 'react';
import cx from 'classnames';
import ReactModal from 'react-modal';
import { usePageContext } from '../../pageContext';
import { DEFAULT_MODAL_CLOSE_TIMEOUT_MS } from '../../../constants/closeTimeout';

export const CLASSNAME = 'Modal';

export type ModalContainerCustomProps = {
    variant?: 'Modal' | 'Sidecar' | 'FullScreenModal';
    contentStyle?: React.CSSProperties;
};

export type ModalContainerProps = ReactModal.Props & {
    zIndex?: number;
} & ModalContainerCustomProps;

export const ModalContainer: FC<ModalContainerProps> = ({
    className,
    testId = CLASSNAME,
    portalClassName,
    closeTimeoutMS = DEFAULT_MODAL_CLOSE_TIMEOUT_MS,
    zIndex = 1000,
    variant = 'Modal',
    onRequestClose,
    contentStyle,
    children,
    ...props
}) => {
    const page = usePageContext();

    return (
        <ReactModal
            className={cx(className, variant, 'ReactModal')}
            appElement={document.getElementById('root') ?? []}
            portalClassName={cx(
                page.className,
                'ReactModalPortal',
                `ReactModalPortal-${variant}`,
                portalClassName
            )}
            style={{
                overlay: {
                    backgroundColor: 'rgba(0, 0, 0, 0.5)',
                    zIndex,
                },
                content: contentStyle,
            }}
            onRequestClose={onRequestClose}
            contentLabel="Modal"
            ariaHideApp={false}
            bodyOpenClassName="ReactModal-body-open"
            closeTimeoutMS={closeTimeoutMS}
            testId={testId}
            {...props}
        >
            {children}
        </ReactModal>
    );
};