import { jsxs, jsx } from 'react/jsx-runtime';
import React from 'react';
import styles from './PixelEditor.module.css.js';
import { NiceButton as We, NiceColorPicker as Rn } from '../packages/ui/dist/index.js';
import { TOOLS, SYMMETRY_MODES } from './pixelEditorTypes.js';

const PixelEditorToolbar = React.memo(({ api }) => (jsxs("div", { className: styles.toolbar, children: [TOOLS.map((t) => (jsx(We, { className: `${styles.toolBtn} ${api.tool === t.id ? styles.toolBtnActive : ""}`, variant: api.tool === t.id ? 'primary' : 'ghost', size: "sm", onClick: () => api.setTool(t.id), title: `${t.label} (${t.key})`, children: t.icon }, t.id))), jsx("div", { className: styles.toolSep }), jsx(We, { className: `${styles.toolBtn} ${api.shapeFilled ? styles.toolBtnActive : ""}`, variant: api.shapeFilled ? 'primary' : 'ghost', size: "sm", onClick: () => api.setShapeFilled((f) => !f), title: `${api.shapeFilled ? "Filled" : "Outline"} (F)`, children: api.shapeFilled ? "■" : "□" }), jsx("div", { className: styles.toolGroup, children: SYMMETRY_MODES.map((m) => (jsx(We, { className: `${styles.miniBtn} ${api.symmetry === m.id ? styles.miniBtnActive : ""}`, variant: api.symmetry === m.id ? 'primary' : 'ghost', size: "sm", onClick: () => api.setSymmetry(m.id), title: `Symmetry: ${m.label}`, children: m.label.slice(0, 2) }, m.id))) }), jsxs("div", { className: styles.colorSwatches, children: [jsx("label", { style: { position: "relative", width: 28, height: 28, cursor: "pointer" }, title: "Primary Colour (click for HSV)", children: jsx(Rn, { value: api.col1, onChange: (c) => api.setCol1(c) }) }), jsx("label", { style: { position: "relative", width: 22, height: 22, cursor: "pointer" }, title: "Secondary Colour", children: jsx(Rn, { value: api.col2, onChange: (c) => api.setCol2(c) }) }), jsx(We, { className: styles.toolBtn, variant: "ghost", size: "sm", onClick: () => {
                        const tmp = api.col1;
                        api.setCol1(api.col2);
                        api.setCol2(tmp);
                    }, title: "Swap (X)", style: { fontSize: 12, width: 24, height: 24 }, children: "\u21C4" })] })] })));
PixelEditorToolbar.displayName = "PixelEditorToolbar";

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