let socket = null, socketHandler = {},
    frontTimer = null, backTimer = null, Timeout = 500,
    DevicesAll = {}, DevicesShow = {},
    DeviceNow = {
        seq: "", online: false, location: "", ppv1: 0, ppv2: 0, ppv3: 0, ppv4: 0
    };

const strBase = "AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz0123456789", strLen = 62;
const randStr = len => {
    let res = "";
    for (let i = 0; i < len; i++) res += strBase[Math.floor(Math.random() * strLen)];
    return res;
}, createDeviceNode = (seq, online) => {
    let $device = document.createElement("div"),
        $seq = document.createElement("span"),
        $status = document.createElement("span");
    $device.setAttribute("rel", seq);
    $device.className = "device " + (online ? "online" : "offline");
    $seq.className = "seq";
    $seq.innerText = seq;
    $status.className = "status";
    $status.innerText = online ? "在线" : "离线";
    $device.appendChild($seq);
    $device.appendChild($status);
    return $device;
}, connectSocket = () => {
    const did = randStr(16);
    socket = new WebSocket(`${Url}/${did}`);
    socket.onopen = () => {
        setInterval(() => sendEvent("pin", null), 50 * 1000);
        sendEvent("listDevices", null);
    }
    socket.onmessage = data => {
        let body = JSON.parse(data.data);
        socketHandler[body.event] && socketHandler[body.event](body.data);
    }
    socket.onclose = e => {
        socket = null;
        if (e.code === 1006) connectSocket();
    }
}, sendEvent = (event, data) => {
    if (socket !== null) socket.send(JSON.stringify({event, data}));
    else setTimeout(() => sendEvent(event, data), 1000);
};

window.onload = () => {
    const $searchIcon = document.getElementById("search-icon"),
        $backIcon = document.getElementById("back-icon"),
        $detailPage = document.getElementById("detail-page"),
        $seqInput = document.getElementById("seq-input"),
        $devices = document.getElementById("devices"),
        $detailTitle = document.getElementById("seq-text"),
        $updateLocBtn = document.getElementById("update-loc"),
        $locationInput = document.getElementById("location"),
        $ppvs = [
            [document.getElementById("ppv1"), document.getElementById("update-ppv1")],
            [document.getElementById("ppv2"), document.getElementById("update-ppv2")],
            [document.getElementById("ppv3"), document.getElementById("update-ppv3")],
            [document.getElementById("ppv4"), document.getElementById("update-ppv4")]
        ],
        $openFront = document.getElementById("open-front"),
        $openBack = document.getElementById("open-back"),
        $openDebug = document.getElementById("open-debug"),
        $stopDebug = document.getElementById("stop-debug");
    const filterAndShow = seq => {
        $devices.innerHTML = "";
        for (let key in DevicesAll) if (key.includes(seq)) DevicesShow[key] = DevicesAll[key];
        for (let key in DevicesShow) {
            let $device = createDeviceNode(key, DevicesShow[key].online);
            $device.onclick = function () {
                DeviceNow = DevicesShow[this.getAttribute("rel")];
                $detailTitle.innerText = DeviceNow.seq;
                $locationInput.value = DeviceNow.location;
                $ppvs[0][0].value = DeviceNow.ppv1;
                $ppvs[1][0].value = DeviceNow.ppv2;
                $ppvs[2][0].value = DeviceNow.ppv3;
                $ppvs[3][0].value = DeviceNow.ppv4;
                $detailPage.className = "slide-in";
            }
            $devices.appendChild($device);
        }
    };
    $searchIcon.setAttribute("src", `${Prefix}/icon/search.svg`);
    $backIcon.setAttribute("src", `${Prefix}/icon/back.svg`);

    $backIcon.onclick = () => $detailPage.className = "slide-out";
    $seqInput.onchange = () => filterAndShow($seqInput.value.trim());
    $updateLocBtn.onclick = () => {
        let loc = $locationInput.value.trim();
        if (loc === "") return alert("location is blank");
        sendEvent("setLocation", {seq: DeviceNow.seq, loc: loc});
    }
    $ppvs.forEach((pair, index) => {
        pair[1].onclick = function () {
            let val = +pair[0].value;
            if (val === undefined || val < 1 || val > 15) return alert("require: 0 < ppv < 16");
            console.log({seq: DeviceNow.seq, index: index, value: val});
            sendEvent("setPpv", {seq: DeviceNow.seq, index: index, value: val});
        }
    });
    $openFront.onclick = () => {
        if (frontTimer !== null) return;
        frontTimer = setTimeout(() => {
            clearTimeout(frontTimer);
            frontTimer = null;
        }, Timeout);
        sendEvent("openGate", {seq: DeviceNow.seq, kind: "Changing"});
    }
    $openBack.onclick = () => {
        if (backTimer !== null) return;
        backTimer = setTimeout(() => {
            clearTimeout(backTimer);
            backTimer = null;
        }, Timeout);
        sendEvent("openGate", {seq: DeviceNow.seq, kind: "Fixing"});
    }
    $openDebug.onclick = () => sendEvent("setDebug", {seq: DeviceNow.seq, debug: true});
    $stopDebug.onclick = () => sendEvent("setDebug", {seq: DeviceNow.seq, debug: false});

    socketHandler.__Error_Event__ = msg => alert(msg);
    socketHandler.devices = data => {
        DevicesAll = data;
        filterAndShow("");
    }
    socketHandler.newDevice = device => {
        DevicesAll[device.seq] = device;
        filterAndShow($seqInput.value.trim());
    }
    socketHandler.deviceStatusChange = data => {
        DevicesAll[data.seq].online = data.online;
        filterAndShow($seqInput.value.trim());
    }
    socketHandler.openResult = data => alert(data.type + (data.result ? "-成功" : "-失败"));
    socketHandler.workFinished = data => alert(data);
    connectSocket();
}