function initializeModalButtons() {
    // OPEN THE MODAL WITH DIMENSIONS
    function openModalWithDimensions(url, width, height) {
        const iframe = document.getElementById("popupModalFrame");
        openModal(url);
        iframe.style.height = height;
        iframe.style.width = width;
    }

    // OPEN MODAL
    function openModal(url) {
        const modalContainer = document.getElementById("popUpModal");
        const iframe = document.getElementById("popupModalFrame");
        const body = document.body;
        const loader = document.getElementById("modalLoader");

        body.style.overflow = "hidden";
        loader.style.display = "flex";  // Show loader
        iframe.src = url;
        modalContainer.style.display = "flex";

        // Hide loader when iframe content has fully loaded
        iframe.onload = () => {
            loader.style.display = "none";  // Hide loader
        };
    }

    // CLOSE MODAL
    function closeModal() {
        const modalContainer = document.getElementById("popUpModal");
        const iframe = document.getElementById("popupModalFrame");
        const body = document.body;
        const loader = document.getElementById("modalLoader");

        iframe.src = "";
        body.style.overflow = "auto";
        modalContainer.style.display = "none";
        loader.style.display = "none";  // Ensure loader is hidden
    }

    // Function to add a click listener to buttons by class name
    function addButtonClickListener(className, width, height) {
        const buttons = document.querySelectorAll(`.${className}`);
        buttons.forEach(button => {
            button.addEventListener("click", () => {
                const modalUrl = button.getAttribute("data-modal-url");
                openModalWithDimensions(modalUrl, width, height);
            });
        });
    }


    addButtonClickListener("addStatusButton", "450px", "200px");
    addButtonClickListener("addNoteButton", "400px", "225px");
    addButtonClickListener("addProjectNoteButton", "400px", "225px");
    addButtonClickListener("updateStatusButton", "fit-content", "160px");
    addButtonClickListener("showPointsButton", "600px", "450px");
    addButtonClickListener("addPointButton", "500px", "170px");
    addButtonClickListener("timelineButton", "600px", "450px");
    addButtonClickListener("addTimeButton", "300px", "270px");
    addButtonClickListener("deleteTaskButton", "fit-content", "130px");
    addButtonClickListener("addFileButton", "500px", "320px");
    addButtonClickListener("addCredentialsButton", "500px", "300px");
    addButtonClickListener("addDepartmentButton", "fit-content", "160px");
    addButtonClickListener("addProjectTypeButton", "fit-content", "260px");
    addButtonClickListener("addBusinessTypeButton", "fit-content", "160px");
    addButtonClickListener("addReferenceButton", "fit-content", "230px");
    addButtonClickListener("addTagButton", "fit-content", "160px");
    addButtonClickListener("addBusinessButton", "550px", "500px");
    addButtonClickListener("addStaffPositionButton", "fit-content", "260px");
    addButtonClickListener("addStatusButtonMobile", "500px", "80px");
    addButtonClickListener("userRecentActivitiesButton", "400px", "600px");
    addButtonClickListener("addUserStoryButton", "400px", "330px");
    addButtonClickListener("reactionDetailsButton", "400px", "300px");

    addButtonClickListener("addPaymentCommentButton", "500px", "250px");
    addButtonClickListener("addPaymentButton", "500px", "600px");
    addButtonClickListener("editPaymentButton", "500px", "400px");

    addButtonClickListener("addPaymentMethodButton", "500px", "400px");
    addButtonClickListener("updateOrderStatusButton", "400px", "240px");
    addButtonClickListener("editProjectStatusButton", "400px", "220px");
    addButtonClickListener("editCustomerStatusButton", "400px", "160px");
    addButtonClickListener("addProjectMemberModal", "400px", "280px");

    addButtonClickListener("updateTicketStatusButton", "400px", "220px");
    addButtonClickListener("closeTicketButton", "400px", "140px");
    
    

    // DELETE BUTTONS
    addButtonClickListener("deleteCustomerButton", "400px", "140px");
    addButtonClickListener("deleteBusinessButton", "400px", "140px");
    addButtonClickListener("deleteStaffButton", "400px", "140px");
    addButtonClickListener("deleteProjectButton", "400px", "140px");
    addButtonClickListener("deleteTaskButton", "400px", "140px");
    addButtonClickListener("deleteNoteButton", "400px", "140px");
    addButtonClickListener("deleteProjectNoteButton", "400px", "140px");
    addButtonClickListener("deletePointButton", "400px", "140px");
    addButtonClickListener("deleteTicketButton", "400px", "140px");
    addButtonClickListener("deletePaymentButton", "400px", "140px");
    addButtonClickListener("deletePaymentMethodButton", "400px", "140px");
    addButtonClickListener("delete", "400px", "140px");
    


    // KNOWLEDGE BASE
    addButtonClickListener("projectKnowledgeButton", "400px", "230px");

    addButtonClickListener("deleteButton", "400px", "140px");

    addButtonClickListener("xssmallPopupButton", "400px", "170px");
    addButtonClickListener("xsmallPopupButton", "400px", "220px");
    addButtonClickListener("smallPopupButton", "400px", "320px");
    addButtonClickListener("mediumPopupButton", "400px", "420px");
    addButtonClickListener("largePopupButton", "400px", "520px");



    const closeButton = document.getElementById("closeModalButton");
    closeButton.addEventListener("click", () => {
        closeModal();
    });

    const modalContainer = document.getElementById("popUpModal");
    window.addEventListener("click", function (event) {
        if (event.target === modalContainer) {
            closeModal();
        }
    });
}


initializeModalButtons();
export { initializeModalButtons };