import jQuery from "jquery";
import { PLUGIN_PATH } from "../../config";
import { state } from "./editor";

const ID_TOOLBAR = "#toolbar";

const TOOL_ICON_SRC = PLUGIN_PATH + "editor/images/tools/";
const TOOL_ICON_FORMAT = ".png";
const TOOL_SELECTED_CLASS = "selected";

export default class Toolbar {
    constructor(tools) {
        this.tools = Object.values(tools);
        this.previousTool = undefined;

        this.renderToolbar(this.tools);
    }

    setSelectedTool(tool) {
        var selectedTool = jQuery(Toolbar.getToolIdTag(tool));
        selectedTool.addClass(TOOL_SELECTED_CLASS);

        if (this.previousTool !== undefined) {
            var previousTool = jQuery(Toolbar.getToolIdTag(this.previousTool));
            previousTool.removeClass(TOOL_SELECTED_CLASS);
        }

        this.previousTool = tool;
    }

    renderToolbar(tools) {
        this.fillDomList(ID_TOOLBAR, tools, this.toolRenderer);

        tools.forEach((tool) => {
            this.toolClickEvent(tool);
        });
    }

    static getToolIdTag(tool) {
        return ID_TOOLBAR + "-" + tool.getKey();
    }

    static getToolId(tool) {
        return Toolbar.getToolIdTag(tool).substr(1);
    }

    toolRenderer(tool) {
        return (
            '<button id="' +
            Toolbar.getToolId(tool) +
            '" title="' +
            tool.getName() +
            '"><img src="' +
            TOOL_ICON_SRC +
            tool.getIcon() +
            TOOL_ICON_FORMAT +
            '"></button>'
        );
    }

    toolClickEvent(tool) {
        jQuery("button" + Toolbar.getToolIdTag(tool)).on(
            "click",
            "",
            tool,
            (e) => {
                state.setTool(e.data);
            }
        );
    }

    fillDomList(listId, items, itemRenderer) {
        var listCont = jQuery(listId);
        listCont.empty();

        items.forEach((i) => listCont.append(itemRenderer(i)));
    }
}