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

    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');
    }

    state.colors.active = color_to_u32(color);
    state.colors.active_element = item;
    state.colors.active_element.classList.add('active');
}

function switch_stroke_width(e, state) {
    const value = e.target.value;
    state.stroke_width = 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"]'));

    document.querySelector('#stroke-width').value = state.stroke_width;
    document.querySelector('#stroke-width').addEventListener('input', (e) => switch_stroke_width(e, state));
    document.querySelector('.phone-extra-controls').addEventListener('click', zenmode);
}