/**
 * @typedef {Object} Log
 * @property {number} index
 * @property {string} datenya
 * @property {string} timenya
 * @property {string} machine
 * @property {string} description
 */

/** List of Log data loaded from server
 * @type {Log[]}
 */
window.logdata = [];

dtLog = null;

/**
 * Fill log table body with values
 * @param {Log[]} vv values to fill
 */
function fill_logtablebody(vv) {
    dtLog.clear();
    if (!Array.isArray(vv) || vv.length === 0) {
        //$('#btnExport').prop('disabled', true);
        return;
    }
    dtLog.rows.add(vv);
    dtLog.draw();


    $('#tablesize').text("Table Size: " + vv.length);
    //$('#btnExport').prop('disabled', false);
}

/**
 * Reload logs from server with date and filter
 * @param {String} APIURL API URL endpoint , default "Log/"
 * @param {String} date date in format dd-mm-yyyy
 * @param {String} filter log filter text
 */
function reloadLogs(APIURL = "Log/", date, filter) {
    const params = new URLSearchParams({
        date: date,
        filter: filter
    })
    console.log("Loading logs with params: " + params.toString());
    window.logdata = [];
    fetchAPI(APIURL + "List?" + params.toString(), "GET", {}, null, (okdata) => {
        console.log("Logs loaded: " + okdata.length);
        if (Array.isArray(okdata)) {
            window.logdata.push(...okdata);
            fill_logtablebody(window.logdata);
        }
    }, (errdata) => {
        alert("Error loading logs : " + errdata.message);
    });
}

datepicker = null;
$btnGet = null;

$(document).ready(function () {
    console.log("log.js ready");
    let selectedlogdate = "";
    let logfilter = "";
    let APIURL = "Log/";
    $btnGet = $('#btnGet');

    datepicker = new Litepicker({
        element: document.getElementById('logdate'),
        format: 'DD/MM/YYYY',
        lang: 'en-US',
        autoApply: true,
        singleMode: true,
        startDate: new Date(),
        onSelect: (date) => {
            selectedlogdate = date.format('DD/MM/YYYY');
            console.log("Selected date: " + selectedlogdate);
        }
    })
    

    if (dtLog === null) {
        dtLog = new DataTable('#logtable', {
            dom: 'Bfrtip',
            data: [],
            pageLength: 25,
            columns: [
                { title: "No", data: "index" },
                { title: "Date", data: "datenya" },
                { title: "Time", data: "timenya" },
                { title: "Machine", data: "machine" },
                { title: "Description", data: "description" }
            ],
            buttons: ['print', 'pdf', 'excel']
        });
    }

    // findalldate is checkbox, if checked will disable datepicker
    $('#findalldate').off('change').on('change', function () {
        if ($(this).is(':checked')) {
            datepicker.disabled = true;
            selectedlogdate = "alldate";
            console.log("Find all date checked, omitting date filter");
        } else {
            datepicker.disabled = false;
            const date = datepicker.getDate();
            selectedlogdate = date.format('DD/MM/YYYY');
            console.log("Find all date unchecked, selected date: " + selectedlogdate);
        }
    });

    $('#searchfilter').off('input').on('input', function () {
        logfilter = $(this).val();
        //reloadLogs(APIURL, selectedlogdate, logfilter);
    });
    $btnGet.click(function () {
        let checked = $('#findalldate').is(':checked');
        if (checked && logfilter.trim() === "") {
            alert("Please enter a filter when 'Find All Date' is checked to avoid large data load.");
            return;
        }
        //$(this).data('selectedlogdate', selectedlogdate);
        //$(this).data('logfilter', logfilter);
        reloadLogs(APIURL, selectedlogdate, logfilter);
    });

    selectedlogdate = datepicker.getDate().format('DD/MM/YYYY');
    console.log("Initial selected date: " + selectedlogdate);
    $btnGet.trigger('click');   // load logs on page load

});