function switch_tool(state, item) {
    const tool = item.getAttribute('data-tool');

    if (tool === 'undo') {
        return;
    }

    if (state.tools.active_element) {
        state.tools.active_element.classList.remove('active');
    }

    state.tools.active = tool;
    state.tools.active_element = item;
    state.tools.active_element.classList.add('active');
}

function switch_color(state, item) {
    const color = item.getAttribute('data-color');

    if (state.colors.active_element) {
        state.colors.active_element.classList.remove('active');
    }

    if (state.me in state.players) {
        const color_u32 = color_to_u32(color);
        state.players[state.me].color = color_u32
        fire_event(state, color_event(color_u32));
    }
    
    state.colors.active_element = item;
    state.colors.active_element.classList.add('active');
}

function show_stroke_preview(state, size) {
    const preview = document.querySelector('#stroke-preview');

    preview.style.width = size * state.canvas.zoom + 'px';
    preview.style.height = size * state.canvas.zoom + 'px';
    preview.style.background = color_from_u32(state.players[state.me].color);

    preview.classList.remove('dhide');
}

function hide_stroke_preview() {
    document.querySelector('#stroke-preview').classList.add('dhide');
}

function switch_stroke_width(e, state) {
    if (!state.online) return;
    
    const value = e.target.value;

    state.players[state.me].width = value;
    show_stroke_preview(state, value);

    if (state.hide_preview) {
        clearTimeout(state.hide_preview);
    }

    state.hide_preview = setTimeout(hide_stroke_preview, config.brush_preview_timeout);
}

function broadcast_stroke_width(e, state) {
    const value = e.target.value;
    fire_event(state, width_event(value));
}

function init_tools(state) {
    const tools = document.querySelectorAll('.tools .tool');
    const colors = document.querySelectorAll('.pallete .color');

    tools.forEach((item) => { item.addEventListener('click', () => switch_tool(state, item)); });
    colors.forEach((item) => { item.addEventListener('click', () => switch_color(state, item)); });

    // TODO: from localstorage
    switch_tool(state, document.querySelector('.tool[data-tool="pencil"]'));
    switch_color(state, document.querySelector('.color[data-color="000000"]'));

    const slider = document.querySelector('#stroke-width');

    // slider.value = state.players[state.me].width;
    slider.addEventListener('input', (e) => switch_stroke_width(e, state));
    slider.addEventListener('change', (e) => broadcast_stroke_width(e, state));

    document.querySelector('.phone-extra-controls').addEventListener('click', zenmode);
}