import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
import React, { useState } from 'react';
import { NiceButton as We, NiceColorPicker as Rn, NiceTextInput as Tt, NiceSelect as fn, NiceSlider as so, NiceNumberInput as ir } from '../packages/ui/dist/index.js';
import styles from './VectorEditor.module.css.js';
import { FONTS } from './vectorEditorTypes.js';
import { PRESET_GRADIENTS, gradientToCSS, gradientId, cloneGradient } from './vectorGradients.js';

const VectorEditorRightPanel$1 = ({ api }) => {
    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
    const { tool, selId, selShape, shapes, fillCol, strokeCol, strokeW, shapeOpacity, cornerRadius, polygonSides, starPoints2, starInnerRatio, fontSize, fontFamily, snapGrid, gridSize, setFillCol, setStrokeCol, setStrokeW, setShapeOpacity, setCornerRadius, setPolygonSides, setStarPoints2, setStarInnerRatio, setFontSize, setFontFamily, setGridSize, updateSel, setSelId, setTool, } = api;
    // Gradient editing state
    const [fillMode, setFillMode] = useState("solid");
    const [selectedGradient, setSelectedGradient] = useState(null);
    const [showGradientEditor, setShowGradientEditor] = useState(false);
    const applyGradient = (gradient) => {
        const newGrad = { ...cloneGradient(gradient), id: gradientId() };
        setSelectedGradient(newGrad);
        // Store gradient in shape as serialized reference
        updateSel({
            fill: `url(#${newGrad.id})`,
            // Store gradient data as custom property (will be used in SVG export)
        });
    };
    return (jsxs("div", { className: styles.rightPanel, children: [jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: jsx("span", { children: "Appearance" }) }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Fill" }), jsxs("div", { style: { display: "flex", gap: 4 }, children: [jsx(We, { className: `${styles.menuBtn} ${fillMode === "solid" ? styles.menuBtnActive : ""}`, style: { padding: "2px 6px", fontSize: 10 }, variant: fillMode === "solid" ? "primary" : "ghost", size: "sm", onClick: () => setFillMode("solid"), children: "Solid" }), jsx(We, { className: `${styles.menuBtn} ${fillMode === "gradient" ? styles.menuBtnActive : ""}`, style: { padding: "2px 6px", fontSize: 10 }, variant: fillMode === "gradient" ? "primary" : "ghost", size: "sm", onClick: () => setFillMode("gradient"), children: "Gradient" })] })] }), fillMode === "solid" ? (jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel }), jsx("div", { className: styles.propColorSwatch, style: { background: fillCol }, children: jsx(Rn, { value: fillCol, onChange: (c) => { setFillCol(c); updateSel({ fill: c }); } }) }), jsx(Tt, { className: styles.propInput, value: (selShape === null || selShape === void 0 ? void 0 : selShape.fill) || fillCol, onChange: (val) => { setFillCol(val); updateSel({ fill: val }); } })] })) : (jsxs(Fragment, { children: [jsx("div", { className: styles.propRow, style: { flexWrap: "wrap", gap: 4 }, children: PRESET_GRADIENTS.map((grad, i) => (jsx("div", { style: {
                                        width: 24,
                                        height: 24,
                                        borderRadius: 4,
                                        background: gradientToCSS(grad),
                                        cursor: "pointer",
                                        border: (selectedGradient === null || selectedGradient === void 0 ? void 0 : selectedGradient.id) === grad.id ? "2px solid #fff" : "1px solid #444",
                                    }, onClick: () => applyGradient(grad), title: `${grad.type} gradient` }, i))) }), jsx("div", { className: styles.propRow, children: jsx(We, { className: styles.menuBtn, variant: "ghost", size: "sm", style: { width: "100%", fontSize: 10 }, onClick: () => setShowGradientEditor(!showGradientEditor), children: showGradientEditor ? "▼ Hide Editor" : "► Edit Gradient" }) }), showGradientEditor && selectedGradient && (jsxs("div", { style: { padding: 4, background: "#252525", borderRadius: 4, margin: "4px 0" }, children: [jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Type" }), jsx(fn, { className: styles.propInput, value: selectedGradient.type, onChange: (val) => {
                                                    const type = val;
                                                    let newGrad;
                                                    if (type === "linear") {
                                                        newGrad = {
                                                            type: "linear",
                                                            id: gradientId(),
                                                            angle: 0,
                                                            stops: selectedGradient.stops,
                                                        };
                                                    }
                                                    else {
                                                        newGrad = {
                                                            type: "radial",
                                                            id: gradientId(),
                                                            cx: 0.5,
                                                            cy: 0.5,
                                                            r: 0.7,
                                                            stops: selectedGradient.stops,
                                                        };
                                                    }
                                                    setSelectedGradient(newGrad);
                                                    updateSel({ fill: `url(#${newGrad.id})` });
                                                }, options: [
                                                    { value: "linear", label: "Linear" },
                                                    { value: "radial", label: "Radial" },
                                                ] })] }), selectedGradient.type === "linear" && (jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Angle" }), jsx(so, { className: styles.propInput, min: 0, max: 360, value: selectedGradient.angle, onChange: (val) => {
                                                    const newGrad = {
                                                        ...selectedGradient,
                                                        id: gradientId(),
                                                        angle: val,
                                                    };
                                                    setSelectedGradient(newGrad);
                                                    updateSel({ fill: `url(#${newGrad.id})` });
                                                } }), jsxs("span", { style: { fontSize: 10, minWidth: 28 }, children: [selectedGradient.angle, "\u00B0"] })] })), selectedGradient.type === "radial" && (jsxs(Fragment, { children: [jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "CX" }), jsx(so, { className: styles.propInput, min: 0, max: 100, value: selectedGradient.cx * 100, onChange: (val) => {
                                                            const newGrad = {
                                                                ...selectedGradient,
                                                                id: gradientId(),
                                                                cx: val / 100,
                                                            };
                                                            setSelectedGradient(newGrad);
                                                            updateSel({ fill: `url(#${newGrad.id})` });
                                                        } })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "CY" }), jsx(so, { className: styles.propInput, min: 0, max: 100, value: selectedGradient.cy * 100, onChange: (val) => {
                                                            const newGrad = {
                                                                ...selectedGradient,
                                                                id: gradientId(),
                                                                cy: val / 100,
                                                            };
                                                            setSelectedGradient(newGrad);
                                                            updateSel({ fill: `url(#${newGrad.id})` });
                                                        } })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "R" }), jsx(so, { className: styles.propInput, min: 10, max: 100, value: selectedGradient.r * 100, onChange: (val) => {
                                                            const newGrad = {
                                                                ...selectedGradient,
                                                                id: gradientId(),
                                                                r: val / 100,
                                                            };
                                                            setSelectedGradient(newGrad);
                                                            updateSel({ fill: `url(#${newGrad.id})` });
                                                        } })] })] })), jsx("div", { style: { fontSize: 10, color: "#888", marginTop: 4 }, children: "Color Stops:" }), selectedGradient.stops.map((stop, i) => (jsxs("div", { className: styles.propRow, children: [jsx(Rn, { value: stop.color, style: { width: 24, height: 20 }, onChange: (color) => {
                                                    const newStops = [...selectedGradient.stops];
                                                    newStops[i] = { ...newStops[i], color };
                                                    const newGrad = { ...selectedGradient, id: gradientId(), stops: newStops };
                                                    setSelectedGradient(newGrad);
                                                    updateSel({ fill: `url(#${newGrad.id})` });
                                                } }), jsx(so, { min: 0, max: 100, value: stop.offset * 100, style: { flex: 1 }, onChange: (val) => {
                                                    const newStops = [...selectedGradient.stops];
                                                    newStops[i] = { ...newStops[i], offset: val / 100 };
                                                    newStops.sort((a, b) => a.offset - b.offset);
                                                    const newGrad = { ...selectedGradient, id: gradientId(), stops: newStops };
                                                    setSelectedGradient(newGrad);
                                                    updateSel({ fill: `url(#${newGrad.id})` });
                                                } }), jsxs("span", { style: { fontSize: 9, minWidth: 24 }, children: [Math.round(stop.offset * 100), "%"] })] }, i))), jsxs("div", { className: styles.propRow, style: { gap: 4 }, children: [jsx(We, { className: styles.menuBtn, variant: "ghost", size: "sm", style: { fontSize: 10, flex: 1 }, onClick: () => {
                                                    const newStops = [...selectedGradient.stops, { offset: 0.5, color: "#888888" }];
                                                    newStops.sort((a, b) => a.offset - b.offset);
                                                    const newGrad = { ...selectedGradient, id: gradientId(), stops: newStops };
                                                    setSelectedGradient(newGrad);
                                                    updateSel({ fill: `url(#${newGrad.id})` });
                                                }, children: "+ Add Stop" }), jsx(We, { className: styles.menuBtn, variant: "ghost", size: "sm", style: { fontSize: 10, flex: 1 }, disabled: selectedGradient.stops.length <= 2, onClick: () => {
                                                    if (selectedGradient.stops.length <= 2)
                                                        return;
                                                    const newStops = selectedGradient.stops.slice(0, -1);
                                                    const newGrad = { ...selectedGradient, id: gradientId(), stops: newStops };
                                                    setSelectedGradient(newGrad);
                                                    updateSel({ fill: `url(#${newGrad.id})` });
                                                }, children: "- Remove" })] })] }))] })), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Stroke" }), jsx("div", { className: styles.propColorSwatch, style: { background: strokeCol }, children: jsx(Rn, { value: strokeCol, onChange: (c) => { setStrokeCol(c); updateSel({ stroke: c }); } }) }), jsx(Tt, { className: styles.propInput, value: (selShape === null || selShape === void 0 ? void 0 : selShape.stroke) || strokeCol, onChange: (val) => { setStrokeCol(val); updateSel({ stroke: val }); } })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Width" }), jsx(ir, { className: styles.propInput, min: 0, max: 100, value: (_a = selShape === null || selShape === void 0 ? void 0 : selShape.strokeWidth) !== null && _a !== void 0 ? _a : strokeW, onChange: (val) => { const v = val !== null && val !== void 0 ? val : 0; setStrokeW(v); updateSel({ strokeWidth: v }); } })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Opacity" }), jsx(so, { className: styles.propInput, min: 0, max: 1, step: 0.01, value: (_b = selShape === null || selShape === void 0 ? void 0 : selShape.opacity) !== null && _b !== void 0 ? _b : shapeOpacity, onChange: (val) => { setShapeOpacity(val); updateSel({ opacity: val }); } }), jsxs("span", { style: { fontSize: 10, minWidth: 28 }, children: [Math.round(((_c = selShape === null || selShape === void 0 ? void 0 : selShape.opacity) !== null && _c !== void 0 ? _c : shapeOpacity) * 100), "%"] })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Rotation" }), jsx(ir, { className: styles.propInput, min: -360, max: 360, value: (_d = selShape === null || selShape === void 0 ? void 0 : selShape.rotation) !== null && _d !== void 0 ? _d : 0, onChange: (val) => updateSel({ rotation: val !== null && val !== void 0 ? val : 0 }) }), jsx("span", { style: { fontSize: 10 }, children: "\u00B0" })] })] }), jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: jsx("span", { children: "Tool Options" }) }), (tool === "roundrect" || (selShape === null || selShape === void 0 ? void 0 : selShape.type) === "roundrect") && (jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Radius" }), jsx(ir, { className: styles.propInput, min: 0, max: 200, value: (_e = selShape === null || selShape === void 0 ? void 0 : selShape.rx) !== null && _e !== void 0 ? _e : cornerRadius, onChange: (val) => { const v = val !== null && val !== void 0 ? val : 0; setCornerRadius(v); updateSel({ rx: v }); } })] })), (tool === "polygon" || (selShape === null || selShape === void 0 ? void 0 : selShape.type) === "polygon") && (jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Sides" }), jsx(ir, { className: styles.propInput, min: 3, max: 32, value: (_f = selShape === null || selShape === void 0 ? void 0 : selShape.sides) !== null && _f !== void 0 ? _f : polygonSides, onChange: (val) => { const v = val !== null && val !== void 0 ? val : 3; setPolygonSides(v); updateSel({ sides: v }); } })] })), (tool === "star" || (selShape === null || selShape === void 0 ? void 0 : selShape.type) === "star") && (jsxs(Fragment, { children: [jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Points" }), jsx(ir, { className: styles.propInput, min: 3, max: 32, value: (_g = selShape === null || selShape === void 0 ? void 0 : selShape.sides) !== null && _g !== void 0 ? _g : starPoints2, onChange: (val) => { const v = val !== null && val !== void 0 ? val : 3; setStarPoints2(v); updateSel({ sides: v }); } })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Inner R" }), jsx(so, { className: styles.propInput, min: 0.1, max: 0.9, step: 0.05, value: (_h = selShape === null || selShape === void 0 ? void 0 : selShape.innerRadius) !== null && _h !== void 0 ? _h : starInnerRatio, onChange: (val) => { setStarInnerRatio(val); updateSel({ innerRadius: val }); } }), jsxs("span", { style: { fontSize: 10 }, children: [Math.round(((_j = selShape === null || selShape === void 0 ? void 0 : selShape.innerRadius) !== null && _j !== void 0 ? _j : starInnerRatio) * 100), "%"] })] })] })), (tool === "text" || (selShape === null || selShape === void 0 ? void 0 : selShape.type) === "text") && (jsxs(Fragment, { children: [jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Size" }), jsx(ir, { className: styles.propInput, min: 8, max: 200, value: (_k = selShape === null || selShape === void 0 ? void 0 : selShape.fontSize) !== null && _k !== void 0 ? _k : fontSize, onChange: (val) => { const v = val !== null && val !== void 0 ? val : 12; setFontSize(v); updateSel({ fontSize: v }); } })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Font" }), jsx(fn, { className: styles.propInput, value: (_l = selShape === null || selShape === void 0 ? void 0 : selShape.fontFamily) !== null && _l !== void 0 ? _l : fontFamily, onChange: (val) => { setFontFamily(val); updateSel({ fontFamily: val }); }, options: FONTS.map((f) => ({ value: f, label: f })) })] })] })), snapGrid && (jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Grid" }), jsx(ir, { className: styles.propInput, min: 4, max: 128, value: gridSize, onChange: (val) => setGridSize(val !== null && val !== void 0 ? val : 8) })] }))] }), jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: jsxs("span", { children: ["Shapes (", shapes.length, ")"] }) }), [...shapes].reverse().map((s) => (jsxs("div", { className: `${styles.shapeItem} ${s.id === selId ? styles.shapeItemActive : ""}`, onClick: () => { setSelId(s.id); setTool("pointer"); }, children: [jsx("span", { className: styles.shapeIcon, children: s.type === "rect" ? "▢"
                                    : s.type === "roundrect" ? "▣"
                                        : s.type === "ellipse" ? "◯"
                                            : s.type === "line" ? "╱"
                                                : s.type === "arrow" ? "→"
                                                    : s.type === "polygon" ? "⬡"
                                                        : s.type === "star" ? "★"
                                                            : s.type === "polyline" ? "✎"
                                                                : "T" }), jsxs("span", { className: styles.shapeName, children: [s.type, s.text ? ` "${s.text}"` : ""] })] }, s.id))), shapes.length === 0 && (jsx("div", { style: { color: "#555", fontSize: 11, padding: 4 }, children: "No shapes yet. Use the tools to draw." }))] }), selShape && (jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: jsx("span", { children: "Transform" }) }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "X" }), jsx(ir, { className: styles.propInput, value: Math.round(selShape.x), onChange: (val) => updateSel({ x: val !== null && val !== void 0 ? val : 0 }) })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Y" }), jsx(ir, { className: styles.propInput, value: Math.round(selShape.y), onChange: (val) => updateSel({ y: val !== null && val !== void 0 ? val : 0 }) })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "W" }), jsx(ir, { className: styles.propInput, value: Math.round(selShape.w), onChange: (val) => updateSel({ w: val !== null && val !== void 0 ? val : 0 }) })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "H" }), jsx(ir, { className: styles.propInput, value: Math.round(selShape.h), onChange: (val) => updateSel({ h: val !== null && val !== void 0 ? val : 0 }) })] })] }))] }));
};
var VectorEditorRightPanel = React.memo(VectorEditorRightPanel$1);

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