function tools_switch(state, tool) {
    if (state.tools.active_element) {
        state.tools.active_element.classList.remove('active');
    }

    state.tools.active = tool;
    state.tools.active_element = document.querySelector(`.tool[data-tool="${tool}"]`);
    state.tools.active_element.classList.add('active');
}

function init_tools(state, context) {
    const pencil = document.querySelector('.tool[data-tool="pencil"]');
    const ruler = document.querySelector('.tool[data-tool="ruler"]');
    const eraser = document.querySelector('.tool[data-tool="eraser"]');
    const undo = document.querySelector('.tool[data-tool="undo"]');

    pencil.addEventListener('click', () => tools_switch(state, 'pencil'));
    ruler.addEventListener('click', () => tools_switch(state, 'ruler'));
    eraser.addEventListener('click', () => tools_switch(state, 'eraser'));
    undo.addEventListener('click', () => {
        pop_stroke(state, context);
        window.requestAnimationFrame(() => draw(state, context));
    });

    tools_switch(state, 'pencil');
}