import { ModalProps } from "../../data/Props";
import ModalStyle from "./modal.module.css";
import React, { useState } from "react";
import ReactDOM from "react-dom";

export const CommonModal: React.FC<ModalProps> = (props) => {
  const [isShow, setShow] = useState(props.show);
  const showLeftBtn = !!props.leftBtn;
  const showRightBtn = !!props.rightBtn;

  if (!isShow) {
    return null;
  }

  return ReactDOM.createPortal(
    <>
      {props.dimBackground ? (
        <div
          className={ModalStyle.overlay}
          onClick={
            props.dismissOnOutsideClick ? () => setShow(false) : undefined
          }
        ></div>
      ) : null}
      <div className={ModalStyle.container}>
        {props.title ? <p className={ModalStyle.title}>{props.title}</p> : null}
        {props.content ? (
          <p className={ModalStyle.content}>{props.content}</p>
        ) : null}
        <div
          style={{
            width: "100%",
            height: "1px",
            backgroundColor: "#3c3c4356",
            marginTop: "16px",
          }}
        ></div>
        <div className={ModalStyle.btnContainer}>
          {showLeftBtn ? (
            <button
              className={ModalStyle.btn}
              onClick={() => {
                setShow(false);
                props.leftBtn?.onClick?.();
              }}
            >
              {props.leftBtn?.btnText}
            </button>
          ) : null}
          {showLeftBtn && showRightBtn ? (
            <div
              style={{
                width: "1px",
                height: "100%",
                backgroundColor: "#3c3c4356",
              }}
            ></div>
          ) : null}
          {showRightBtn ? (
            <button
              className={ModalStyle.btn}
              style={{ color: "#FA2C19" }}
              onClick={() => {
                setShow(false);
                props.rightBtn?.onClick?.();
              }}
            >
              {props.rightBtn?.btnText}
            </button>
          ) : null}
        </div>
      </div>
    </>,
    document.body
  );
};
