function getPacket(channel, type, payload) {
    let packet = {
        channel: channel,
        data: {
            type: type,
            payload: payload
        }
    }

    return JSON.stringify(packet)
}

function getClickPacket(uuid, item_id) {
    return getPacket(
        'SERVER_IN_OPERATOR_CLICK',
        'nl.iobyte.parkplus.api.packet.payloads.operator.ClientOperatorClickPayload',
        {
            uuid: uuid,
            item_id: item_id
        }
    )
}

$(document).on('click', "div.panel[id^='button-'] > div.panel-body > img", function() {
    const parent = $(this).parent().parent();
    const id = parent.attr("id").replace("button-", "");

    if(!socket || hasConnected !== true)
        return

    socket.emit(
        'data',
        getClickPacket(
            fixUUID(window.settings.uuid),
            id
        )
    );
});

window.sendMessage = function(message) {
    if(hasConnected)
        socket.send(message);
}

let hasConnected = false
let socket = null
$(() => {
    socket = io('websocket.iobyte.nl', {
        query: "type=client&id=" + window.settings.id + "&uuid=" + fixUUID(window.settings.uuid) + "&attraction=" + window.settings.attraction + "&token=" + window.settings.pin,
        autoConnect: false,
        withCredentials: false
    })

    socket.on('connect', () => {
        setTimeout(() => {
            if(hasConnected)
                return

            socket.close()
        }, 5 * 1000)
    })

    socket.on('disconnect', () => {
        const control = $("span#control");
        control.removeClass();
        control.addClass("control-status");
        control.addClass("status-closed");
        control.html("Lost Connection");
        setTimeout(() => {
            if(hasConnected)
                return

            socket.close()
        }, 5 * 1000)
    })

    socket.on('error', e => {
        socket.close()
        console.log(e)
    })

    socket.on('close', () => {
        hasConnected = true
        const control = $("span#control");
        control.removeClass();
        control.addClass("control-status");
        control.addClass("status-closed");
        control.html("Disconnected");
    })

    socket.on('data', payload => {
        try {
            payload = JSON.parse(payload)
        } catch (e) {
            return
        }

        if(!payload)
            return

        if(!payload.hasOwnProperty('channel'))
            return

        let channel = payload.channel;
        if(channel === 'CLIENT_KICK') {
            socket.close()
            return
        }

        let data;
        if(payload.hasOwnProperty('data')) {
            data = payload.data.payload;
        } else {
            data = payload.data
        }

        handlePacket(channel, data)
    })
})

function fixUUID(i) {
    return i.substr(0,8) +
        "-" +
        i.substr(8,4) +
        "-" +
        i.substr(12,4) +
        "-" +
        i.substr(16,4) +
        "-" +
        i.substr(20)
}

function handlePacket(channel, payload) {
    switch (channel) {
        case 'CLIENT_NOTIFICATION':
            handleNotification(payload.title, payload.message)
            break
        case 'CLIENT_OPERATOR_REQUEST_REPLY':
            handleReply(payload)
            break
        case 'CLIENT_ATTRACTION_STATE':
            handleStatus(payload.status)
            break
        case 'CLIENT_OPERATOR_STATE':
            handleState(payload.item_id, payload.state)
            break
    }
}

function handleNotification(title, message) {
    const msg = $("div#message");
    msg.html('<div class="alert alert-info">'+title+'</div>');
    console.log({
        title: title,
        message: message,
    })
}

function handleReply(payload) {
    if(payload.hasOwnProperty('requestReply') && payload.requestReply === 'ACCEPT') {
        const control = $("span#control");
        control.removeClass();
        control.addClass("control-status");
        control.addClass("status-open");
        control.html("Connected");

        loadPanel(payload.data)
        return
    }

    socket.close();
    handleNotification(
        'Unable to operate ride',
        payload.message
    )
}

function jsUcfirst(str) {
    return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
}

function handleStatus(payload) {
    const status = $("span#status");
    status.html(jsUcfirst(payload.name));
    status.style.backgroundColor = payload.hex
}

function handleState(id, state) {
    let img = new Image();
    img.onload = () => {
        $("div#button-"+id+" div.panel-body img").attr("src", state.cover);
        $("div#button-"+id+" div.panel-body #text").html(state.name);
    }
    img.src = state.cover;
}

function loadPanel(panel) {
    for(let i = 0; i < panel.items.length; i++) {
        let item = panel.items[i];
        let state = item.state

        const image = state.cover;
        const title = item.name;
        const id = item.id;
        const text = state.name;

        if(i === 0)
            $("div#panel").append('\n');

        $("div#panel").append("<div class='col-xs-12 col-sm-6 col-md-4 col-lg-3'><div id='button-"+id+"' class='panel panel-theme'><div class='panel-heading'><h2 class='panel-title' style='text-align: center'>"+title+"</h2></div><div class='panel-body'><img src='"+image+"' style='width: 100%; height: auto; border: #a6a6a6 1px solid; border-radius: 3px'><p id='text' style='text-align: center'>"+text+"</p></div></div></div>\n");
    }
}