import type { FC } from 'react';
import React from 'react';
import type { CustomModalProps } from './types';
import { ModalContent } from './modalContent';
import { ModalContainer } from './modalContainer';
import { DEFAULT_MODAL_CLOSE_TIMEOUT_MS } from '../../constants/closeTimeout';

export const CLASSNAME = 'Modal';

const ModalCustom: FC<CustomModalProps> = ({
    testId = CLASSNAME,
    closeTimeoutMS = DEFAULT_MODAL_CLOSE_TIMEOUT_MS,
    zIndex = 1000,
    variant = 'Modal',
    onRequestClose,
    onConfirm,
    confirmTitle,
    confirmDisabled,
    confirmVariant,
    cancelTitle,
    header,
    title,
    subtitle,
    hideCancelButton,
    customHeader,
    customFooter,
    confirmButtonProps,
    cancelButtonProps,
    children,
    ...containerProps
}) => {
    return (
        <ModalContainer
            testId={testId}
            closeTimeoutMS={closeTimeoutMS}
            zIndex={zIndex}
            variant={variant}
            onRequestClose={onRequestClose}
            {...containerProps}
        >
            <ModalContent
                onRequestClose={onRequestClose}
                onConfirm={onConfirm}
                confirmTitle={confirmTitle}
                confirmDisabled={confirmDisabled}
                confirmVariant={confirmVariant}
                cancelTitle={cancelTitle}
                header={header}
                title={title}
                subtitle={subtitle}
                hideCancelButton={hideCancelButton}
                customHeader={customHeader}
                customFooter={customFooter}
                confirmButtonProps={confirmButtonProps}
                cancelButtonProps={cancelButtonProps}
            >
                {children}
            </ModalContent>
        </ModalContainer>
    );
};

ModalCustom.displayName = 'Modal';

export { ModalCustom };