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

type ActionModalProps = {
    children?: React.ReactNode
    onClose?: () => void
    customFunction?: () => void
    customClass?: string
    hasCloseButton?: boolean
    title?: React.ReactNode
    hasDownloadButton?: boolean
    fileUrl?: any;
}

const ActionModal = ({customClass, onClose, children, hasCloseButton, hasDownloadButton, fileUrl, title}: ActionModalProps) => {

    return (
        createPortal(
            <div id="modal-overlay" className={`actions-modal-overlay ${customClass}`} onClick={(e) => {
                // @ts-ignore
                e.target?.id === 'modal-overlay' && onClose && onClose()
            }
            }>
                <div id='action-modal'
                >


                    {
                        hasCloseButton &&
                        <div className="modal-close-btn">
                            <button onClick={onClose}><img src={closeBtn} alt="closebtn"/></button>
                        </div>
                    }

                    {
                        title && <h4 className={'title'}>{title}</h4>
                    }

                    {children}
                    {
                        hasDownloadButton &&
                        <div className='download-btn-container'>
                            <a rel="noreferrer" target={'_blank'} className='download-pdf-btn' href={fileUrl} download>ΚΑΤΕΒΑΣΤΕ ΤΟ ΑΡΧΕΙΟ</a>
                        </div>
                    }
                </div>
            </div>, document.body
        )
    );
};

export default ActionModal;