document.addEventListener(
    'DOMContentLoaded',
    () => {
        const config = PayPalCommerceGatewayOrderTrackingInfo;
        if (!typeof (PayPalCommerceGatewayOrderTrackingInfo)) {
            console.error('tracking cannot be set.');
            return;
        }

        const includeAllItemsCheckbox = document.getElementById('include-all-items');
        const shipmentsWrapper = '#ppcp_order-tracking .ppcp-tracking-column.shipments';
        const transactionId = document.querySelector('.ppcp-tracking-transaction_id');
        const orderId = document.querySelector('.ppcp-tracking-order_id');
        const carrier = document.querySelector('.ppcp-tracking-carrier');
        const carrierNameOther = document.querySelector('.ppcp-tracking-carrier_name_other');

        function toggleLineItemsSelectbox() {
            const selectContainer = document.getElementById('items-select-container');
            includeAllItemsCheckbox?.addEventListener('change', function(){
                selectContainer.style.display = includeAllItemsCheckbox.checked ? 'none' : 'block';
            })
        }

        function toggleShipment() {
            jQuery(document).on('click', '.ppcp-shipment-header', function(event) {
                const shipmentContainer = event.target.closest('.ppcp-shipment');
                const shipmentInfo = shipmentContainer.querySelector('.ppcp-shipment-info');

                shipmentContainer.classList.toggle('active');
                shipmentContainer.classList.toggle('closed');
                shipmentInfo.classList.toggle('hidden');
            });
        }

        function toggleShipmentUpdateButtonDisabled() {
            jQuery(document).on('change', '.ppcp-shipment-status', function(event) {
                const shipmentSelectbox = event.target;
                const shipment = shipmentSelectbox.closest('.ppcp-shipment');
                const updateShipmentButton = shipment.querySelector('.update_shipment');
                const selectedValue = shipmentSelectbox.value;

                updateShipmentButton.classList.remove('button-disabled');
            });
        }

        function toggleLoaderVisibility() {
            const loader = document.querySelector('.ppcp-tracking-loader');
            if (loader) {
                if (loader.style.display === 'none' || loader.style.display === '') {
                    loader.style.display = 'block';
                } else {
                    loader.style.display = 'none';
                }
            }
        }

        function toggleOtherCarrierName() {
            jQuery(carrier).on('change', function() {
                const hiddenHtml = carrierNameOther.parentNode;
                if (carrier.value === 'OTHER') {
                    hiddenHtml.classList.remove('hidden');
                } else {
                    if (!hiddenHtml.classList.contains('hidden')) {
                        hiddenHtml.classList.add('hidden');
                    }
                }
            })
        }

        function handleAddShipment() {
            jQuery(document).on('click', '.submit_tracking_info', function () {
                const trackingNumber = document.querySelector('.ppcp-tracking-tracking_number');
                const status = document.querySelector('.ppcp-tracking-status');
                const submitButton = document.querySelector('.submit_tracking_info');
                const items = document.querySelector('.ppcp-tracking-items');

                let checkedItems = includeAllItemsCheckbox?.checked || !items ? 0 : Array.from(items.selectedOptions).map(option => option.value)

                toggleLoaderVisibility()
                fetch(config.ajax.tracking_info.endpoint, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    credentials: 'same-origin',
                    body: JSON.stringify({
                        nonce: config.ajax.tracking_info.nonce,
                        transaction_id: transactionId ? transactionId.value : null,
                        tracking_number: trackingNumber ? trackingNumber.value : null,
                        status: status ? status.value : null,
                        carrier: carrier ? carrier.value : null,
                        carrier_name_other: carrierNameOther ? carrierNameOther.value : null,
                        order_id: orderId ? orderId.value : null,
                        items: checkedItems
                    })
                }).then(function (res) {
                    return res.json();
                }).then(function (data) {
                    toggleLoaderVisibility()

                    if (!data.success || ! data.data.shipment) {
                        jQuery( "<span class='error tracking-info-message'>" + data.data.message + "</span>" ).insertAfter(submitButton);
                        setTimeout(()=> jQuery('.tracking-info-message').remove(),3000);
                        submitButton.removeAttribute('disabled');
                        console.error(data);
                        throw Error(data.data.message);
                    }

                    jQuery( "<span class='success tracking-info-message'>" + data.data.message + "</span>" ).insertAfter(submitButton);
                    setTimeout(()=> jQuery('.tracking-info-message').remove(),3000);
                    jQuery(data.data.shipment).appendTo(shipmentsWrapper);
                });
            })
        }

        function handleUpdateShipment() {
            jQuery(document).on('click', '.update_shipment', function (event) {
                const updateShipment = event.target;
                const parentElement = updateShipment.parentNode.parentNode;
                const shipmentStatus = parentElement.querySelector('.ppcp-shipment-status');
                const shipmentTrackingNumber = parentElement.querySelector('.ppcp-shipment-tacking_number');
                const shipmentCarrier = parentElement.querySelector('.ppcp-shipment-carrier');
                const shipmentCarrierNameOther = parentElement.querySelector('.ppcp-shipment-carrier-other');

                toggleLoaderVisibility()
                fetch(config.ajax.tracking_info.endpoint, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    credentials: 'same-origin',
                    body: JSON.stringify({
                        nonce: config.ajax.tracking_info.nonce,
                        transaction_id: transactionId ? transactionId.value : null,
                        tracking_number: shipmentTrackingNumber ? shipmentTrackingNumber.value : null,
                        status: shipmentStatus ? shipmentStatus.value : null,
                        carrier: shipmentCarrier ? shipmentCarrier.value : null,
                        carrier_name_other: shipmentCarrierNameOther ? shipmentCarrierNameOther.value : null,
                        order_id: orderId ? orderId.value : null,
                        action: 'update'
                    })
                }).then(function (res) {
                    return res.json();
                }).then(function (data) {
                    toggleLoaderVisibility()

                    if (!data.success) {
                        jQuery( "<span class='error tracking-info-message'>" + data.data.message + "</span>" ).insertAfter(updateShipment);
                        setTimeout(()=> jQuery('.tracking-info-message').remove(),3000);
                        console.error(data);
                        throw Error(data.data.message);
                    }

                    jQuery( "<span class='success tracking-info-message'>" + data.data.message + "</span>" ).insertAfter(updateShipment);
                    setTimeout(()=> jQuery('.tracking-info-message').remove(),3000);
                });
            })
        }

        handleAddShipment();
        handleUpdateShipment();
        toggleLineItemsSelectbox();
        toggleShipment();
        toggleShipmentUpdateButtonDisabled();
        toggleOtherCarrierName();
    },
);