import React from 'react';
import {createPortal} from 'react-dom';
import closeBtn from "../../../assets/images/close-btn.svg";
import "./modal.scss";

type ModalProps =  {
    children?: React.ReactNode
    modalHeaderTitle?: string
    modalHeaderImg?: string
    containerClass: string
    closeBtn: boolean
    // show: (state:boolean) => void
    close?: () => void
}


/**
 * Used in Quick Access only, DEPRICATED TO BE REPLACED,
 * DO NOT USE
 */
const Modal = (props: ModalProps) => {
    return (
        createPortal (
            <div className={props.containerClass} onClick={(e) => {e.stopPropagation(); props.close && props.close()}}>
                <div id="dua-modal" onClick={(e) => {e.stopPropagation()}}>
                    <div className="dua-modal-header">
                        <div className="dua-modal-header-left">
                            <img src={props.modalHeaderImg} alt={`${props.modalHeaderTitle}-img`}/>
                            <h3>{props.modalHeaderTitle}</h3>
                        </div>
                        <div className="dua-modal-close-btn-container">
                            <button className={props.closeBtn ? 'close-btn' : 'hide-element'} onClick={() => {props.close && props.close()}}><img src={closeBtn} alt="closebtn"/></button>
                        </div>
                    </div>
                    {props.children}  
                </div>
            </div>, document.body
        )
            
    );
}

export default Modal;