// script for setting.html start here
async function onload(){
    const resp = await fetch("/setting");
    if (resp.status === 200) {
        /**
         * @type {Object}
         * @property {String[]} AudioFiles
         * @property {String} AudioFile1
         * @property {String} AudioFile2
         * @property {String} AudioFile3
         * @property {String} AudioFile4
         * @property {String} AudioFile5
         * @property {String} CameraIP
         * @property {String} CameraPort
         * @property {String} CameraUsername
         * @property {String} CameraPassword
         * @property {String} LoginUsername
         * @property {String} LoginPassword
         */
        const data = await resp.json();
        fill_select(1, data["AudioFiles"]);
        fill_select(2, data["AudioFiles"]);
        fill_select(3, data["AudioFiles"]);
        fill_select(4, data["AudioFiles"]);
        fill_select(5, data["AudioFiles"]);

        $("#preset1").val(data["AudioFile1"]);
        $("#preset2").val(data["AudioFile2"]);
        $("#preset3").val(data["AudioFile3"]);
        $("#preset4").val(data["AudioFile4"]);
        $("#preset5").val(data["AudioFile5"]);

        $("#setting_ip").val(data["CameraIP"]);
        $("#setting_port").val(data["CameraPort"]);
        $("#setting_username").val(data["CameraUsername"]);
        $("#setting_password").val(data["CameraPassword"]);

        $("#login_username").val(data["LoginUsername"]);
        $("#edit_password").val(data["LoginPassword"]);
        $("#confirm_password").val(data["LoginPassword"]);
    }
}

/**
 * Fill select with values
 * @param {number} index start from 1
 * @param {String[]} values array of values
 */
function fill_select(index, values){

    /**
     *
     * @type {HTMLSelectElement}
     */
    let preset = document.getElementById("preset"+index);
    preset.innerHTML = "";
    if (values!=null && values.length>0){
        for (let i = 0; i < values.length; i++) {
            const element = values[i];
            let option = document.createElement("option");
            option.value = element;
            option.innerText = element;
            preset.appendChild(option);
        }
    }
}

function cameraPassword() {
    const passwordField = document.getElementById('setting_password');
    const icon = document.getElementById('icon_camera');

    if (passwordField.type === 'password') {
        passwordField.type = 'text';
        icon.classList.remove('fa-eye');
        icon.classList.add('fa-eye-slash');
    } else {
        passwordField.type = 'password';
        icon.classList.remove('fa-eye-slash');
        icon.classList.add('fa-eye');
    }
}

function showPassword() {
    const passwordField = document.getElementById('edit_password');
    const icon = document.getElementById('icon_password');

    if (passwordField.type === 'password') {
        passwordField.type = 'text';
        icon.classList.remove('fa-eye');
        icon.classList.add('fa-eye-slash');
    } else {
        passwordField.type = 'password';
        icon.classList.remove('fa-eye-slash');
        icon.classList.add('fa-eye');
    }
}

function showConfirm() {
    const passwordField = document.getElementById('confirm_password');
    const icon = document.getElementById('icon_confirm');

    if (passwordField.type === 'password') {
        passwordField.type = 'text';
        icon.classList.remove('fa-eye');
        icon.classList.add('fa-eye-slash');
    } else {
        passwordField.type = 'password';
        icon.classList.remove('fa-eye-slash');
        icon.classList.add('fa-eye');
    }
}