const showTicketBlock = (type) => {
    let TicketBlock = document.querySelector('.TicketBlock');
    TicketBlock.querySelector('.new').style.display = type == 'new' ? 'flex' : 'none';
    TicketBlock.querySelector('.success').style.display = type == 'success' ? 'flex' : 'none';
    TicketBlock.querySelector('.tchat').style.display = type == 'chat' ? 'flex' : 'none';
    TicketBlock.querySelector('.list').style.display = type == 'list' ? 'flex' : 'none';
    TicketBlock.querySelector('#currentTitle').innerText = ({ "new": "New ticket", "success": "Success", "chat": "Ticket", "list": "Your tickets" })[type];
}

const hideTicketBlock = () => {
    document.querySelector(".TicketWrapper").classList.toggle("TicketWrapperActive")
    document.querySelector(".TicketWrapper .TicketBlock").classList.toggle("TicketBlockActive");
}
document.querySelectorAll(".hideTicketBlockclose").forEach(e => e.addEventListener("click", hideTicketBlock))
document.querySelectorAll(".hideTicketBlockback").forEach(e => e.addEventListener("click", (e) => { showTicketBlock("list") }))
document.querySelector(".TicketWrapper").addEventListener("click", (e) => {
    try {
        if (e.target.className.includes("TicketWrapperActive")) {
            document.querySelector(".TicketWrapper").classList.toggle("TicketWrapperActive")
            document.querySelector(".TicketWrapper .TicketBlock").classList.toggle("TicketBlockActive")
        }
    } catch (e) { console.error(e) };
    
})

document.querySelector("#Tiket-file").addEventListener('change', (event) => {
    const fileName = event.target.files.length > 0 ? event.target.files[0].name : 'Attach files (optional)';
    document.querySelector("#Tiket-file-input span").textContent = fileName;
});

const submitTicket = async (e) => {
    e.target.setAttribute('disabled', 'true');

    var data = new FormData();
    if (document.querySelector('#Tiket-file').files.length > 0) {
        data.append('file', document.querySelector('#Tiket-file').files[0]);    
    }
    data.append('category', document.querySelector('.form select').value);
    data.append('message', document.querySelector('#queryticket').value);
    data.append('subject', document.querySelector('#subjectticket').value);

    await fetch('/newTicket', {
        method: 'POST',
        body: data
    });
    e.target.removeAttribute('disabled');
    showTicketBlock('success');
}

const setTicket = async (id)=>{
    let ticket = await (await fetch('/getTicket?id=' + id)).json();
    let msgbox = document.querySelector('.tchatLiveSupport .tmessages');
    msgbox.innerHTML = '';
    ticket['messages'].forEach(msg => {
        let date_m = new Date(msg["created_at"]);
        let hours_m =
            date_m.getHours().toString().length == 1
                ? `0${date_m.getHours()}`
                : date_m.getHours().toString();
        let minutes_m =
            date_m.getMinutes().toString().length == 1
                ? `0${date_m.getMinutes()}`
                : date_m.getMinutes().toString();
        const div = document.createElement("div");
        div.className =
            msg["side"] == 1
                ? "messageFrom"
                : "messageTo";
        if (msg["text"] != null) {
            div.innerHTML = `<div class="time">${hours_m}:${minutes_m}</div>${escapeHtml(
                msg["text"]
            )}`;
        }
        if (msg["file_url"] != null) {
            div.innerHTML = `<div class="time">${hours_m}:${minutes_m}</div><a download="" target="_blank" style="color: white; " href="${escapeHtml(
                msg["file_url"]
            )}">Download file</a>`;
        }
        msgbox.appendChild(div);
    });
    showTicketBlock('chat');
    window.currentchatid = id;
}

document.querySelector('#sendticket').addEventListener('click', submitTicket);

setInterval(async () => {
    document.querySelector('.realllist').innerHTML = (await (await fetch('/getTicketList')).text());
}, 10000);

const sendMessage = async ()=>{
    var data = new FormData();
    data.append('message', document.querySelector('#TicketChatInput').value);
    data.append('ticket', window.currentchatid);

    await fetch('/addMsgTicket', {
        method: 'POST',
        body: data
    });
    setTicket(window.currentchatid);
    document.querySelector('#TicketChatInput').value = '';
}

const sendMessageFile = async () => {
    if (document.querySelector('#ticket-file-input').files.length < 1) return;
    var data = new FormData();
    data.append('file', document.querySelector('#ticket-file-input').files[0]);
    data.append('ticket', window.currentchatid);

    await fetch('/addMsgTicketFile', {
        method: 'POST',
        body: data
    });
    document.querySelector('#ticket-file-input').files = [];
    setTicket(window.currentchatid);
}
document.querySelector('.sendMessage-ticket').addEventListener('click', sendMessage);
document.querySelector('#ticket-file-input').addEventListener('change', sendMessageFile);