import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
import React from 'react';
import { RangeInput, Button, TextArea } from '../core/LocalUI.js';
import { DEFAULT_ADJUSTMENTS } from './photoFilters.js';
import { EMOJI_CATALOG, SHAPE_CATALOG, FRAME_CATALOG } from './photoOverlays.js';
import { TAB_DEFS, ADJUSTMENT_SLIDERS, ASPECT_RATIOS } from './photoEditorTypes.js';
import FilterThumb from './FilterThumb.js';
import cs from './PhotoEditor.module.css.js';

// ── Overlay Toolbar (extracted from the original inline function) ──
const OverlayToolbar = ({ api }) => {
    var _a, _b, _c, _d, _e;
    const { selectedOverlay, accent, t, updateOverlay, pushHistory, moveOverlayBack, moveOverlayForward, deleteOverlay } = api;
    if (!selectedOverlay)
        return null;
    return (jsxs("div", { className: cs.overlayToolbar, children: [jsxs("span", { className: cs.overlayToolbarLabel, children: [jsx("i", { className: "fa fa-object-group me-1" }), "Warstwa"] }), jsx(RangeInput, { min: 0, max: 100, value: ((_a = selectedOverlay.opacity) !== null && _a !== void 0 ? _a : 1) * 100, onChange: e => updateOverlay(selectedOverlay.id, { opacity: Number(e.target.value) / 100 }), onMouseUp: pushHistory, accentColor: accent, style: { maxWidth: 70 }, title: t("photoEditor.opacity", "Opacity") }), jsxs("span", { className: cs.sliderValueSm, style: { color: accent }, children: [Math.round(((_b = selectedOverlay.opacity) !== null && _b !== void 0 ? _b : 1) * 100), "%"] }), selectedOverlay.type !== "drawing" && selectedOverlay.type !== "frame" && (jsxs(Fragment, { children: [jsx(RangeInput, { min: 20, max: 500, value: ((_c = selectedOverlay.scaleX) !== null && _c !== void 0 ? _c : 1) * 100, onChange: e => {
                            const s = Number(e.target.value) / 100;
                            updateOverlay(selectedOverlay.id, { scaleX: s, scaleY: s });
                        }, onMouseUp: pushHistory, accentColor: accent, style: { maxWidth: 60 }, title: "Skala" }), jsxs("span", { className: cs.sliderValueSm, style: { color: "#aaa" }, children: [Math.round(((_d = selectedOverlay.scaleX) !== null && _d !== void 0 ? _d : 1) * 100), "%"] })] })), selectedOverlay.type !== "drawing" && selectedOverlay.type !== "frame" && (jsx(RangeInput, { min: -180, max: 180, value: (_e = selectedOverlay.rotation) !== null && _e !== void 0 ? _e : 0, onChange: e => updateOverlay(selectedOverlay.id, { rotation: Number(e.target.value) }), onMouseUp: pushHistory, accentColor: accent, style: { maxWidth: 60 }, title: t("photoEditor.rotation", "Rotation") })), jsx(Button, { variant: "dark", size: "sm", onClick: () => moveOverlayBack(selectedOverlay.id), title: t("photoEditor.moveBack", "Move back"), className: cs.overlayToolbarBtn, children: jsx("i", { className: "fa fa-arrow-down" }) }), jsx(Button, { variant: "dark", size: "sm", onClick: () => moveOverlayForward(selectedOverlay.id), title: t("photoEditor.moveForward", "Move forward"), className: cs.overlayToolbarBtn, children: jsx("i", { className: "fa fa-arrow-up" }) }), jsx(Button, { variant: "outline-danger", size: "sm", onClick: () => deleteOverlay(selectedOverlay.id), className: cs.overlayToolbarBtn, children: jsx("i", { className: "fa fa-trash" }) })] }));
};
// ── Left Panel ──
const PhotoEditorLeftPanel = React.memo(({ api }) => {
    var _a;
    const { t, accent, accentDim, activeTab, setActiveTab, setCropMode, 
    // Filters
    selectedFilter, setSelectedFilter, filterIntensity, setFilterIntensity, filterCategory, setFilterCategory, filteredList, generateThumbnail, pushHistory, 
    // Adjustments
    adjustments, handleAdjChange, handleAdjChangeEnd, 
    // Crop
    image, cropRect, setCropRect, cropAspect, setCropAspect, 
    // Transform
    rotation, setRotation, flipH, setFlipH, flipV, setFlipV, zoom, setZoom, 
    // Overlays
    overlays, setOverlays, selectedOverlayId, setSelectedOverlayId, addOverlay, deleteOverlay, mainCanvasRef, 
    // Stickers / Emoji
    emojiCat, setEmojiCat, 
    // Text
    textDraft, setTextDraft, textColor, setTextColor, textBold, setTextBold, textItalic, setTextItalic, textOutline, setTextOutline, textFontSize, setTextFontSize, textBg, setTextBg, selectedOverlay, updateOverlay, 
    // Shapes
    shapeStroke, setShapeStroke, shapeFill, setShapeFill, shapeStrokeW, setShapeStrokeW, 
    // Frame
    frameColor, setFrameColor, frameThick, setFrameThick, 
    // Drawing
    drawColor, setDrawColor, drawWidth, setDrawWidth, drawingOverlayRef, 
    // Creators
    createEmojiOverlay, createTextOverlay, createShapeOverlay, createFrameOverlay, } = api;
    return (jsxs("div", { className: cs.leftPanel, children: [jsx("div", { className: cs.tabBar, children: TAB_DEFS.map(tab => (jsxs("button", { onClick: () => {
                        setActiveTab(tab.key);
                        if (tab.key === "crop")
                            setCropMode(true);
                        else
                            setCropMode(false);
                    }, title: tab.label, className: activeTab === tab.key ? cs.tabButtonActive : cs.tabButton, style: {
                        color: activeTab === tab.key ? accent : undefined,
                        borderBottomColor: activeTab === tab.key ? accent : undefined,
                    }, children: [jsx("i", { className: `fa ${tab.icon}`, style: { fontSize: 14 } }), tab.label] }, tab.key))) }), jsxs("div", { className: cs.panelContent, children: [activeTab === "filters" && (jsxs(Fragment, { children: [jsx("div", { className: cs.pillRow, children: [
                                    { key: "all", label: "All" },
                                    { key: "color", label: "Color" },
                                    { key: "light", label: "Light" },
                                    { key: "vintage", label: "Vintage" },
                                    { key: "artistic", label: "Artistic" },
                                    { key: "fun", label: "Fun" },
                                ].map(cat => (jsx("button", { onClick: () => setFilterCategory(cat.key), className: filterCategory === cat.key ? cs.pillActive : cs.pill, style: {
                                        borderColor: filterCategory === cat.key ? accent : undefined,
                                        background: filterCategory === cat.key ? accentDim : undefined,
                                    }, children: cat.label }, cat.key))) }), jsx("div", { className: cs.filterGrid, children: filteredList.map(filter => (jsx(FilterThumb, { filter: filter, selected: selectedFilter === filter.id, accent: accent, onSelect: () => {
                                        setSelectedFilter(filter.id);
                                        pushHistory();
                                    }, generateThumbnail: generateThumbnail }, filter.id))) }), selectedFilter !== "none" && (jsxs("div", { className: cs.intensitySection, children: [jsxs("div", { className: cs.intensityHeader, children: [jsxs("span", { className: cs.sliderLabel, children: [jsx("i", { className: "fa fa-tachometer me-1" }), "Intensity"] }), jsxs("span", { className: cs.sliderValue, style: { color: accent }, children: [Math.round(filterIntensity * 100), "%"] })] }), jsx(RangeInput, { min: 0, max: 100, value: filterIntensity * 100, onChange: e => setFilterIntensity(Number(e.target.value) / 100), onMouseUp: () => pushHistory(), accentColor: accent })] }))] })), activeTab === "adjust" && (jsxs("div", { className: cs.adjustColumn, children: [ADJUSTMENT_SLIDERS.map(sl => (jsxs("div", { children: [jsxs("div", { className: cs.adjustHeader, children: [jsxs("span", { className: cs.sliderLabel, children: [jsx("i", { className: `fa ${sl.icon} me-1`, style: { width: 14, textAlign: "center" } }), sl.label] }), jsx("span", { className: cs.adjustValue, style: { color: adjustments[sl.key] !== 0 ? accent : "#666" }, onClick: () => handleAdjChange(sl.key, sl.key === "blur" ? 0 : 0), title: "Reset", children: adjustments[sl.key] })] }), jsx(RangeInput, { min: sl.min, max: sl.max, value: adjustments[sl.key], onChange: e => handleAdjChange(sl.key, Number(e.target.value)), onMouseUp: handleAdjChangeEnd, accentColor: accent })] }, sl.key))), jsxs(Button, { variant: "outline-secondary", size: "sm", className: "mt-2", onClick: () => {
                                    handleAdjChange("brightness", 0);
                                    const defaults = { ...DEFAULT_ADJUSTMENTS };
                                    for (const key of Object.keys(defaults)) {
                                        handleAdjChange(key, defaults[key]);
                                    }
                                    pushHistory();
                                }, children: [jsx("i", { className: "fa fa-refresh me-1" }), "Resetuj korekty"] })] })), activeTab === "crop" && (jsxs("div", { children: [jsxs("div", { className: cs.cropInfo, children: [jsx("i", { className: "fa fa-info-circle me-1" }), "Drag corners or edges to crop the photo."] }), jsx("div", { className: cs.cropAspectLabel, children: "Aspect ratio" }), jsx("div", { className: cs.cropAspectRow, children: ASPECT_RATIOS.map(ar => (jsx("button", { onClick: () => {
                                        setCropAspect(ar.value);
                                        if (ar.value && cropRect && image) {
                                            let newW = cropRect.w;
                                            let newH = cropRect.w / ar.value;
                                            if (newH > image.naturalHeight) {
                                                newH = image.naturalHeight;
                                                newW = newH * ar.value;
                                            }
                                            setCropRect({
                                                x: Math.max(0, cropRect.x),
                                                y: Math.max(0, cropRect.y),
                                                w: Math.min(newW, image.naturalWidth),
                                                h: Math.min(newH, image.naturalHeight),
                                            });
                                        }
                                    }, className: cropAspect === ar.value ? cs.pillCropActive : cs.pillCrop, style: {
                                        borderColor: cropAspect === ar.value ? accent : undefined,
                                        background: cropAspect === ar.value ? accentDim : undefined,
                                    }, children: ar.label }, ar.label))) }), jsxs(Button, { variant: "outline-secondary", size: "sm", className: "mt-3", onClick: () => {
                                    if (image) {
                                        setCropRect({ x: 0, y: 0, w: image.naturalWidth, h: image.naturalHeight });
                                        setCropAspect(null);
                                        pushHistory();
                                    }
                                }, children: [jsx("i", { className: "fa fa-expand me-1" }), "Resetuj kadrowanie"] })] })), activeTab === "transform" && (jsxs("div", { children: [jsx("div", { className: cs.sectionTitleMb8, children: "Rotation" }), jsxs("div", { className: cs.transformRow, children: [jsxs(Button, { variant: "dark", size: "sm", onClick: () => { setRotation((rotation - 90 + 360) % 360); pushHistory(); }, children: [jsx("i", { className: "fa fa-rotate-left me-1" }), " -90\u00B0"] }), jsxs(Button, { variant: "dark", size: "sm", onClick: () => { setRotation((rotation + 90) % 360); pushHistory(); }, children: [jsx("i", { className: "fa fa-rotate-right me-1" }), " +90\u00B0"] }), jsx(Button, { variant: "dark", size: "sm", onClick: () => { setRotation(0); pushHistory(); }, children: "0\u00B0" })] }), jsx("div", { className: cs.sectionTitleMb8, children: "Flip" }), jsxs("div", { className: cs.transformRow, children: [jsxs(Button, { variant: flipH ? "outline-info" : "dark", size: "sm", onClick: () => { setFlipH(!flipH); pushHistory(); }, children: [jsx("i", { className: "fa fa-arrows-h me-1" }), " Horizontal"] }), jsxs(Button, { variant: flipV ? "outline-info" : "dark", size: "sm", onClick: () => { setFlipV(!flipV); pushHistory(); }, children: [jsx("i", { className: "fa fa-arrows-v me-1" }), " Vertical"] })] }), jsx("div", { className: cs.sectionTitleMb8, children: "Preview zoom" }), jsxs("div", { className: cs.transformZoomRow, children: [jsx(RangeInput, { min: 50, max: 300, value: zoom * 100, onChange: e => setZoom(Number(e.target.value) / 100), accentColor: accent }), jsxs("span", { className: cs.transformZoomValue, style: { color: accent }, children: [Math.round(zoom * 100), "%"] })] }), jsxs("div", { className: cs.transformInfo, children: [jsxs("div", { children: [jsx("strong", { children: "Rotation:" }), " ", rotation, "\u00B0"] }), jsxs("div", { children: [jsx("strong", { children: "Flip H:" }), " ", flipH ? "Yes" : "No"] }), jsxs("div", { children: [jsx("strong", { children: "Flip V:" }), " ", flipV ? "Yes" : "No"] }), cropRect && (jsxs("div", { children: [jsx("strong", { children: "Crop:" }), " ", Math.round(cropRect.w), " \u00D7 ", Math.round(cropRect.h), " (", "x:", Math.round(cropRect.x), ", y:", Math.round(cropRect.y), ")"] }))] })] })), activeTab === "stickers" && (jsxs("div", { children: [jsx(OverlayToolbar, { api: api }), jsxs("div", { className: cs.sectionTitle, children: [jsx("i", { className: "fa fa-smile-o me-1" }), " Stickers / Emoji"] }), jsx("div", { className: cs.pillRowGap3, children: EMOJI_CATALOG.map(cat => (jsxs("button", { onClick: () => setEmojiCat(cat.id), className: emojiCat === cat.id ? cs.pillEmojiActive : cs.pillEmoji, style: {
                                        borderColor: emojiCat === cat.id ? accent : undefined,
                                        background: emojiCat === cat.id ? accentDim : undefined,
                                    }, children: [cat.icon, " ", cat.label] }, cat.id))) }), jsx("div", { className: cs.emojiGrid, children: (_a = EMOJI_CATALOG.find(c => c.id === emojiCat)) === null || _a === void 0 ? void 0 : _a.emojis.map((em, idx) => (jsx("button", { onClick: () => {
                                        var _a, _b, _c, _d;
                                        const cw = (_b = (_a = mainCanvasRef.current) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 400;
                                        const ch = (_d = (_c = mainCanvasRef.current) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : 400;
                                        addOverlay(createEmojiOverlay(em, cw, ch));
                                    }, className: cs.emojiBtn, title: em, children: em }, idx))) }), overlays.length > 0 && (jsxs("div", { className: cs.overlaySection, children: [jsxs("div", { className: cs.overlaySectionTitle, children: ["Warstwy (", overlays.length, ")"] }), overlays.map(ov => (jsxs("div", { onClick: () => setSelectedOverlayId(ov.id), className: cs.overlayItem, style: { background: selectedOverlayId === ov.id ? accentDim : undefined }, children: [jsx("span", { className: cs.overlayIcon, children: ov.type === "emoji" ? ov.emoji
                                                    : ov.type === "text" ? "T"
                                                        : ov.type === "shape" ? "◆"
                                                            : ov.type === "drawing" ? "✏"
                                                                : "▢" }), jsx("span", { className: cs.overlayName, children: ov.type === "text" ? ov.text.slice(0, 20)
                                                    : ov.type === "emoji" ? "Emoji"
                                                        : ov.type === "shape" ? ov.shapeKind
                                                            : ov.type === "drawing" ? `Rysunek (${ov.strokes.length})`
                                                                : ov.type === "frame" ? ov.frameStyle
                                                                    : "" }), jsx("button", { onClick: e => { e.stopPropagation(); deleteOverlay(ov.id); }, className: cs.overlayDeleteBtn, children: "\u2715" })] }, ov.id)))] }))] })), activeTab === "text" && (jsxs("div", { children: [jsx(OverlayToolbar, { api: api }), jsxs("div", { className: cs.sectionTitleMb8, children: [jsx("i", { className: "fa fa-font me-1" }), " ", t("photoEditor.addCaption", "Add caption")] }), jsx(TextArea, { rows: 2, value: textDraft, onChange: e => setTextDraft(e.target.value), placeholder: "Wpisz tekst...", className: cs.textArea }), jsxs("div", { className: cs.textBtnRow, children: [jsx(Button, { variant: textBold ? "light" : "dark", size: "sm", onClick: () => setTextBold(!textBold), title: "Bold", className: cs.textFormatBtn, style: { fontWeight: 700 }, children: "B" }), jsx(Button, { variant: textItalic ? "light" : "dark", size: "sm", onClick: () => setTextItalic(!textItalic), title: "Italic", className: cs.textFormatBtn, style: { fontStyle: "italic" }, children: "I" }), jsx(Button, { variant: textOutline ? "light" : "dark", size: "sm", onClick: () => setTextOutline(!textOutline), title: "Kontur", className: cs.textFormatBtn, children: "O" }), jsx(Button, { variant: textBg ? "light" : "dark", size: "sm", onClick: () => setTextBg(!textBg), title: t("photoEditor.background", "Background"), className: cs.textFormatBtn, children: jsx("i", { className: "fa fa-square" }) }), jsx("input", { type: "color", value: textColor, onChange: e => setTextColor(e.target.value), className: cs.colorInputLg, title: "Kolor tekstu" })] }), jsxs("div", { className: cs.sliderRow, children: [jsx("span", { className: cs.sliderLabel, children: "Rozmiar:" }), jsx(RangeInput, { min: 12, max: 120, value: textFontSize, onChange: e => setTextFontSize(Number(e.target.value)), accentColor: accent, style: { flex: 1 } }), jsxs("span", { className: cs.sliderValue, style: { color: accent }, children: [textFontSize, "px"] })] }), jsxs(Button, { size: "sm", className: cs.accentBtn, style: { background: accent, borderColor: accent }, disabled: !textDraft.trim(), onClick: () => {
                                    const ov = createTextOverlay(textDraft);
                                    ov.color = textColor;
                                    ov.bold = textBold;
                                    ov.italic = textItalic;
                                    ov.fontSize = textFontSize;
                                    ov.outlineColor = textOutline ? "#000000" : null;
                                    ov.outlineWidth = textOutline ? 2 : 0;
                                    ov.background = textBg ? "rgba(0,0,0,0.5)" : null;
                                    addOverlay(ov);
                                }, children: [jsx("i", { className: "fa fa-plus me-1" }), " ", t("photoEditor.addText", "Add text")] }), (selectedOverlay === null || selectedOverlay === void 0 ? void 0 : selectedOverlay.type) === "text" && (jsxs("div", { className: cs.editSelectedSection, children: [jsx("div", { className: cs.editSelectedLabel, children: t("photoEditor.editSelectedText", "Edit selected text:") }), jsx(TextArea, { rows: 2, value: selectedOverlay.text, onChange: e => updateOverlay(selectedOverlay.id, { text: e.target.value }), onBlur: pushHistory, className: cs.textAreaSm }), jsxs("div", { className: cs.textGapRow, children: [jsx("input", { type: "color", value: selectedOverlay.color, onChange: e => { updateOverlay(selectedOverlay.id, { color: e.target.value }); }, onBlur: pushHistory, className: cs.colorInput, "aria-label": t("photoEditor.textColor", "Text overlay color") }), jsx(Button, { variant: selectedOverlay.bold ? "light" : "dark", size: "sm", onClick: () => { updateOverlay(selectedOverlay.id, { bold: !selectedOverlay.bold }); pushHistory(); }, className: cs.textFormatBtnSm, style: { fontWeight: 700 }, children: "B" }), jsx(Button, { variant: selectedOverlay.italic ? "light" : "dark", size: "sm", onClick: () => { updateOverlay(selectedOverlay.id, { italic: !selectedOverlay.italic }); pushHistory(); }, className: cs.textFormatBtnSm, style: { fontStyle: "italic" }, children: "I" })] })] }))] })), activeTab === "shapes" && (jsxs("div", { children: [jsx(OverlayToolbar, { api: api }), jsxs("div", { className: cs.sectionTitle, children: [jsx("i", { className: "fa fa-star me-1" }), " Shapes"] }), jsxs("div", { className: cs.shapeColorRow, children: [jsx("span", { className: cs.shapeColorLabel, children: "Stroke:" }), jsx("input", { type: "color", value: shapeStroke, onChange: e => setShapeStroke(e.target.value), className: cs.colorInput, title: "Stroke color" }), jsx("span", { className: cs.shapeColorLabelMl, children: "Fill:" }), jsx("input", { type: "color", value: shapeFill || "#ffffff", onChange: e => setShapeFill(e.target.value), className: cs.colorInput, title: t("photoEditor.fillColor", "Fill color") }), jsx(Button, { variant: shapeFill ? "light" : "dark", size: "sm", onClick: () => setShapeFill(shapeFill ? "" : "#ffffff"), className: cs.shapeFillToggle, children: shapeFill ? "Off" : "On" })] }), jsxs("div", { className: cs.sliderRow, children: [jsx("span", { className: cs.sliderLabel, children: "Width:" }), jsx(RangeInput, { min: 1, max: 20, value: shapeStrokeW, onChange: e => setShapeStrokeW(Number(e.target.value)), accentColor: accent, style: { flex: 1 } }), jsxs("span", { className: cs.sliderValue, style: { color: accent }, children: [shapeStrokeW, "px"] })] }), jsx("div", { className: cs.shapeGrid, children: SHAPE_CATALOG.map(sh => (jsx("button", { title: sh.label, onClick: () => {
                                        const ov = createShapeOverlay(sh.id);
                                        ov.strokeColor = shapeStroke;
                                        ov.fillColor = shapeFill || null;
                                        ov.strokeWidth = shapeStrokeW;
                                        addOverlay(ov);
                                    }, className: cs.shapeBtn, children: sh.icon }, sh.id))) }), jsxs("div", { className: cs.sectionTitle, children: [jsx("i", { className: "fa fa-picture-o me-1" }), " Ramki"] }), jsxs("div", { className: cs.frameColorRow, children: [jsx("input", { type: "color", value: frameColor, onChange: e => setFrameColor(e.target.value), className: cs.colorInput, "aria-label": t("photoEditor.frameColor", "Frame color") }), jsxs("div", { className: cs.frameThicknessWrap, children: [jsx("span", { className: cs.sliderLabel, children: "Grub.:" }), jsx(RangeInput, { min: 1, max: 10, value: frameThick, onChange: e => setFrameThick(Number(e.target.value)), accentColor: accent, style: { flex: 1 } }), jsx("span", { className: cs.frameThicknessValue, style: { color: accent }, children: frameThick })] })] }), jsxs("div", { className: cs.frameGrid, children: [FRAME_CATALOG.map(fr => (jsx("button", { title: fr.label, onClick: () => {
                                            setOverlays((prev) => prev.filter(o => o.type !== "frame"));
                                            const ov = createFrameOverlay(fr.id, frameColor);
                                            ov.thickness = frameThick / 100;
                                            addOverlay(ov);
                                        }, className: cs.frameBtn, children: fr.icon }, fr.id))), jsx("button", { title: t("photoEditor.removeFrame", "Remove frame"), onClick: () => { setOverlays((prev) => prev.filter(o => o.type !== "frame")); pushHistory(); }, className: cs.removeFrameBtn, children: "\u2715" })] })] })), activeTab === "draw" && (jsxs("div", { children: [jsx(OverlayToolbar, { api: api }), jsxs("div", { className: cs.sectionTitleMb8, children: [jsx("i", { className: "fa fa-paint-brush me-1" }), " Freehand drawing"] }), jsxs("div", { className: cs.sectionInfoMb, children: [jsx("i", { className: "fa fa-info-circle me-1" }), "Draw directly on the photo by holding the left mouse button."] }), jsxs("div", { className: cs.quickColorRow, children: [jsx("span", { className: cs.sliderLabel, children: "Color:" }), jsx("input", { type: "color", value: drawColor, onChange: e => setDrawColor(e.target.value), className: cs.colorInputDraw, "aria-label": t("photoEditor.drawColor", "Drawing color") }), ["#ff0000", "#ff8800", "#ffff00", "#00cc00", "#0088ff", "#8800ff", "#ff00ff", "#ffffff", "#000000"].map(c => (jsx("div", { onClick: () => setDrawColor(c), className: cs.quickColorSwatch, style: {
                                            background: c,
                                            border: drawColor === c ? `2px solid ${accent}` : undefined,
                                        } }, c)))] }), jsxs("div", { className: cs.sliderRow, style: { marginBottom: 12 }, children: [jsx("span", { className: cs.sliderLabel, children: "Width:" }), jsx(RangeInput, { min: 1, max: 30, value: drawWidth, onChange: e => setDrawWidth(Number(e.target.value)), accentColor: accent, style: { flex: 1 } }), jsxs("span", { className: cs.sliderValue, style: { color: accent }, children: [drawWidth, "px"] })] }), jsx("div", { className: cs.drawPreview, children: jsx("div", { style: {
                                        width: Math.max(drawWidth, 4), height: Math.max(drawWidth, 4),
                                        borderRadius: "50%", background: drawColor,
                                        border: "1px solid #555",
                                    } }) }), jsxs("div", { className: cs.drawActionRow, children: [jsxs(Button, { variant: "outline-warning", size: "sm", onClick: () => {
                                            if (drawingOverlayRef.current) {
                                                const id = drawingOverlayRef.current.id;
                                                setOverlays((prev) => prev.map(o => {
                                                    if (o.id === id && o.type === "drawing") {
                                                        const d = o;
                                                        if (d.strokes.length <= 1)
                                                            return o;
                                                        return { ...d, strokes: d.strokes.slice(0, -1) };
                                                    }
                                                    return o;
                                                }));
                                                pushHistory();
                                            }
                                        }, className: cs.drawActionBtn, children: [jsx("i", { className: "fa fa-undo me-1" }), " Undo stroke"] }), jsxs(Button, { variant: "outline-danger", size: "sm", onClick: () => {
                                            if (drawingOverlayRef.current) {
                                                deleteOverlay(drawingOverlayRef.current.id);
                                                drawingOverlayRef.current = null;
                                            }
                                        }, className: cs.drawActionBtn, children: [jsx("i", { className: "fa fa-trash me-1" }), " Clear"] })] }), jsxs(Button, { variant: "dark", size: "sm", className: "mt-2 w-100", onClick: () => {
                                    drawingOverlayRef.current = null;
                                }, children: [jsx("i", { className: "fa fa-plus me-1" }), " New drawing layer"] })] }))] })] }));
});
PhotoEditorLeftPanel.displayName = "PhotoEditorLeftPanel";

export { PhotoEditorLeftPanel as default };
//# sourceMappingURL=PhotoEditorLeftPanel.js.map
