function ui_offline() {
    document.body.classList.add('offline');
    document.querySelector('.offline-toast').classList.remove('hidden');
}

function ui_online() {
    document.body.classList.remove('offline');
    document.querySelector('.offline-toast').classList.add('hidden');
}

async function insert_image(state, context, file) {
    const bitmap = await createImageBitmap(file);

    const p = { 'x': state.cursor.x, 'y': state.cursor.y };
    const canvasp = screen_to_canvas(state, p);

    canvasp.x -= bitmap.width / 2;
    canvasp.y -= bitmap.height / 2;

    const form_data = new FormData();
    form_data.append('file', file);

    const resp = await fetch(`/api/image?deskId=${state.desk_id}`, {
        method: 'post',
        body: form_data,
    })

    if (resp.ok) {
        const image_id = await resp.text();
        const event = image_event(image_id, canvasp.x, canvasp.y);
        await queue_event(state, event);
    }
}

function event_size(event) {
    let size = 1 + 3; // type + padding

    switch (event.type) {
        case EVENT.PREDRAW: {
            size += 4 * 2;
            break;
        }

        case EVENT.CLEAR: {
            break;
        }

        case EVENT.SET_COLOR: {
            size += 4;
            break;
        }

        case EVENT.SET_WIDTH: {
            size += 2;
            break;
        }

        case EVENT.STROKE: {
            size += 4 + 2 + 2 + 4 + event.points.length * 4 * 2; // u32 stroke id + u16 (count) + u16 (width) + u32 (color + count * (f32, f32) points
            break;
        }

        case EVENT.UNDO:
        case EVENT.REDO: {
            break;
        }

        case EVENT.IMAGE:
        case EVENT.IMAGE_MOVE: {
            size += 4 + 4 + 4; // file id + x + y
            break;
        }

        case EVENT.ERASER: {
            size += 4; // stroke id
            break;
        }

        default: {
            console.error('fuck');
        }
    }

    return size;
}

function find_touch(touchlist, id) {
    for (const touch of touchlist) {
        if (touch.identifier === id) {
            return touch;
        }
    }

    return null;
}

function find_image(state, image_id) {
    for (let i = state.events.length - 1; i >= 0; --i) {
        const event = state.events[i];
        if (event.type === EVENT.IMAGE && !event.deleted && event.image_id === image_id) {
            return event;
        }
    }
}