let usrs_env = {};
let usrs_elem = {};

const load_elem = () => {
    usrs_elem = Object.freeze({
        table: document.getElementById('table-usrs'),
        modal: document.getElementById('edit-user-modal'),
        dropdown_action: document.getElementById('dropdown-action'),
        search_inpt: document.getElementById('table-search-usrs'),
        search_clean: document.getElementById('clean-search'),
        checkbox_all: document.getElementById('checkbox-all'),
        count_select: document.getElementById('count-select'),
        alert_danger: document.getElementById('alert-danger'),
        danger_message: document.getElementById('danger-message'),
        alert_info: document.getElementById('alert-info'),
        info_message: document.getElementById('info-message'),
        checkbox_all: document.getElementById('checkbox-all'),
        alert_timeout: 4000,
        form: {
            name: document.getElementById('usr-name'),
            fullname: document.getElementById('usr-fullname'),
            email: document.getElementById('usr-email'),
            description: document.getElementById('usr-description'),
            roles: document.getElementById('usr-roles'),
            openids: document.getElementById('usr-openids'),
            items: document.getElementById('usr-items'),
            status: document.getElementById('usr-status'),
            current_status: document.getElementById('current-usr-status'),
            isadmin: document.getElementById('usr-isadmin'),
            otp_enabled: document.getElementById('usr-otp-enabled'),
            otp_verified: document.getElementById('usr-otp-verified'),
            otp_defs: document.getElementById('usr-otp-defs'),
        },
    })
};
const set_user_status = (value,color) => {
    if (usrs_elem.form.current_status && usrs_elem.form.status) {
        usrs_elem.form.status.value=value;
        usrs_elem.form.current_status.innerHTML= 
        `<div class="inline-flex items-center"><div class="h-2.5 w-2.5 rounded-full bg-${color}-500 mr-2"></div><div>${value}</div></div>`;
    }
};
const edit_row = (pos) => {
    const id = usrs_env.data && usrs_env.data[pos] ? usrs_env.data[pos] : -1
    console.log(id);
    if (id > -1) {
        edit_usr(`${id}`);
    }
};
const close_usr = () => {
    if (usrs_env.modal.hide) {
        usrs_env.modal.hide();
    }
};
const fill_form = () => {
    usrs_elem.form.name.value = usrs_env.user.name;
    usrs_elem.form.fullname.value = usrs_env.user.fullname;
    usrs_elem.form.email.value = usrs_env.user.email;
    usrs_elem.form.description.value = usrs_env.user.description;
    usrs_elem.form.roles.value = usrs_env.user.roles;
    usrs_elem.form.openids.value = usrs_env.user.openids;
    usrs_elem.form.items.value = usrs_env.user.items;
    usrs_elem.form.status.value = usrs_env.user.status;
    usrs_env.user.isadmin == 1 ?
        usrs_elem.form.isadmin.checked=true :
        usrs_elem.form.isadmin.checked=false;
    usrs_env.user.otp_enabled == 1 ? 
        usrs_elem.form.otp_enabled.checked = true :
        usrs_elem.form.otp_enabled.checked = false;
    usrs_env.user.otp_verified == 1 ? 
        usrs_elem.form.otp_verified.checked = true :
        usrs_elem.form.otp_verified.checked = false ;
    usrs_elem.form.otp_defs.value = usrs_env.user.otp_defs;
    let color = '';
    switch (usrs_elem.form.status.value) {
        case 'Active': 
            color='green';
            break;
        case 'Created':
            color='blue';
            break;
        case 'Pending':
            color='orange';
            break;
        case 'Lock':
            color='red';
            break;
        default:
            color='yellow';
    }
    usrs_elem.form.openids.value = usrs_env.openids;
    set_user_status(usrs_elem.form.status.value,color);
};
const collect_form = () => {
    usrs_env.user.name = usrs_elem.form.name.value;
    usrs_env.user.fullname = usrs_elem.form.fullname.value;
    usrs_env.user.email = usrs_elem.form.email.value;
    usrs_env.user.description = usrs_elem.form.description.value;
    usrs_env.user.roles = usrs_elem.form.roles.value;
    usrs_env.user.openids = usrs_elem.form.openids.value;
    usrs_env.user.items = usrs_elem.form.items.value;
    usrs_env.user.status = usrs_elem.form.status.value;
    usrs_elem.form.isadmin.checked ? 
        usrs_env.user.isadmin = true :
        usrs_env.user.isadmin = false; 
    usrs_elem.form.otp_enabled.checked ?
        usrs_env.user.otp_enabled = true : 
        usrs_env.user.otp_enabled = false;
    usrs_elem.form.otp_verified.checked ?
        usrs_env.user.otp_verified = true :
        usrs_env.user.otp_verified = false;
    usrs_env.user.otp_defs = usrs_elem.form.otp_defs.value;
};
const edit_usr = async (id) => {
    if (usrs_env.modal.show) {
        const res = await get_user('id',id);
        if (res.status && res.data.id == id) {
            usrs_env.user = res.data;
            usrs_env.openids = res.openids;
            fill_form();
            usrs_env.modal.show();
        }
    }
};
const save_all_usr = async (ev) => {
    ev.preventDefault();
    if (usrs_env.modal.show && usrs_env.user) {
        collect_form();
        const res = await save_user(usrs_env.user);
        // if (res.status) {
        usrs_env.modal.hide();
    }
};
const on_search = (el) => {
    const tbody = usrs_elem.table.getElementsByTagName('tbody')[0];
    let total = 0;
    let count_select = 0;
    [...tbody.getElementsByTagName('tr')].forEach(tr => {
        total +=1;
        if (tr.dataset.row && tr.dataset.row.includes(el.value)) {
            tr.classList.remove('hidden');
            count_select +=1;
        } else {
            tr.classList.add('hidden');
        }
    });
    if (usrs_elem.count_select) {
        if (count_select === total) {
            usrs_elem.count_select.innerHTML='';
        } else {
            usrs_elem.count_select.innerHTML=`${count_select} of`;
        }
    }
};
const on_search_keydown = (el,event) => {
    switch (event.key) {
        case 'Delete':
        case 'Home':
            clean_search();
            break;
        case 'Enter':
            break;
        default:
            on_search(el);
    }
}
const clean_search = () => {
    usrs_elem.search_inpt.value='';
    on_search(usrs_elem.search_inpt);
};
const load_data = () => {
    const js_data = document.getElementById('js-data');
    if (js_data) { js_data.remove(); }
    usrs_env.data = [];
    if (users_list) {
        try {
            usrs_env.data = JSON.parse(users_list) 
        } catch (error) {
            usrs_env.data = [];
        }
        users_list='';
    }
};
const on_check_all = (el,ev) => {
    ev.preventDefault();
    if (usrs_elem.checkbox_all) {
        const state = usrs_elem.checkbox_all.checked;
        [...usrs_elem.table.getElementsByClassName('col-check')].forEach(it => {
            it.checked = state;
        });
    }
};
const table_sort = (col) => {
    const tbody = usrs_elem.table.getElementsByTagName('tbody')[0];
    const rows = tbody.getElementsByTagName('tr');
    const arrow_up = document.getElementById(`${col}-arrow-up`);
    const arrow_down = document.getElementById(`${col}-arrow-down`);
    const col_rows = [];
    [...rows].forEach(it => {
        const data=it.dataset.row.split(':');
        switch (col) {
            case 'name':
              col_rows.push({ky: data[0], tr:it})
              break;
            case 'fullname':
              col_rows.push({ky: data[1], tr:it})
              break;
            case 'email':
              col_rows.push({ky: data[2], tr:it})
              break;
            case 'description':
              col_rows.push({ky: data[3], tr:it})
              break;
            case 'roles':
              col_rows.push({ky: data[4], tr:it})
              break;
            case 'status':
              col_rows.push({ky: data[5], tr:it})
              break;
            case 'isadmin':
              col_rows.push({ky: data[6], tr:it})
              break;
            case 'openids':
                col_rows.push({ky: data[7], tr:it})
                break;
        }
    })
    if (col_rows.length === 0) { return; }
    const is_asc = !usrs_env.cols[col].asc;
    usrs_env.cols[col].asc = is_asc;
    if (is_asc) {
        if (arrow_up) { arrow_up.classList.remove('hidden'); }
        if (arrow_down) { arrow_down.classList.add('hidden'); }
    } else { 
        if (arrow_up) { arrow_up.classList.add('hidden'); }
        if (arrow_down) { arrow_down.classList.remove('hidden'); }
    }
    col_rows.sort((a,b) => {
        if (is_asc) {
            if (a.ky > b.ky) { return 1; }
            if (a.ky < b.ky) { return -1; }
        } else {
            if (a.ky > b.ky) { return -1; }
            if (a.ky < b.ky) { return 1; }
        }
        // a must be equal to b
        return 0;
    });
    tbody.innerHTM=''; 
    col_rows.forEach(it => tbody.append(it.tr));
};
const alert_danger = (task,message) => {
    if (usrs_elem.danger_message && usrs_elem.alert_danger) {
        usrs_elem.danger_message.innerHTML=message;
        switch (task) {
            case 'show':
                usrs_elem.alert_danger.classList.remove('hidden');
                setTimeout(() => {
                    usrs_elem.alert_danger.classList.add('hidden');
                }, usrs_elem.alert_timeout);
                break;
            default:
                usrs_elem.alert_danger.classList.add('hidden');
        }
    }
};
const alert_info = (task,message) => {
    if (usrs_elem.info_message && usrs_elem.alert_info) {
        usrs_elem.info_message.innerHTML=message;
        switch (task) {
            case 'show':
                usrs_elem.alert_info.classList.remove('hidden');
                setTimeout(() => {
                    usrs_elem.alert_info.classList.add('hidden');
                }, usrs_elem.alert_timeout);
                break;
            default:
                usrs_elem.alert_info.classList.add('hidden');
        }
    }
};
const post_fetch = async (source,url = '',source_data) => {
    if (url === '') { return }
    const response = await fetch(url, {
        method: 'POST',
        body: JSON.stringify(source_data),
        headers: {
            'Content-type': 'application/json; charset=UTF-8',
        }
    });
    alert_danger('hide','');
    alert_info('hide','');
    if (response.ok && response.status === 200 ) {
        if (source === 'get_user') {
            const name = source_data.name;
            const value = `${source_data.value}`;
            const data = await response.json();
            if (data.user && data.user[name] && `${data.user[name]}` === value) {
                return {status: true, data: data.user, openids: data.openids ? data.openids : '' }
            } else {
                alert_danger('show',`No data found for ${name}`)
                return {status: false, data: {}, openids: ''};
            }
        } else {
            const data = await response.text();
            if (data !== '') { alert_info('show',data); }
            return {status: true, data }
        }
    } else if ( response.status === 401 ) {
        alert_danger('show','Error connection, SESSION expired ? Try Reload !')
        return {status: false, data: {}};
    } else if ( response.status === 400 ) {
        alert_danger('show','Error connection, bad request. No data found !')
        return {status: false, data: {}};
    } else {
        alert_danger('show','Error connection, no data available')
        return {status: false, data: {}};
    }
};
const get_user = async (name, value) => { 
    if (GETUSER_URL) {
        const data = {
            name,
            value
        };
        return await post_fetch('get_user', GETUSER_URL,data);
    }
};
const save_user = async (data) => { 
    if (SAVEUSER_URL) {
        return await post_fetch('save_user', SAVEUSER_URL,data);
    }
};
const list_act_items = () => {
    let act_items=[];
    if (usrs_elem.checkbox_all) {
        const state = usrs_elem.checkbox_all.checked;
        [...usrs_elem.table.getElementsByClassName('col-check')].forEach(it => {
            if (it.checked && it.dataset.col) {
                if (usrs_env && usrs_env.data && usrs_env.data[it.dataset.col]) {
                    act_items.push({
                        id: `${usrs_env.data[it.dataset.col]}`,
                        src: it,
                    });
                }
            }
        });
    }
    return act_items;
};
const act_reset_password = async () => {
    if (RESETPASSWD_URL) {
        if (usrs_elem.dropdown_action) { usrs_elem.dropdown_action.classList.add('hidden'); }
        list_act_items().forEach(async (it) => {
            const res = await post_fetch('act_reset_password', RESETPASSWD_URL,{
                name: "id", value: it.id
            });
            if (res.status) { it.src.checked = false;}
        });
        if (usrs_elem.checkbox_all) { usrs_elem.checkbox_all.checked=false;}
    }
};
const act_reset_totp = async () => {
    if (RESETTOTP_URL) {
        if (usrs_elem.dropdown_action) { usrs_elem.dropdown_action.classList.add('hidden'); }
        list_act_items().forEach(async (it) => {
            const res = await post_fetch('act_reset_totp', RESETTOTP_URL,{
                name: "id", value: it.id
            });
            if (res.status) { it.src.checked = false; }
        });
        if (usrs_elem.checkbox_all) { usrs_elem.checkbox_all.checked=false;}
    }
};
const act_set_isadmin = async () => {
    if (SETADMIN_URL) {
        if (usrs_elem.dropdown_action) { usrs_elem.dropdown_action.classList.add('hidden'); }
        list_act_items().forEach(async (it) => {
            const res = await post_fetch('act_set_isadmin', SETADMIN_URL,{
                name: "id", value: it.id
            });
            if (res.status) { it.src.checked = false;}
        });
        if (usrs_elem.checkbox_all) { usrs_elem.checkbox_all.checked=false;}
    }
};
const act_delete = async () => {
    if (DELETEUSER_URL) {
        if (usrs_elem.dropdown_action) { usrs_elem.dropdown_action.classList.add('hidden'); }
        list_act_items().forEach(async (it) => {
            const res = await post_fetch('act_delete', DELETEUSER_URL,{
                name: "id", value: it.id
            });
            if (res.status) { it.src.checked = false;}
        });
        if (usrs_elem.checkbox_all) { usrs_elem.checkbox_all.checked=false;}
    }
};
window.addEventListener('load', () => {
//    get_otp_info();
    load_data();
    load_elem();
    // if (usrs_elem && usrs_elem.search_clean) {
    //     usrs_elem.search_clean.addEventListener('click', (ev) => {
    //         ev.preventDefault();
    //         usrs_elem.search_inpt.value='';
    //     });
    // }
    if (usrs_elem && usrs_elem.table) {
        usrs_env.cols = {};
        const thead = usrs_elem.table.getElementsByTagName('thead');
        if (thead[0]) {
            [...thead[0].getElementsByTagName('th')].forEach(col => {
                const th = col.dataset.th;
                if (th !== 'check') {
                    usrs_env.cols[th]={asc: false};
                    col.addEventListener('click', (ev) => {
                        ev.preventDefault();
                        const src = col;
                        const th = src.dataset.th;
                        console.log(`${th}`);
                        table_sort(th);
                    });
                }
            });
        }
    }
    // options with default values
    const options = {
        placement: 'bottom-right',
        backdrop: 'dynamic',
        backdropClasses: 'bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40',
        closable: true,
        onHide: () => {
            console.log('modal is hidden');
        },
        onShow: () => {
            console.log('modal is shown');
        },
        onToggle: () => {
            console.log('modal has been toggled');
        }
    };
    usrs_env.modal = new Modal(usrs_elem.modal, options);
});