import { subscribeSelector } from "../../framework/selectors";
import { isToolSet, DEFAULT_TOOL_OPTIONS } from "../state";
import { annotationToToolOptions, applyToolOptionsToAnnotation, getEditableOptionsForAnnotation, } from "../annotation/propertyUtils";
import { createNumberInput } from "./NumberInput";
import { createColorSelect } from "./ColorSelect";
import { ICON_SUBTOOL_SELECT, ICON_SUBTOOL_FREEHAND, ICON_SUBTOOL_LINE, ICON_SUBTOOL_ARROW, ICON_SUBTOOL_RECTANGLE, ICON_SUBTOOL_ELLIPSE, ICON_SUBTOOL_POLYGON, ICON_SUBTOOL_POLYLINE, ICON_SUBTOOL_HIGHLIGHT, ICON_SUBTOOL_UNDERLINE, ICON_SUBTOOL_STRIKETHROUGH, ICON_SUBTOOL_SQUIGGLY, ICON_LINE_SOLID, ICON_LINE_DASHED, ICON_LINE_DOTTED, ICON_ARROW_NONE, ICON_ARROW_OPEN, ICON_ARROW_CLOSED, ICON_STROKE_WIDTH, ICON_OPACITY, ICON_FONT_SIZE, ICON_DELETE, ICON_UNDO, ICON_REDO, } from "../icons";
const ANNOTATE_SUB_TOOLS = [
    { id: "select", icon: ICON_SUBTOOL_SELECT, labelKey: "tools.select" },
    { id: "freehand", icon: ICON_SUBTOOL_FREEHAND, labelKey: "tools.freehand" },
    { id: "line", icon: ICON_SUBTOOL_LINE, labelKey: "tools.line" },
    { id: "arrow", icon: ICON_SUBTOOL_ARROW, labelKey: "tools.arrow" },
    { id: "rectangle", icon: ICON_SUBTOOL_RECTANGLE, labelKey: "tools.rectangle" },
    { id: "ellipse", icon: ICON_SUBTOOL_ELLIPSE, labelKey: "tools.ellipse" },
    { id: "polygon", icon: ICON_SUBTOOL_POLYGON, labelKey: "tools.polygon" },
    { id: "polyline", icon: ICON_SUBTOOL_POLYLINE, labelKey: "tools.polyline" },
];
const MARKUP_SUB_TOOLS = [
    { id: "select", icon: ICON_SUBTOOL_SELECT, labelKey: "tools.select" },
    { id: "highlight", icon: ICON_SUBTOOL_HIGHLIGHT, labelKey: "tools.highlight" },
    { id: "underline", icon: ICON_SUBTOOL_UNDERLINE, labelKey: "tools.underline" },
    { id: "strikethrough", icon: ICON_SUBTOOL_STRIKETHROUGH, labelKey: "tools.strikethrough" },
    { id: "squiggly", icon: ICON_SUBTOOL_SQUIGGLY, labelKey: "tools.squiggly" },
];
const SUB_TOOLS_MAP = { annotate: ANNOTATE_SUB_TOOLS, markup: MARKUP_SUB_TOOLS };
const TOOL_OPTIONS_CONFIG = {
    freehand: ["strokeColor", "strokeWidth", "opacity"],
    line: ["strokeColor", "strokeWidth", "opacity", "lineStyle"],
    arrow: ["strokeColor", "strokeWidth", "opacity", "lineStyle", "arrowHead"],
    rectangle: ["strokeColor", "fillColor", "strokeWidth", "opacity", "lineStyle"],
    ellipse: ["strokeColor", "fillColor", "strokeWidth", "opacity", "lineStyle"],
    polygon: ["strokeColor", "fillColor", "strokeWidth", "opacity", "lineStyle"],
    polyline: ["strokeColor", "strokeWidth", "opacity", "lineStyle"],
    highlight: ["strokeColor", "opacity"],
    underline: ["strokeColor"],
    strikethrough: ["strokeColor"],
    squiggly: ["strokeColor"],
};
const LINE_STYLE_DEFS = [
    { id: "solid", icon: ICON_LINE_SOLID, labelKey: "tools.lineStyleSolid" },
    { id: "dashed", icon: ICON_LINE_DASHED, labelKey: "tools.lineStyleDashed" },
    { id: "dotted", icon: ICON_LINE_DOTTED, labelKey: "tools.lineStyleDotted" },
];
const ARROW_HEAD_DEFS = [
    { id: "none", icon: ICON_ARROW_NONE, labelKey: "tools.arrowHeadNone" },
    { id: "open", icon: ICON_ARROW_OPEN, labelKey: "tools.arrowHeadOpen" },
    { id: "closed", icon: ICON_ARROW_CLOSED, labelKey: "tools.arrowHeadClosed" },
];
function resolveAnnotation(s) {
    const sel = s.selectedAnnotation;
    if (!sel)
        return null;
    const list = s.pageAnnotations.get(sel.pageIndex);
    if (!list || sel.annotationIndex >= list.length)
        return null;
    return list[sel.annotationIndex];
}
function selectSlice(s) {
    return {
        activeTool: s.activeTool,
        activeSubTool: s.activeSubTool,
        toolOptions: s.toolOptions,
        selectedAnnotation: s.selectedAnnotation,
        selectedAnnotationObj: resolveAnnotation(s),
    };
}
function sliceEqual(a, b) {
    return (a.activeTool === b.activeTool &&
        a.activeSubTool === b.activeSubTool &&
        a.toolOptions === b.toolOptions &&
        a.selectedAnnotation === b.selectedAnnotation &&
        a.selectedAnnotationObj === b.selectedAnnotationObj);
}
// ====================================================================================
// createSubToolbar
// ====================================================================================
export function createSubToolbar() {
    const el = document.createElement("div");
    el.className = "udoc-subtoolbar";
    el.setAttribute("role", "toolbar");
    el.style.display = "none";
    const toolsSection = document.createElement("div");
    toolsSection.className = "udoc-subtoolbar__tools";
    const dividerEl = document.createElement("div");
    dividerEl.className = "udoc-subtoolbar__divider";
    const optionsSection = document.createElement("div");
    optionsSection.className = "udoc-subtoolbar__options";
    // Undo/redo section (right end, after options)
    const undoDivider = document.createElement("div");
    undoDivider.className = "udoc-subtoolbar__divider";
    undoDivider.style.display = "none";
    const undoSection = document.createElement("div");
    undoSection.className = "udoc-subtoolbar__undo";
    undoSection.style.display = "none";
    el.append(toolsSection, dividerEl, optionsSection, undoDivider, undoSection);
    // ---- Mutable state ----
    let containerRef = null;
    let unsubRender = null;
    const currentToolBtns = new Map();
    let currentToolSet = null;
    let builtSubTool = null;
    /** Annotation type for which controls were built (when editing a selected annotation). */
    let builtForAnnotationType = null;
    let activeSubTool = null;
    let openPanel = null;
    // ---- Lazy-created option controls ----
    let strokeColorSelect = null;
    let fillColorSelect = null;
    let strokeWidthInput = null;
    let opacityInput = null;
    let fontSizeInput = null;
    // Delete button for select tool
    let deleteBtn = null;
    // Line style & arrow head (panels + triggers)
    const lineStylePanel = document.createElement("div");
    lineStylePanel.className = "udoc-linestyle-panel";
    lineStylePanel.addEventListener("click", (e) => e.stopPropagation());
    const arrowHeadPanel = document.createElement("div");
    arrowHeadPanel.className = "udoc-arrowhead-panel";
    arrowHeadPanel.addEventListener("click", (e) => e.stopPropagation());
    let lineStyleTrigger = null;
    let arrowHeadTrigger = null;
    // ---- Panel management ----
    function closeAllPanels() {
        openPanel = null;
        strokeColorSelect?.close();
        fillColorSelect?.close();
        lineStylePanel.classList.remove("udoc-linestyle-panel--open");
        arrowHeadPanel.classList.remove("udoc-arrowhead-panel--open");
        strokeWidthInput?.close();
        opacityInput?.close();
        fontSizeInput?.close();
    }
    const onDocumentClick = () => closeAllPanels();
    function openPanelAt(key, trigger) {
        const wasOpen = openPanel === key;
        closeAllPanels();
        if (wasOpen)
            return;
        const rect = trigger.getBoundingClientRect();
        const cRect = containerRef.getBoundingClientRect();
        const left = `${rect.left - cRect.left}px`;
        if (key === "strokeColor")
            strokeColorSelect?.open(rect, cRect);
        else if (key === "fillColor")
            fillColorSelect?.open(rect, cRect);
        else if (key === "strokeWidth")
            strokeWidthInput?.open(rect, cRect);
        else if (key === "opacity")
            opacityInput?.open(rect, cRect);
        else if (key === "fontSize")
            fontSizeInput?.open(rect, cRect);
        else if (key === "lineStyle") {
            lineStylePanel.style.left = left;
            lineStylePanel.classList.add("udoc-linestyle-panel--open");
        }
        else if (key === "arrowHead") {
            arrowHeadPanel.style.left = left;
            arrowHeadPanel.classList.add("udoc-arrowhead-panel--open");
        }
        openPanel = key;
    }
    // ---- Dispatch helper ----
    /** Whether we are currently showing controls for a selected annotation (vs drawing tool). */
    let editingAnnotation = false;
    function dispatchOpt(store, key, value) {
        if (editingAnnotation) {
            // Apply the change to the selected annotation
            const state = store.getState();
            const sel = state.selectedAnnotation;
            if (!sel)
                return;
            const list = state.pageAnnotations.get(sel.pageIndex);
            if (!list || sel.annotationIndex >= list.length)
                return;
            const annotation = list[sel.annotationIndex];
            const updated = applyToolOptionsToAnnotation(annotation, { [key]: value });
            store.dispatch({
                type: "UPDATE_ANNOTATION",
                pageIndex: sel.pageIndex,
                annotationIndex: sel.annotationIndex,
                annotation: updated,
            });
        }
        else if (activeSubTool) {
            store.dispatch({ type: "SET_TOOL_OPTION", subTool: activeSubTool, key, value });
        }
    }
    // ---- Mount ----
    function mount(container, store, i18n, undoManager) {
        containerRef = container;
        container.appendChild(el);
        container.appendChild(lineStylePanel);
        container.appendChild(arrowHeadPanel);
        el.setAttribute("aria-label", i18n.t("tools.subtoolbar"));
        document.addEventListener("click", onDocumentClick);
        // ---- Undo/redo buttons ----
        if (undoManager) {
            const undoBtn = document.createElement("button");
            undoBtn.className = "udoc-subtoolbar__btn";
            undoBtn.innerHTML = ICON_UNDO;
            undoBtn.title = i18n.t("tools.undo");
            undoBtn.setAttribute("aria-label", i18n.t("tools.undo"));
            undoBtn.disabled = true;
            undoBtn.addEventListener("click", () => undoManager.undo());
            const redoBtn = document.createElement("button");
            redoBtn.className = "udoc-subtoolbar__btn";
            redoBtn.innerHTML = ICON_REDO;
            redoBtn.title = i18n.t("tools.redo");
            redoBtn.setAttribute("aria-label", i18n.t("tools.redo"));
            redoBtn.disabled = true;
            redoBtn.addEventListener("click", () => undoManager.redo());
            undoSection.append(undoBtn, redoBtn);
            undoSection.style.display = "";
            undoDivider.style.display = "";
            undoManager.subscribe(() => {
                undoBtn.disabled = !undoManager.canUndo();
                redoBtn.disabled = !undoManager.canRedo();
            });
        }
        const applyState = (slice) => {
            const visible = isToolSet(slice.activeTool);
            el.style.display = visible ? "flex" : "none";
            if (!visible) {
                closeAllPanels();
                return;
            }
            const toolSet = slice.activeTool;
            const subTools = SUB_TOOLS_MAP[toolSet];
            if (!subTools)
                return;
            // Rebuild tool buttons if tool set changed
            if (currentToolSet !== toolSet) {
                currentToolSet = toolSet;
                toolsSection.innerHTML = "";
                currentToolBtns.clear();
                for (const def of subTools) {
                    const btn = document.createElement("button");
                    btn.className = "udoc-subtoolbar__btn";
                    btn.innerHTML = def.icon;
                    btn.title = i18n.t(def.labelKey);
                    btn.setAttribute("aria-label", i18n.t(def.labelKey));
                    btn.addEventListener("click", () => {
                        const state = store.getState();
                        if (state.activeSubTool === def.id && (def.id === "polygon" || def.id === "polyline")) {
                            document.dispatchEvent(new Event("udoc-finish-drawing"));
                        }
                        else {
                            store.dispatch({ type: "SET_SUB_TOOL", subTool: def.id });
                        }
                    });
                    toolsSection.appendChild(btn);
                    currentToolBtns.set(def.id, btn);
                }
            }
            for (const [id, btn] of currentToolBtns) {
                btn.classList.toggle("udoc-subtoolbar__btn--active", id === slice.activeSubTool);
            }
            if (!slice.activeSubTool) {
                optionsSection.innerHTML = "";
                builtSubTool = null;
                builtForAnnotationType = null;
                editingAnnotation = false;
                return;
            }
            activeSubTool = slice.activeSubTool;
            // Determine if we're in "edit selected annotation" mode
            const selAnnotation = slice.activeSubTool === "select" ? slice.selectedAnnotationObj : null;
            const selAnnotationType = selAnnotation ? selAnnotation.type : null;
            const selEditableKeys = selAnnotation ? getEditableOptionsForAnnotation(selAnnotation) : null;
            if (slice.activeSubTool === "select" && selAnnotation && selEditableKeys) {
                // Editing a selected annotation — show property controls sourced from the annotation
                editingAnnotation = true;
                const opts = annotationToToolOptions(selAnnotation);
                // Rebuild controls if sub-tool changed or annotation type changed
                if (builtSubTool !== "select" || builtForAnnotationType !== selAnnotationType) {
                    closeAllPanels();
                    buildControlsForAnnotation(selEditableKeys, opts, store, i18n);
                    builtSubTool = "select";
                    builtForAnnotationType = selAnnotationType;
                }
                updateValues(opts, store, i18n);
                if (deleteBtn)
                    deleteBtn.disabled = false;
            }
            else {
                // Normal mode: drawing tool options or select with no/non-editable annotation
                editingAnnotation = false;
                const opts = slice.toolOptions[slice.activeSubTool] ?? { ...DEFAULT_TOOL_OPTIONS };
                if (builtSubTool !== slice.activeSubTool || builtForAnnotationType !== null) {
                    closeAllPanels();
                    buildControls(slice.activeSubTool, opts, store, i18n);
                    builtSubTool = slice.activeSubTool;
                    builtForAnnotationType = null;
                }
                updateValues(opts, store, i18n);
                if (deleteBtn) {
                    deleteBtn.disabled = !slice.selectedAnnotation;
                }
            }
        };
        applyState(selectSlice(store.getState()));
        unsubRender = subscribeSelector(store, selectSlice, applyState, { equality: sliceEqual });
    }
    // ====================================================================
    // buildControls — called ONLY when active sub-tool changes
    // ====================================================================
    function buildControls(subTool, opts, store, i18n) {
        optionsSection.innerHTML = "";
        lineStyleTrigger = null;
        arrowHeadTrigger = null;
        deleteBtn = null;
        // Select tool shows a delete button instead of drawing options
        if (subTool === "select") {
            deleteBtn = document.createElement("button");
            deleteBtn.className = "udoc-subtoolbar__btn udoc-subtoolbar__btn--delete";
            deleteBtn.innerHTML = ICON_DELETE;
            deleteBtn.title = i18n.t("tools.deleteAnnotation");
            deleteBtn.setAttribute("aria-label", i18n.t("tools.deleteAnnotation"));
            deleteBtn.disabled = true;
            deleteBtn.addEventListener("click", () => {
                const sel = store.getState().selectedAnnotation;
                if (sel) {
                    store.dispatch({
                        type: "REMOVE_ANNOTATION",
                        pageIndex: sel.pageIndex,
                        annotationIndex: sel.annotationIndex,
                    });
                }
            });
            optionsSection.appendChild(deleteBtn);
            return;
        }
        const supported = TOOL_OPTIONS_CONFIG[subTool];
        if (!supported || supported.length === 0)
            return;
        for (const optKey of supported) {
            if (optKey === "strokeColor") {
                if (!strokeColorSelect) {
                    strokeColorSelect = createColorSelect({
                        variant: "stroke",
                        label: i18n.t("tools.strokeColor"),
                        noneLabel: i18n.t("tools.noFill"),
                        onSelect: () => closeAllPanels(),
                        onChange: (color) => dispatchOpt(store, "strokeColor", color),
                    });
                    containerRef.appendChild(strokeColorSelect.panel);
                    strokeColorSelect.el.addEventListener("click", (e) => {
                        e.stopPropagation();
                        openPanelAt("strokeColor", strokeColorSelect.el);
                    });
                }
                optionsSection.appendChild(strokeColorSelect.el);
            }
            else if (optKey === "fillColor") {
                if (!fillColorSelect) {
                    fillColorSelect = createColorSelect({
                        variant: "fill",
                        label: i18n.t("tools.fillColor"),
                        noneLabel: i18n.t("tools.noFill"),
                        onSelect: () => closeAllPanels(),
                        onChange: (color) => dispatchOpt(store, "fillColor", color),
                    });
                    containerRef.appendChild(fillColorSelect.panel);
                    fillColorSelect.el.addEventListener("click", (e) => {
                        e.stopPropagation();
                        openPanelAt("fillColor", fillColorSelect.el);
                    });
                }
                optionsSection.appendChild(fillColorSelect.el);
            }
            else if (optKey === "strokeWidth") {
                if (!strokeWidthInput) {
                    strokeWidthInput = createNumberInput({
                        min: 0.5,
                        max: 12,
                        step: 0.5,
                        value: opts.strokeWidth,
                        icon: ICON_STROKE_WIDTH,
                        formatValue: (v) => `${v}pt`,
                        parseValue: (s) => {
                            const n = parseFloat(s.replace(/pt$/i, ""));
                            return isNaN(n) ? null : n;
                        },
                        label: i18n.t("tools.strokeWidth"),
                        onChange: (v) => dispatchOpt(store, "strokeWidth", v),
                    });
                    containerRef.appendChild(strokeWidthInput.panel);
                    strokeWidthInput.el.addEventListener("click", (e) => {
                        e.stopPropagation();
                        openPanelAt("strokeWidth", strokeWidthInput.el);
                    });
                }
                optionsSection.appendChild(strokeWidthInput.el);
            }
            else if (optKey === "opacity") {
                if (!opacityInput) {
                    opacityInput = createNumberInput({
                        min: 10,
                        max: 100,
                        step: 10,
                        value: Math.round(opts.opacity * 100),
                        icon: ICON_OPACITY,
                        formatValue: (v) => `${Math.round(v)}%`,
                        parseValue: (s) => {
                            const n = parseFloat(s.replace(/%$/i, ""));
                            return isNaN(n) ? null : n;
                        },
                        label: i18n.t("tools.opacity"),
                        onChange: (v) => dispatchOpt(store, "opacity", v / 100),
                    });
                    containerRef.appendChild(opacityInput.panel);
                    opacityInput.el.addEventListener("click", (e) => {
                        e.stopPropagation();
                        openPanelAt("opacity", opacityInput.el);
                    });
                }
                optionsSection.appendChild(opacityInput.el);
            }
            else if (optKey === "fontSize") {
                if (!fontSizeInput) {
                    fontSizeInput = createNumberInput({
                        min: 8,
                        max: 144,
                        step: 1,
                        value: opts.fontSize,
                        icon: ICON_FONT_SIZE,
                        formatValue: (v) => `${v}pt`,
                        parseValue: (s) => {
                            const n = parseFloat(s.replace(/pt$/i, ""));
                            return isNaN(n) ? null : n;
                        },
                        label: i18n.t("tools.fontSize"),
                        onChange: (v) => dispatchOpt(store, "fontSize", v),
                    });
                    containerRef.appendChild(fontSizeInput.panel);
                    fontSizeInput.el.addEventListener("click", (e) => {
                        e.stopPropagation();
                        openPanelAt("fontSize", fontSizeInput.el);
                    });
                }
                optionsSection.appendChild(fontSizeInput.el);
            }
            else if (optKey === "lineStyle") {
                lineStyleTrigger = document.createElement("button");
                lineStyleTrigger.className =
                    "udoc-subtoolbar__dropdown-trigger udoc-subtoolbar__dropdown-trigger--icon";
                lineStyleTrigger.title = i18n.t("tools.lineStyle");
                const arrow = document.createElement("span");
                arrow.className = "udoc-subtoolbar__dropdown-arrow";
                arrow.textContent = "\u25BE";
                lineStyleTrigger.appendChild(arrow);
                lineStyleTrigger.addEventListener("click", (e) => {
                    e.stopPropagation();
                    openPanelAt("lineStyle", lineStyleTrigger);
                });
                optionsSection.appendChild(lineStyleTrigger);
            }
            else if (optKey === "arrowHead") {
                arrowHeadTrigger = document.createElement("button");
                arrowHeadTrigger.className =
                    "udoc-subtoolbar__dropdown-trigger udoc-subtoolbar__dropdown-trigger--icon";
                arrowHeadTrigger.title = i18n.t("tools.arrowHeadEnd");
                const arrow = document.createElement("span");
                arrow.className = "udoc-subtoolbar__dropdown-arrow";
                arrow.textContent = "\u25BE";
                arrowHeadTrigger.appendChild(arrow);
                arrowHeadTrigger.addEventListener("click", (e) => {
                    e.stopPropagation();
                    openPanelAt("arrowHead", arrowHeadTrigger);
                });
                optionsSection.appendChild(arrowHeadTrigger);
            }
        }
    }
    // ====================================================================
    // buildControlsForAnnotation — select mode with a selected annotation
    // ====================================================================
    function buildControlsForAnnotation(editableKeys, opts, store, i18n) {
        optionsSection.innerHTML = "";
        lineStyleTrigger = null;
        arrowHeadTrigger = null;
        deleteBtn = null;
        // Build property controls based on the annotation's editable keys
        for (const optKey of editableKeys) {
            if (optKey === "strokeColor") {
                if (!strokeColorSelect) {
                    strokeColorSelect = createColorSelect({
                        variant: "stroke",
                        label: i18n.t("tools.strokeColor"),
                        noneLabel: i18n.t("tools.noFill"),
                        onSelect: () => closeAllPanels(),
                        onChange: (color) => dispatchOpt(store, "strokeColor", color),
                    });
                    containerRef.appendChild(strokeColorSelect.panel);
                    strokeColorSelect.el.addEventListener("click", (e) => {
                        e.stopPropagation();
                        openPanelAt("strokeColor", strokeColorSelect.el);
                    });
                }
                optionsSection.appendChild(strokeColorSelect.el);
            }
            else if (optKey === "fillColor") {
                if (!fillColorSelect) {
                    fillColorSelect = createColorSelect({
                        variant: "fill",
                        label: i18n.t("tools.fillColor"),
                        noneLabel: i18n.t("tools.noFill"),
                        onSelect: () => closeAllPanels(),
                        onChange: (color) => dispatchOpt(store, "fillColor", color),
                    });
                    containerRef.appendChild(fillColorSelect.panel);
                    fillColorSelect.el.addEventListener("click", (e) => {
                        e.stopPropagation();
                        openPanelAt("fillColor", fillColorSelect.el);
                    });
                }
                optionsSection.appendChild(fillColorSelect.el);
            }
            else if (optKey === "strokeWidth") {
                if (!strokeWidthInput) {
                    strokeWidthInput = createNumberInput({
                        min: 0.5,
                        max: 12,
                        step: 0.5,
                        value: opts.strokeWidth,
                        icon: ICON_STROKE_WIDTH,
                        formatValue: (v) => `${v}pt`,
                        parseValue: (s) => {
                            const n = parseFloat(s.replace(/pt$/i, ""));
                            return isNaN(n) ? null : n;
                        },
                        label: i18n.t("tools.strokeWidth"),
                        onChange: (v) => dispatchOpt(store, "strokeWidth", v),
                    });
                    containerRef.appendChild(strokeWidthInput.panel);
                    strokeWidthInput.el.addEventListener("click", (e) => {
                        e.stopPropagation();
                        openPanelAt("strokeWidth", strokeWidthInput.el);
                    });
                }
                optionsSection.appendChild(strokeWidthInput.el);
            }
            else if (optKey === "opacity") {
                if (!opacityInput) {
                    opacityInput = createNumberInput({
                        min: 10,
                        max: 100,
                        step: 10,
                        value: Math.round(opts.opacity * 100),
                        icon: ICON_OPACITY,
                        formatValue: (v) => `${Math.round(v)}%`,
                        parseValue: (s) => {
                            const n = parseFloat(s.replace(/%$/i, ""));
                            return isNaN(n) ? null : n;
                        },
                        label: i18n.t("tools.opacity"),
                        onChange: (v) => dispatchOpt(store, "opacity", v / 100),
                    });
                    containerRef.appendChild(opacityInput.panel);
                    opacityInput.el.addEventListener("click", (e) => {
                        e.stopPropagation();
                        openPanelAt("opacity", opacityInput.el);
                    });
                }
                optionsSection.appendChild(opacityInput.el);
            }
            else if (optKey === "lineStyle") {
                lineStyleTrigger = document.createElement("button");
                lineStyleTrigger.className =
                    "udoc-subtoolbar__dropdown-trigger udoc-subtoolbar__dropdown-trigger--icon";
                lineStyleTrigger.title = i18n.t("tools.lineStyle");
                const arrow = document.createElement("span");
                arrow.className = "udoc-subtoolbar__dropdown-arrow";
                arrow.textContent = "\u25BE";
                lineStyleTrigger.appendChild(arrow);
                lineStyleTrigger.addEventListener("click", (e) => {
                    e.stopPropagation();
                    openPanelAt("lineStyle", lineStyleTrigger);
                });
                optionsSection.appendChild(lineStyleTrigger);
            }
            else if (optKey === "arrowHead") {
                arrowHeadTrigger = document.createElement("button");
                arrowHeadTrigger.className =
                    "udoc-subtoolbar__dropdown-trigger udoc-subtoolbar__dropdown-trigger--icon";
                arrowHeadTrigger.title = i18n.t("tools.arrowHeadEnd");
                const arrow = document.createElement("span");
                arrow.className = "udoc-subtoolbar__dropdown-arrow";
                arrow.textContent = "\u25BE";
                arrowHeadTrigger.appendChild(arrow);
                arrowHeadTrigger.addEventListener("click", (e) => {
                    e.stopPropagation();
                    openPanelAt("arrowHead", arrowHeadTrigger);
                });
                optionsSection.appendChild(arrowHeadTrigger);
            }
        }
        // Always add delete button at the end
        deleteBtn = document.createElement("button");
        deleteBtn.className = "udoc-subtoolbar__btn udoc-subtoolbar__btn--delete";
        deleteBtn.innerHTML = ICON_DELETE;
        deleteBtn.title = i18n.t("tools.deleteAnnotation");
        deleteBtn.setAttribute("aria-label", i18n.t("tools.deleteAnnotation"));
        deleteBtn.addEventListener("click", () => {
            const sel = store.getState().selectedAnnotation;
            if (sel) {
                store.dispatch({
                    type: "REMOVE_ANNOTATION",
                    pageIndex: sel.pageIndex,
                    annotationIndex: sel.annotationIndex,
                });
            }
        });
        optionsSection.appendChild(deleteBtn);
    }
    // ====================================================================
    // updateValues — called on EVERY state change, updates in-place
    // ====================================================================
    function updateValues(opts, store, i18n) {
        // Color selects
        strokeColorSelect?.update(opts.strokeColor);
        fillColorSelect?.update(opts.fillColor);
        // Number inputs
        strokeWidthInput?.update(opts.strokeWidth);
        opacityInput?.update(Math.round(opts.opacity * 100));
        fontSizeInput?.update(opts.fontSize);
        // Line style trigger + panel
        if (lineStyleTrigger) {
            const def = LINE_STYLE_DEFS.find((s) => s.id === opts.lineStyle) ?? LINE_STYLE_DEFS[0];
            const arrowEl = lineStyleTrigger.lastElementChild;
            lineStyleTrigger.innerHTML = def.icon;
            if (arrowEl)
                lineStyleTrigger.appendChild(arrowEl);
            lineStyleTrigger.setAttribute("aria-label", `${i18n.t("tools.lineStyle")}: ${i18n.t(def.labelKey)}`);
        }
        rebuildLineStylePanel(opts.lineStyle, store, i18n);
        // Arrow head trigger + panel
        if (arrowHeadTrigger) {
            const endDef = ARROW_HEAD_DEFS.find((a) => a.id === opts.arrowHeadEnd) ?? ARROW_HEAD_DEFS[0];
            const arrowEl = arrowHeadTrigger.lastElementChild;
            arrowHeadTrigger.innerHTML = endDef.icon;
            if (arrowEl)
                arrowHeadTrigger.appendChild(arrowEl);
        }
        rebuildArrowHeadPanel(opts.arrowHeadStart, opts.arrowHeadEnd, store, i18n);
    }
    // ---- Line style panel ----
    function rebuildLineStylePanel(current, store, i18n) {
        lineStylePanel.innerHTML = "";
        for (const def of LINE_STYLE_DEFS) {
            const item = document.createElement("button");
            item.className = "udoc-linestyle-panel__item";
            if (current === def.id)
                item.classList.add("udoc-linestyle-panel__item--active");
            const icon = document.createElement("span");
            icon.className = "udoc-linestyle-panel__icon";
            icon.innerHTML = def.icon;
            const label = document.createElement("span");
            label.className = "udoc-linestyle-panel__label";
            label.textContent = i18n.t(def.labelKey);
            item.append(icon, label);
            item.title = i18n.t(def.labelKey);
            item.addEventListener("click", (e) => {
                e.stopPropagation();
                closeAllPanels();
                dispatchOpt(store, "lineStyle", def.id);
            });
            lineStylePanel.appendChild(item);
        }
    }
    // ---- Arrow head panel ----
    function rebuildArrowHeadPanel(startVal, endVal, store, i18n) {
        arrowHeadPanel.innerHTML = "";
        for (const [rowKey, rowLabel, currentVal] of [
            ["arrowHeadStart", i18n.t("tools.arrowHeadStart"), startVal],
            ["arrowHeadEnd", i18n.t("tools.arrowHeadEnd"), endVal],
        ]) {
            const row = document.createElement("div");
            row.className = "udoc-arrowhead-panel__row";
            const lbl = document.createElement("span");
            lbl.className = "udoc-arrowhead-panel__row-label";
            lbl.textContent = rowLabel;
            row.appendChild(lbl);
            for (const def of ARROW_HEAD_DEFS) {
                const btn = document.createElement("button");
                btn.className = "udoc-arrowhead-panel__btn";
                if (currentVal === def.id)
                    btn.classList.add("udoc-arrowhead-panel__btn--active");
                btn.innerHTML = def.icon;
                btn.title = i18n.t(def.labelKey);
                if (rowKey === "arrowHeadStart")
                    btn.style.transform = "scaleX(-1)";
                btn.addEventListener("click", (e) => {
                    e.stopPropagation();
                    dispatchOpt(store, rowKey, def.id);
                });
                row.appendChild(btn);
            }
            arrowHeadPanel.appendChild(row);
        }
    }
    // ---- Destroy ----
    function destroy() {
        if (unsubRender)
            unsubRender();
        document.removeEventListener("click", onDocumentClick);
        currentToolBtns.clear();
        strokeColorSelect?.destroy();
        fillColorSelect?.destroy();
        strokeWidthInput?.destroy();
        opacityInput?.destroy();
        fontSizeInput?.destroy();
        lineStylePanel.remove();
        arrowHeadPanel.remove();
        el.remove();
    }
    return { el, mount, destroy };
}
//# sourceMappingURL=SubToolbar.js.map