/* The CommonPopup component serves as a generic modal dialog for displaying cofirmation messages, notifications, or custom components. */
import React, { useEffect } from "react";
import styles from "./CommonPopup.module.scss";

// Define the props for the CommonPopup component
interface CommonPopupProps {
    confirmationModal?: boolean;
    component?: React.ReactNode;
    message?: string;
    title?: string;
    paragraph?: string;
    primaryBtnText?: string;
    cancelButtonText?: string;
    deleteBtnText?: string;
    footer?: boolean;
    onSubmit?: () => void;
    onCancel?: () => void;
    setModal: (value: boolean) => void;
    isHideClose?: boolean;
}


const useLockBodyScroll = (active: boolean) => {
    useEffect(() => {
        if (!active) return;

        const scrollY = window.scrollY;
        const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;

        const body = document.body;
        const header = document.querySelector('header') as HTMLElement | null;

        // Lock scroll
        body.style.overflow = 'hidden';
        body.style.top = `-${scrollY}px`;
        body.style.left = '0';
        body.style.width = '100%';
        body.style.paddingRight = `${scrollbarWidth}px`; // Add padding to body

        if (header) {
            header.style.paddingRight = `${scrollbarWidth}px`; // Add padding to header
        }

        return () => {
            body.style.overflow = '';
            body.style.position = '';
            body.style.top = '';
            body.style.left = '';
            body.style.width = '';
            body.style.paddingRight = ''; // Reset body padding

            if (header) {
                header.style.paddingRight = ''; // Reset header padding
            }

            window.scrollTo(0, scrollY);
        };
    }, [active]);
};

const CommonPopup: React.FC<CommonPopupProps> = ({ footer = true, isHideClose = false, ...props }) => {


    const closePopup = () => {
        if (!isHideClose) {
            props.setModal(false)
        }
    }
    useLockBodyScroll(true);

    // Add or remove a class to the body based on the modal's open state
    // useEffect(() => {
    //     if (props.setModal) {
    //         document.body.classList.add('modal-open');
    //     } else {
    //         document.body.classList.remove('modal-open');
    //     }

    //     // Cleanup function to remove the class when the component is unmounted
    //     return () => {
    //         document.body.classList.remove('modal-open');
    //     };
    // }, [props.setModal]);

    // Add a listener for the Escape key press
    useEffect(() => {
        const handleEscKeyPress = (event: KeyboardEvent) => {
            if (event.key === 'Escape') {
                closePopup();
            }
        };

        // Attach the event listener
        window.addEventListener('keydown', handleEscKeyPress);

        // Cleanup the event listener on component unmount
        return () => {
            window.removeEventListener('keydown', handleEscKeyPress);
        };
    }, []);


    return (
        <>
            <div className={`${styles.commonPopUp} commonPopup flex items-center fixed top-0 left-0 justify-center h-dvh w-full z-9999`}>
                <div className={`${styles.overlayBackground} h-full w-full absolute top-0 left-0`} onClick={closePopup}></div>
                <div className={`${styles.popupWrapper} popupWrapper max-w-[90%] z-[3] h-fit w-[588px] relative`}>
                    {!isHideClose && <button type="button" className={`PopupCloseBtn SecondaryBtn !p-0 absolute right-0 top-0 z-1 !w-[57px] !h-[57px] rounded-full`} onClick={closePopup}>
                        <i className={`Icon IconCross !bg-white w-[14px] h-[14px]`}></i>
                    </button>}
                    <div className={`${isHideClose ? 'bg-white rounded-[30px]' : styles.popupBox} w-full`}>
                        <div className="popup-wrapper-body">
                            <div className="swalContent">
                                <div className={`p-4 md:p-5 lg:p-6 w-full`}>
                                    <div className={`max-w-[calc(100%-65px)] md:max-w-[calc(100%-55px)]`}>

                                        {props?.title && <h4 className={`title`}>{props?.title}</h4>}
                                        {props?.paragraph && <p className={`fs-16 text-grey667Color`}>{props?.paragraph}</p>}
                                    </div>
                                </div>
                                {!props.confirmationModal && (
                                    <>
                                        {props?.component &&
                                            <div className={`p-4 md:p-5 lg:p-6 w-full max-h-[calc(100vh-260px)] md:max-h-[calc(100vh-260px)] overflow-auto border-t border-whiteEC`}>
                                                {props?.component}
                                            </div>
                                        }
                                    </>
                                )}
                                {footer && <div className={`flex items-stretch gap-2.5 md:gap-4 w-full p-4 md:p-5 lg:p-6 border-t border-whiteEC`}>

                                    {props?.cancelButtonText &&
                                        <button type="button" onClick={props?.onCancel} className="SecondaryBorderedBtn w-full">{props?.cancelButtonText}</button>
                                    }

                                    {props?.primaryBtnText &&
                                        <button type="button" onClick={props?.onSubmit} className="SecondaryBtn w-full">{props?.primaryBtnText}</button>
                                    }

                                    {props?.deleteBtnText &&
                                        <button type="button" onClick={props?.onSubmit} className="redBtn w-full">{props?.deleteBtnText}</button>
                                    }
                                </div>}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </>
    );
};

export default CommonPopup;