import React, { useState, useRef, useEffect } from 'react';
import PropTypes from 'prop-types';
import { CSSTransition } from 'react-transition-group';

const Modal = ({ className, openModal, toggleModal, children }) => {
    const modalRef = useRef(null);
    const modalInnerRef = useRef(null);

    // Handle Escape key press
    useEffect(() => {
        const handleEscapeKey = (event) => {
            if (event.key === 'Escape' && openModal) {
                toggleModal();
            }
        };

        if (openModal) {
            document.addEventListener('keydown', handleEscapeKey);
            // Focus the modal when it opens
            if (modalInnerRef.current) {
                modalInnerRef.current.focus();
            }
        }

        return () => {
            document.removeEventListener('keydown', handleEscapeKey);
        };
    }, [openModal, toggleModal]);
  
    return (
        <CSSTransition
          in={openModal}
          timeout={300}
          classNames="echorewards-modal"
          unmountOnExit
          nodeRef={modalRef}
        >
            <div ref={modalRef} className={`echorewards-modal ${className} ecre-fixed ecre-top-0 ecre-left-0 ecre-h-full ecre-w-full ecre-z-[9999] ecre-bg-[#374151] ecre-bg-opacity-30 ecre-overflow-x-hidden ecre-overflow-y-auto`} role="dialog" aria-modal="true" aria-labelledby="modal-title">
                <div className="echorewards-modal-container ecre-absolute ecre-top-0 ecre-left-0 ecre-h-full ecre-w-full">
                    <div className="echorewards-modal-content ecre-flex">
                        {openModal && <div className="ecre-fixed ecre-left-0 ecre-top-0 ecre-z-40 ecre-w-full ecre-h-full" onClick={toggleModal} aria-hidden="true"></div>}

                        <CSSTransition
                            in={openModal}
                            timeout={300}
                            classNames="echorewards-modal-inner"
                            unmountOnExit
                            nodeRef={modalInnerRef}
                        >
                            <div ref={modalInnerRef} className="echorewards-modal-inner ecre-m-auto ecre-relative ecre-z-50 ecre-flex ecre-flex-col ecre-max-w-[460px] ecre-w-full ecre-bg-white ecre-border ecre-rounded-[10px] ecre-border-[#E6E7EC]" tabIndex="-1">
                                <div className="echorewards-modal-header ecre-flex ecre-justify-between ecre-items-center ecre-px-6 ecre-pt-5 ecre-pb-2 ecre-mb-auto">
                                    <div id="modal-title">
                                        {children.header}
                                    </div>
                                    <button 
                                        className="echorewards-close-modal !ecre-shadow-none ecre-relative ecre-z-10 ecre-p-0 ecre-cursor-pointer ecre-ml-auto !ecre-bg-transparent !ecre-border-none" 
                                        onClick={toggleModal}
                                        aria-label="Close modal"
                                    >
                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true">
                                            <path fillRule="evenodd" clipRule="evenodd" d="M4.29289 4.29289C4.68342 3.90237 5.31658 3.90237 5.70711 4.29289L10 8.58579L14.2929 4.29289C14.6834 3.90237 15.3166 3.90237 15.7071 4.29289C16.0976 4.68342 16.0976 5.31658 15.7071 5.70711L11.4142 10L15.7071 14.2929C16.0976 14.6834 16.0976 15.3166 15.7071 15.7071C15.3166 16.0976 14.6834 16.0976 14.2929 15.7071L10 11.4142L5.70711 15.7071C5.31658 16.0976 4.68342 16.0976 4.29289 15.7071C3.90237 15.3166 3.90237 14.6834 4.29289 14.2929L8.58579 10L4.29289 5.70711C3.90237 5.31658 3.90237 4.68342 4.29289 4.29289Z" fill="#6B7280"/>
                                        </svg>
                                    </button>
                                </div>
                                <div className="echorewards-modal-body ecre-px-6 ecre-py-3 ecre-mt-auto ecre-mb-auto">
                                    {children.body}
                                </div>
                                {children.footer ? (
                                    <div className="echorewards-modal-footer ecre-px-6 ecre-pt-3 ecre-pb-6 ecre-mt-auto">
                                        {children.footer}
                                    </div>
                                ) : ''}
                            </div>
                        </CSSTransition>
                    </div>
                </div>
            </div>
        </CSSTransition>
    );
  };
  
  Modal.propTypes = {
    openModal: PropTypes.bool.isRequired,
    toggleModal: PropTypes.func.isRequired,
    children: PropTypes.shape({
      header: PropTypes.node,
      body: PropTypes.node,
      footer: PropTypes.node,
    }).isRequired,
  };

export default Modal;