const voirAjouterForm = (path, onLignFormAjoutSubmit, onLignFormLoaded = null) => {
    activeLoader();
    toggleLign('ajoutLign');
    const data = $('#ligneInitialisation').serializeArray();

    $.ajax({
        type: "POST",
        url: path,
        data,
        success: (response) => {
            $('div[data-onglet="formLign"]').replaceWith($(response).find('div[data-onglet="formLign"]'));
            initEventListeners();
            desactiveLoader();

            $('#lignFormAjout').on('submit', onLignFormAjoutSubmit);

            if (onLignFormLoaded) {
                onLignFormLoaded();
            }
        }
    });
}

const voirModifierForm = (path, onLignFormModifierSubmit) => {
    activeLoader();
    toggleLign('modifierLign');

    $.ajax({ type: "GET", url: path, success: (response) => {
        $('div[data-onglet="formLign"]').replaceWith($(response).find('div[data-onglet="formLign"]'));
        initEventListeners();
        desactiveLoader();

        $('#lignFormModifier').on('submit', onLignFormModifierSubmit);
    }});
}

const voirSupprimerPopup = (supprimerPath, title, textContent) => {
    activePopup(
        title,
        `<div class="modal-body bs-row flex-y-center">
            <div class="icone-modal interrogation"></div>
            <div class="bs-col p-base">${textContent}</div>
        </div>
        <div class="modal-footer">
            <button type="button" class="button secondaire" 
                data-dismiss="modal" 
                onclick="desactivePopup();"
            >${window.oxaproc.trad['Annuler']}</button>
            <button type="button" class="button principal" data-popupconfirm-btnconfirm>
                ${window.oxaproc.trad['Confirmer']}
            </button>
        </div>`,
        'modal_small'
    );

    document.querySelector('[data-popupconfirm-btnconfirm]').addEventListener('click', () => {
        activeLoader();
        $.ajax({ type: "GET", url: supprimerPath, success: (data) => {
            onLignFormSuccessSpecific(data);
            $.ajax({ type: "GET", url: window.location.href, success: (response) => {
                $('div[data-onglet="listeLigns"]').replaceWith($(response).find('div[data-onglet="listeLigns"]'));
                initEventListeners();
                desactivePopup();
                desactiveLoader();
            }});
        }});
    });
}

const toggleLign = (action) => {
    const ajoutLignNavItem = $('#ajoutLign');
    const listeLignNavItem = $('#listeLigns');
    const modifierLignNavItem = $('#modifierLign');
    const formLign = $('div[data-onglet="formLign"]');
    const listeLigns = $('div[data-onglet="listeLigns"]');

    if (action === 'ajoutLign') {
        formLign.addClass('d-block');
        formLign.removeClass('d-none');
        listeLigns.addClass('d-none');
        listeLigns.removeClass('d-block');
        ajoutLignNavItem.addClass('d-block active');
        ajoutLignNavItem.removeClass('d-none');
        listeLignNavItem.removeClass('active');
        modifierLignNavItem.addClass('d-none');
        modifierLignNavItem.removeClass('active d-block');
    }
    if (action === 'listeLigns') {
        listeLigns.addClass('d-block');
        listeLigns.removeClass('d-none');
        formLign.addClass('d-none');
        formLign.removeClass('d-block');
        ajoutLignNavItem.addClass('d-none');
        ajoutLignNavItem.removeClass('d-block active');
        listeLignNavItem.addClass('active');
        modifierLignNavItem.addClass('d-none');
        modifierLignNavItem.removeClass('active d-block');
    }
    if (action === 'modifierLign') {
        formLign.addClass('d-block');
        formLign.removeClass('d-none');
        listeLigns.addClass('d-none');
        listeLigns.removeClass('d-block');
        modifierLignNavItem.addClass('d-block active');
        modifierLignNavItem.removeClass('d-none');
        listeLignNavItem.removeClass('active');
    }
}

const initEventListeners = () => {
    $('.ajoutLign').on('click', (event) => {
        event.stopPropagation();
        toggleLign('ajoutLign');
    });

    $('.listeLigns').on('click', (event) => {
        event.stopPropagation();
        toggleLign('listeLigns');
    });

    $('.addItem').on('click', (event) => {
        event.stopPropagation();
        addItem();
    });

    $('.removeItem').on('click', (event) => {
        event.stopPropagation();
        removeItem(event);
    });
}


const onLignFormSuccess = (data) => {
    onLignFormSuccessSpecific(data);
    $.ajax({ type: "GET", url: window.location.pathname, success: (response) => {
        $('#crudLigns').replaceWith($(response).find('#crudLigns'));
        $('#validateLignForm').prop('disabled', false);
        initEventListeners();
        desactiveLoader();
    }});
}

const onLignFormSubmit = (event, formId) => {
    event.preventDefault();
    event.stopPropagation();
    event.stopImmediatePropagation();
    activeLoader();

    const form = $(formId);
    const button = $('#validateLignForm');
    const formData = form.serializeArray();

    button.prop('disabled', true);

    submitForm(form, formData, onLignFormSuccess, () => {
        button.prop('disabled', false);
    });
}

const onLignFormAjoutSubmit = (event) => {
    onLignFormSubmit(event, '#lignFormAjout');
}

const onLignFormModifierSubmit = (event)=> {
    onLignFormSubmit(event, '#lignFormModifier');
}

function onLignFormSuccessSpecific (data) {
    // méthode à surcharger si besoin 
}

function onLignFormLoaded () {
    // méthode à surcharger si besoin
}