"use strict";

// Class definition
var KTStoreView = function () {
    // Shared variables
    var storeId 
    var ipAddress
    var inputIpAddress = document.getElementById("hb_storeIpAddress");
    var butIpAddress = document.getElementById("but_storeIpAddress"); // 
    // dt Item
    var datatableItem;
    var tableItem = document.getElementById('kt_dt_item');
    var statusItem = document.getElementById('kt_dt_item_status');
    // dt Item option
    var datatableItemOptions
    var tableItemOptions = document.getElementById('kt_dt_item_options');
    var statusItemOptions = document.getElementById('kt_dt_item_options_status');
    // dt Item price
    var datatableItemPrice;
    var tableItemPrice = document.getElementById('kt_dt_item_price');
    var statusItemPrice = document.getElementById('kt_dt_item_price_status');
    // dt Item stock
    var datatableItemStock;
    var tableItemStock = document.getElementById('kt_dt_item_stock');
    var statusItemStock = document.getElementById('kt_dt_item_stock_status');
    // dt Store version 
    var datatableStoreVersion;
    var tableStoreVersion = document.getElementById('kt_dt_store_version');
    var statusStoreVersion = document.getElementById('kt_dt_store_version_status');
    // dt Store sequence
    var datatableStoreSequence;
    var tableStoreSequence = document.getElementById('kt_dt_store_sequence');
    var statusStoreSequence = document.getElementById('kt_dt_store_sequence_status');
    // dt Store signature
    var datatableStoreSignature;
    var tableStoreSignature = document.getElementById('kt_dt_store_signature');
    var statusStoreSignature = document.getElementById('kt_dt_store_signature_status');

    // Init store view page
    var initStoreView = () => {

        var tabs = Array.prototype.slice.call(document.querySelectorAll('a[data-bs-toggle="tab"]'));

        tabs.map(function(tab){
            tab.addEventListener('click', function(e){
                var target = this.getAttribute("href"); // activated tab

                if (target == '#kt_store_item') {
                    // null
                } else if (target == '#kt_store_general') {
                    loadStoreVersion();
                } else if (target == '#kt_store_admin') {
                    loadStoreSequence();
                    loadStoreSignature();
                }
            });
        });

        // call StoreDetails API
        fetch('http://localhost:8080/hdpos/api/stores/getStoreDetails?dbHost='+ipAddress+'&storeId='+storeId)
            .then(response => response.json())
            .then(data => {
                debugger;
                document.getElementById('hb_storePhoto').style.backgroundImage = "url('" + data.store.photoLink + "')";
                document.getElementById("hb_storeTitle").innerText = data.store.id_structure + " - " + data.store.nom;
                document.getElementById("hb_storeIpAddress").value = ipAddress;
                document.getElementById("hb_storePhoneNumber").innerText = data.store.telephone;
                document.getElementById("hb_storeEnseigne").innerText = data.store.enseigne;

                 // Display backOffice transaction informations
                 var statusTransaction = document.getElementById("hb_backOfficeTransactionOk");

                 if (data.transaction.backOfficeTransactionOk==true) {
                     statusTransaction.classList.add("bg-success");
                     document.getElementById("hb_backOfficeBusinessDate").classList.add("text-gray-800");
                 } else {
                     statusTransaction.classList.add("bg-danger");
                     document.getElementById("hb_backOfficeBusinessDate").classList.add("text-danger");
                 }    
         
                 document.getElementById("hb_backOfficeTransactions").innerText = data.transaction.backOfficeTransactions;
                 document.getElementById("hb_minBackOfficeTransactionDate").innerText = data.transaction.minBackOfficeTransactionDate;
                 document.getElementById("hb_maxBackOfficeTransactionDate").innerText = data.transaction.maxBackOfficeTransactionDate;
                 document.getElementById("hb_backOfficeBusinessDate").innerText = data.transaction.backOfficeBusinessDate;

                // Display replication informations
                var statusReplication = document.getElementById("hb_pendingReplicationOk");
                if (data.replication.pendingReplicationOk) {
                    statusReplication.classList.add("bg-success");
                } else {
                    statusReplication.classList.add("bg-danger");
                }    

                document.getElementById("hb_pendingReplications").innerText = data.replication.pendingReplications;
                document.getElementById("hb_minPendingReplicationDate").innerText = data.replication.minPendingReplicationDate;
                document.getElementById("hb_maxPendingReplicationDate").innerText = data.replication.maxPendingReplicationDate;
            })
            .catch(error => {
                console.error('Error retrieving store details:', error);
            });
    }

    const loadItem = (itemId) => {
        if (!$.fn.dataTable.isDataTable('#kt_dt_item') ) {
            statusItem.innerHTML = 'Loading...';    

            // call StoreDetails API
            datatableItem = $(tableItem).DataTable({
                info: false,
                bStateSave: false, // cookie
                order: [],
                pageLength: 10,
                lengthChange: true,
                processing: true,
                paging: false,
                autoWidth: false,
                fixedColumns:   {
                    left: 1
                },
                ajax: {
                    "url": "http://localhost:8080/hdpos/api/items/" + itemId,
                    "dataSrc": "",
                    "data": {
                        "dbHost": ipAddress
                    },
                    "error": function (jqXHR, textStatus, errorThrown) {
                        dtUpdateStatus(statusItem, "Ajax Error", jqXHR.responseJSON.error, true)
                    }
                  },
                columns: [
                    { data: 'itemId', name: "ITEM_ID" },
                    { data: 'itemLevelCode', name: "LEVEL" },
                    { data: 'parentItemId', name: "PARENT" },
                    { data: 'itemTypeCode', name: "TYPE" }, 
                    { data: 'createDate', name: "DATE CREATE" },
                    { data: 'createUserId', name: "USER CREATE"},
                    { data: 'updateDate', name: "DATE UPDATE" },
                    { data: 'updateUserId', name: "USER UPDATE"},
                ] ,
                initComplete: function () {
                    dtUpdateStatus(statusItem, "Last refresh", "", false)
                }
            });
        } else  {
            statusItem.innerHTML = 'Loading...';
            datatableItem.ajax.url("http://localhost:8080/hdpos/api/items/" + itemId);    
            datatableItem.ajax.reload(function() {
                dtUpdateStatus(statusItem, "Last refresh", "", false)
            }, true);
       }
    }

    const loadItemOptions = (itemId) => {
        if (!$.fn.dataTable.isDataTable('#kt_dt_item_options') ) {
            statusItemOptions.innerHTML = 'Loading...';    

            // call StoreDetails API
            datatableItemOptions = $(tableItemOptions).DataTable({
                info: false,
                bStateSave: false, // cookie
                order: [],
                pageLength: 10,
                lengthChange: true,
                processing: true,
                paging: true,
                autoWidth: false,
                fixedColumns:   {
                    left: 1
                },
                ajax: {
                    "url": "http://localhost:8080/hdpos/api/items/" + itemId + "/options",   
                    "dataSrc": "",
                    "data": {
                        "dbHost": ipAddress
                    },
                    "error": function (jqXHR, textStatus, errorThrown) {
                        dtUpdateStatus(statusItemOptions, "Ajax Error", jqXHR.responseJSON.error, true)
                    }
                  },
                columns: [
                    { data: 'itemId', name: "ITEM_ID" },
                    { data: null,    
                        render: function(data, type, full, meta) {
                            return full.levelCode  + ':' + full.levelValue;
                        }
                    },
                    { data: 'itemAvailabilityCode', name: "VENDABLE" },
                    { data: 'taxGroupId', name: "Tkt_dt_item_priceAXE" },
                    { data: 'vendor', name: "VENDOR" },
                    { data: 'seasonCode', name: "SEASON" },
                    { data: 'createDate', name: "DATE CREATE" },
                    { data: 'createUserId', name: "USER CREATE"},
                    { data: 'updateDate', name: "DATE UPDATE" },
                    { data: 'updateUserId', name: "USER UPDATE"},
                ] ,
                initComplete: function () {
                    dtUpdateStatus(statusItemOptions, "Last refresh", "", false)
                }
            });
        } else  {
            statusItemOptions.innerHTML = 'Loading...';
            datatableItemOptions.ajax.url("http://localhost:8080/hdpos/api/items/" + itemId + "/options");   
            datatableItemOptions.ajax.reload(function() {
                dtUpdateStatus(statusItemOptions, "Last refresh", "", false)
            }, true);
       }
    }

    const loadItemPrice = (itemId) => {
        if (!$.fn.dataTable.isDataTable('#kt_dt_item_price') ) {
            statusItemPrice.innerHTML = 'Loading...';    

            // call StoreDetails API
            datatableItemPrice = $(tableItemPrice).DataTable({
                info: false,
                bStateSave: false, // cookie
                order: [],
                pageLength: 10,
                lengthChange: true,
                processing: true,
                paging: true,
                autoWidth: false,
                fixedColumns:   {
                    left: 1
                },
                ajax: {
                    "url": "http://localhost:8080/hdpos/api/items/" + itemId + "/price",   
                    "dataSrc": "",
                    "data": {
                        "dbHost": ipAddress
                    },
                    "error": function (jqXHR, textStatus, errorThrown) {
                        dtUpdateStatus(statusItemPrice, "Ajax Error", jqXHR.responseJSON.error, true)
                    }
                  },
                columns: [
                    { data: 'itemId', name: "ITEM_ID" },
                    { data: null,    
                        render: function(data, type, full, meta) {
                            return full.levelCode  + ':' + full.levelValue;
                        }
                    },
                    { data: 'itmPricePropertyCode', name: "TYPE" },
                    { data: 'effectiveDate', name: "EFFECTIVE DATE" },
                    { data: 'expirationDate', name: "EXPIRATION DATE" },
                    { data: 'price', name: "PRICE" },
                    { data: 'externalId', name: "EXTERNAL_ID" },
                    { data: 'createDate', name: "DATE CREATE" },
                    { data: 'createUserId', name: "USER CREATE"},
                    { data: 'updateDate', name: "DATE UPDATE" },
                    { data: 'updateUserId', name: "USER UPDATE"},
                ],
                initComplete: function () {
                    dtUpdateStatus(statusItemPrice, "Last refresh", "", false)
                }
            });
        } else  {
            statusItemPrice.innerHTML = 'Loading...';
            datatableItemPrice.ajax.url("http://localhost:8080/hdpos/api/items/" + itemId + "/price");   
            datatableItemPrice.ajax.reload(function() {
                dtUpdateStatus(statusItemPrice, "Last refresh", "", false)
            }, true);
       }
    }

    const loadItemStock = (itemId) => {
        if (!$.fn.dataTable.isDataTable('#kt_dt_item_stock') ) {
            statusItemStock.innerHTML = 'Loading...';    

            // call StoreDetails API
            datatableItemStock = $(tableItemStock).DataTable({
                info: false,
                bStateSave: false, // cookie
                order: [],
                pageLength: 10,
                lengthChange: true,
                processing: true,
                paging: true,
                autoWidth: false,
                fixedColumns:   {
                    left: 1
                },
                ajax: {
                    "url": "http://localhost:8080/hdpos/api/items/" + itemId + "/stock",   
                    "dataSrc": "",
                    "data": {
                        "dbHost": ipAddress
                    },
                    "error": function (jqXHR, textStatus, errorThrown) {
                        dtUpdateStatus(statusItemStock, "Ajax Error", jqXHR.responseJSON.error, true)
                    }
                  },
                columns: [
                    { data: 'itemId', name: "ITEM_ID" },
                    { data: 'invLocationId', name: "LOCATION" },
                    { data: 'bucketId', name: "BUCKET" },
                    { data: 'unitCount', name: "STOCK" },
                    { data: 'inventoryValue', name: "INV VALUE" },
                    { data: 'createDate', name: "DATE CREATE" },
                    { data: 'createUserId', name: "USER CREATE"},
                    { data: 'updateDate', name: "DATE UPDATE" },
                    { data: 'updateUserId', name: "USER UPDATE"},
                ],
                initComplete: function () {
                    dtUpdateStatus(statusItemStock, "Last refresh", "", false)
                }
            });
        } else  {
            statusItemStock.innerHTML = 'Loading...';
            datatableItemStock.ajax.url("http://localhost:8080/hdpos/api/items/" + itemId + "/stock");   
            datatableItemStock.ajax.reload(function() {
                dtUpdateStatus(statusItemStock, "Last refresh", "", false)
            }, true);
       }
    }

    const loadStoreVersion = () => {
        if (!$.fn.dataTable.isDataTable('#kt_dt_store_version') ) {
            statusStoreVersion.innerHTML = 'Loading...';

            // call StoreDetails API
            datatableStoreVersion = $(tableStoreVersion).DataTable({
                info: false,
                bStateSave: false, // cookie
                order: [],
                pageLength: 10,
                lengthChange: true,
                processing: true,
                paging: false,
                autoWidth: false,
                ajax: {
                    "url": "http://localhost:8080/hdpos/api/stores/version",
                    "dataSrc": "",
                    "data": {
                        "dbHost": ipAddress
                    },
                    "error": function (jqXHR, textStatus, errorThrown) {
                        dtUpdateStatus(statusStoreVersion, "Ajax Error", jqXHR.responseJSON.error, true)
                    }
                  },
                columns: [
                    { data: 'seq', name: "SEQ" },
                    { data: 'baseSchemaDate', name: "BASE_SCHEMA_DATE" },
                    { data: 'baseSchemaVersion', name: "BASE_SCHEMA_VERSION" },
                    { data: 'customerSchemaDate', name: "CUSTOMER_SCHEMA_DATE" },
                    { data: 'customerSchemaVersion', name: "CUSTOMER_SCHEMA_VERSION" },
                    { data: 'customer', name: "CUSTOMER" }, 
                    { data: 'createDate', name: "DATE CREATE" },
                    { data: 'createUserId', name: "USER CREATE"},
                    { data: 'updateDate', name: "DATE UPDATE" },
                    { data: 'updateUserId', name: "USER UPDATE"},
                ] ,
                initComplete: function () {
                    dtUpdateStatus(statusStoreVersion, "Last refresh", "", false)
                }
            });
        }    
    }

    const loadStoreSequence = () => {
        if (!$.fn.dataTable.isDataTable('#kt_dt_store_sequence') ) {
            statusStoreSequence.innerHTML = 'Loading...';

            // call StoreDetails API
            datatableStoreSequence = $(tableStoreSequence).DataTable({
                info: true,
                bStateSave: false, // cookie
                order: [],
                pageLength: 10,
                lengthChange: true,
                processing: true,
                paging: true,
                autoWidth: false,
                ajax: {
                    "url": "http://localhost:8080/hdpos/api/stores/sequence",
                    "dataSrc": "",
                    "data": {
                        "dbHost": ipAddress
                    },
                    "error": function (jqXHR, textStatus, errorThrown) {
                        dtUpdateStatus(statusStoreSequence, "Ajax Error", jqXHR.responseJSON.error, true)
                    }
                  },
                columns: [
                    { data: 'wkstnId', name: "WSID" },
                    { data: 'sequenceId', name: "NAME" },
                    { data: 'sequenceMode', name: "MODE" },
                    { data: 'sequenceNbr', name: "VALUE" },
                    { data: 'createDate', name: "DATE CREATE" },
                    { data: 'createUserId', name: "USER CREATE"},
                    { data: 'updateDate', name: "DATE UPDATE" },
                    { data: 'updateUserId', name: "USER UPDATE"},
                ],  
                initComplete: function () {
                    this.api()
                        .columns()
                        .every(function () {
                            let column = this;
                            let title = column.footer().textContent;
            
                            // Create input element
                            let input = document.createElement('input');
                            input.placeholder = title;

                            // Get the width of the header cell and apply it to the input element
                            let headerWidth = column.header().offsetWidth;
                            input.style.width = headerWidth + 'px';

                            column.footer().replaceChildren(input);
            
                            // Event listener for user input
                            input.addEventListener('keyup', () => {
                                if (column.search() !== this.value) {
                                    column.search(input.value).draw();
                                }
                            });
                        });

                    dtUpdateStatus(statusStoreSequence, "Last refresh", "", false)
                }
            });

            document.getElementById("kt_dt_store_sequence_reload").addEventListener('click', function() { 
                statusStoreSequence.innerHTML = 'Loading...';

                datatableStoreSequence.ajax.reload(function() {
                    dtUpdateStatus(statusStoreSequence, "Last refresh", "", false)
                }, true);
            });
        }    
    }

    const loadStoreSignature = () => {
        if (!$.fn.dataTable.isDataTable('#kt_dt_store_signature') ) {
            statusStoreSignature.innerHTML = 'Loading...';

            // call StoreDetails API
            datatableStoreSignature = $(tableStoreSignature).DataTable({
                info: true,
                bStateSave: false, // cookie
                order: [],
                pageLength: 10,
                lengthChange: true,
                processing: true,
                paging: true,
                autoWidth: false,
                fixedColumns:   {
                    left: 2
                },
                ajax: {
                    "url": "http://localhost:8080/hdpos/api/stores/signature",
                    "dataSrc": "",
                    "data": {
                        "dbHost": ipAddress
                    },
                    "error": function (jqXHR, textStatus, errorThrown) {
                        dtUpdateStatus(statusStoreSignature, "Ajax Error", jqXHR.responseJSON.error, true)
                    }
                  },
                columns: [
                    { data: 'wkstnId', name: "WSID" },
                    { data: 'signatureId', name: "SIGNATURE_ID" },
                    { data: 'signatureMode', name: "MODE" },
                    { data: 'signatureString', name: "SIGNATURE_STRING" },
                    { data: 'signatureSource', name: "SIGNATURE_SOURCE" },
                    { data: 'createDate', name: "DATE CREATE" },
                    { data: 'createUserId', name: "USER CREATE"},
                    { data: 'updateDate', name: "DATE UPDATE" },
                    { data: 'updateUserId', name: "USER UPDATE"},
                ],  
                initComplete: function () {
                    this.api()
                        .columns()
                        .every(function () {
                            let column = this;
                            let title = column.footer().textContent;
            
                            // Create input element
                            let input = document.createElement('input');
                            input.placeholder = title;

                            // Get the width of the header cell and apply it to the input element
                            let headerWidth = column.header().offsetWidth;
                            input.style.width = headerWidth + 'px';

                            column.footer().replaceChildren(input);
            
                            // Event listener for user input
                            input.addEventListener('keyup', () => {
                                if (column.search() !== this.value) {
                                    column.search(input.value).draw();
                                }
                            });
                        });

                    dtUpdateStatus(statusStoreSignature, "Last refresh", "", false)
                }
            });
        }    
    }

    const handleIpChange = () => {
        // Add an event listener for value change
        butIpAddress.addEventListener('click', function() {
            // Create a URL object with the current URL
            var url = new URL(window.location.href);

            // Get URL search parameters
            var params = url.searchParams;

            // Modify IP address
            params.set('ip', inputIpAddress.value);

            // Update URL with new search parameters
            url.search = params.toString();

            // Change the current URL and reload the page
            window.location.href = url.toString();
        }); 
    }

    // Submit form handler
    const handleItemSubmit = () => {
        // Define variables
        let validator;

        // Get elements
        const form = document.getElementById('kt_store_item_form');
        const submitButton = document.getElementById('kt_store_item_submit');

        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
        validator = FormValidation.formValidation(
            form,
            {
                fields: {
                    'itemId': {
                        validators: {
                            notEmpty: {
                                message: 'Item ID is required'
                            },
                            stringLength: {
                                min: 7,
                                message: 'Item ID must be 7 characters or more'
                            }
                        }
                    }
                },
                plugins: {
                    trigger: new FormValidation.plugins.Trigger(),
                    bootstrap: new FormValidation.plugins.Bootstrap5({
                        rowSelector: '.fv-row',
                        eleInvalidClass: '',
                        eleValidClass: ''
                    })
                }
            }
        );

        // Handle submit item search button
        submitButton.addEventListener('click', e => {
            e.preventDefault();

            // Validate form before submit
            if (validator) {
                validator.validate().then(function (status) {
                    if (status == 'Valid') {
                        var itemId = document.querySelector('input[name="itemId"]').value;

                        loadItem(itemId);
                        loadItemOptions(itemId);
                        loadItemPrice(itemId);
                        loadItemStock(itemId);
                    } 
                });
            }
        })
    }

    function dtUpdateStatus(statusElement, statusMessage, toastMessage, isError) {
        const currentDate = new Date(); 
        const formattedDate = `${currentDate.getDate()}/${currentDate.getMonth() + 1}/${currentDate.getFullYear()} @ ${currentDate.getHours().toString().padStart(2, '0')}:${currentDate.getMinutes().toString().padStart(2, '0')}:${currentDate.getSeconds().toString().padStart(2, '0')}`;
    
        // Check if the message is an error or information
        if (isError) {
            toastr.error(toastMessage, "Error");
        } else {
            toastr.info("Refreshed data", "Info");
        }    

        statusElement.innerHTML = `${statusMessage}: ${formattedDate}`;
    }
    
    return {
        // Public functions
        init: function () {
            // Parse the URL parameter
            storeId = KTUtil.getURLParam("storeId");
            ipAddress = KTUtil.getURLParam("ip");

            toastr.options = {
                "closeButton": false,
                "debug": false,
                "newestOnTop": false,
                "progressBar": false,
                "positionClass": "toastr-top-right",
                "preventDuplicates": true,
                "onclick": null,
                "showDuration": "300",
                "hideDuration": "1000",
                "timeOut": "5000",
                "extendedTimeOut": "1000",
                "showEasing": "swing",
                "hideEasing": "linear",
                "showMethod": "fadeIn",
                "hideMethod": "fadeOut"
            };

            // Handle forms
            initStoreView();
            handleIpChange();
            handleItemSubmit();
        }
    };
}();

// On document ready
KTUtil.onDOMContentLoaded(function () {
    KTStoreView.init();
});