import React, { useState, useEffect } from "react";
import style from "./overlayBox.module.css";

const OverlayBox = (props) => {
  const [open, setOpen] = useState(false);
  const [header, setHeader] = useState(true);
  const [blur, setBlur] = useState(true);
  useEffect(() => {
    console.log("open");
    setOpen(props.open);
  }, [props.open]);
  useEffect(() => {
    (props.head === true || props.head === false) && setHeader(props.head);
  }, [props.head]);
  useEffect(() => {
    (props.blur === true || props.blur === false) && setBlur(props.blur);
  }, [props.blur]);
  const onClickClose = () => {
    if (props.close) props.close(false);
  };
  return (
    <React.Fragment>
      {open && (
        <React.Fragment>
          <div
            className={`${style.overlay_main} ${
              props.customMainClass ? props.customMainClass : ""
            }`}
          >
            {blur && (
              <div
                className={style.overlay_blur}
                onClick={() =>
                  props.disableOverlayClose ? "" : onClickClose()
                }
              />
            )}
            <div
              className={`${style.overlay_box} ${
                props.customClass && props.customClass
              }`}
            >
              <div className={style.overlay_content}>
                <div
                  className={`${
                    header ? style.overlay_head : style.overlay_head_no
                  }`}
                >
                  <h6>{props.title}</h6>
                  <div className={style.close} onClick={onClickClose}>
                    &#10006;
                  </div>
                </div>
                <div
                  className={`${style.overlay_body} ${
                    props.customBodyClass && props.customBodyClass
                  }`}
                >
                  {props.children}
                </div>
                {props.footer && (
                  <div className={style.overlay_footer}>{props.footer}</div>
                )}
              </div>
            </div>
          </div>
        </React.Fragment>
      )}
    </React.Fragment>
  );
};

export default OverlayBox;
