const studentModal = (idModal, callback) => {
    const modalEl = document.getElementById(idModal);
    // eslint-disable-next-line no-undef
    const myModal = bootstrap.Modal.getOrCreateInstance(modalEl);
    const studentForm = document.querySelector(`#${idModal} form`);

    const setModalData = (element) => {
        const inputs = studentForm.querySelectorAll("input[required]");
        inputs.forEach((input) => {
            const control = input;
            control.value = element ? element[input.getAttribute("id")] : "";
        });
        const idInput = studentForm.querySelector("#id");
        idInput.value = element ? element.id : "";
        const groupSelector = studentForm.querySelector("select");
        groupSelector.value = element ? element.group.id : "";
        myModal.show();
    };

    modalEl.addEventListener("shown.bs.modal", (event) => {
        if (!event.relatedTarget) {
            return;
        }
        setModalData();
    });

    studentForm.addEventListener("submit", async (event) => {
        event.preventDefault();
        const data = {};
        const inputs = studentForm.querySelectorAll("input[required]");
        inputs.forEach((input) => {
            data[input.getAttribute("id")] = input.value;
        });
        const idInput = studentForm.querySelector("#id");
        const studentId = idInput.value;
        const groupSelector = studentForm.querySelector("select");
        data.groupId = groupSelector.value;
        console.log(data);
        myModal.hide();
        if (callback) {
            callback(studentId, data);
        }
    });

    return { setData: (element) => setModalData(element) };
};

export default studentModal;