import React, {MouseEvent, ReactNode, ReactPortal, useCallback, useEffect} from "react";
import styles from "./Modal.module.scss";
import {createPortal} from "react-dom";
import {X} from "react-feather";

interface Props {
    children: ReactNode;
    open: boolean;
    onClose?: () => void;
    fullHeight?: boolean;
    disabledCloseClickOutside?: boolean;
}

export function Modal({open = false, fullHeight = false, onClose, disabledCloseClickOutside = false, ...props}: Props): ReactPortal | null {

    // On key down call back
    const onKeyDown = useCallback(
            (e) => {
                if (e.keyCode === 27) { // Press "esc"
                    onClose && onClose();
                }
            },
            [onClose]
    );

    /**
     * Close modal
     * @param e
     */
    function close(e: MouseEvent) {
        const target        = e.target as Element;
        const currentTarget = e.currentTarget as Element;

        if ((disabledCloseClickOutside === false && target.className === styles.cell) || currentTarget.id === "closeModal") {
            onClose && onClose();
        }
    }

    /**
     * Add/Remove listener keydown
     */
    useEffect(function eventEffect() {
        if (open) {
            document.addEventListener("keydown", onKeyDown, false);
        } else {
            document.removeEventListener("keydown", onKeyDown, false);
        }
        return () => {
            document.removeEventListener("keydown", onKeyDown, false);
        };
    }, [open, onKeyDown]);

    if (open) {
        return createPortal(<div className={`${styles.overlay} ${fullHeight ? styles.fullHeight : ""}`} onClick={close}>
            <div className={styles.cell}>
                <div className={styles.modal}>
                    <button id={"closeModal"} type={"button"} className={styles.closeBtn} onClick={close} title={"Fermer"}>
                        <X/>
                    </button>
                    {props.children}
                </div>
            </div>
        </div>, document.body);
    } else {
        return null
    }
}