import React from 'react';
import { Modal } from 'react-bootstrap';
import Button from 'react-bootstrap/Button';
import { ModalProps } from 'react-bootstrap/Modal';

export interface GenericModalProps {
    title?: string;
    show: boolean;
    save?: () => void;
    cancel?: () => void;
    size?: 'xl' | 'sm' | 'lg';
    modalProps?: ModalProps;
    hideFooter?: boolean;
    primaryButtonLabel?: string;
}

export interface ModalState {
    show: boolean;
    saved: boolean;
    cancelled: boolean;
}

export const initialModalState: ModalState = {
    show: false,
    saved: false,
    cancelled: false,
};

export const GenericModal: React.FC<GenericModalProps> = ({ title, show, cancel, size, modalProps, children }) => {
    const passThruProps = modalProps ? { ...modalProps } : {};
    const sizeProp = passThruProps.dialogClassName ? {} : { size: size || 'xl' };
    return (
        <Modal
            {...sizeProp}
            show={show}
            onHide={cancel}
            enforceFocus={false}
            restoreFocus={false}
            scrollable={true}
            {...passThruProps}>
            {title && (
                <Modal.Header>
                    <Modal.Title>{title}</Modal.Title>
                </Modal.Header>
            )}
            <Modal.Body>
                {!title && (
                    <Button className="close" variant="light" onClick={cancel}>
                        &times;
                    </Button>
                )}
                {children}
            </Modal.Body>
        </Modal>
    );
};
