import { jsxs, jsx } from 'react/jsx-runtime';
import { useState, useCallback } from 'react';
import styles from './PixelEditor.module.css.js';
import { NiceModal as Ys, NiceNumberInput as ir, NiceButton as We } from '../packages/ui/dist/index.js';
import { usePixelEditor } from './usePixelEditor.js';
import PixelEditorMenuBar from './PixelEditorMenuBar.js';
import PixelEditorToolbar from './PixelEditorToolbar.js';
import PixelEditorCanvas from './PixelEditorCanvas.js';
import PixelEditorRightPanel from './PixelEditorRightPanel.js';
import PixelEditorTimeline from './PixelEditorTimeline.js';
import PixelEditorStatusBar from './PixelEditorStatusBar.js';
import NiceSpriteGeneratorPanel from './SpriteGeneratorPanel.js';

const NicePixelEditor = ({ initialWidth = 64, initialHeight = 64, className, onSaveToLibrary, }) => {
    const api = usePixelEditor({ initialWidth, initialHeight, onSaveToLibrary });
    const [showGenerator, setShowGenerator] = useState(false);
    const handleGeneratorSend = useCallback((imageData) => {
        var _a;
        (_a = api.importImageData) === null || _a === void 0 ? void 0 : _a.call(api, imageData);
    }, [api]);
    return (jsxs("div", { className: `${styles.root} ${className || ""}`, children: [jsx("input", { ref: api.fInp, type: "file", accept: ".ase,.aseprite,.png,.jpg,.jpeg,.gif,.bmp,.webp,.svg,.tga,.ico,.tiff,.tif,.avif", style: { display: "none" }, onChange: (e) => {
                    var _a;
                    const f = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
                    if (f)
                        api.openFile(f);
                    e.target.value = "";
                } }), jsx(PixelEditorMenuBar, { api: api, hasOnSaveToLibrary: !!onSaveToLibrary, onOpenGenerator: () => setShowGenerator(true) }), jsxs("div", { className: styles.mainArea, children: [jsx(PixelEditorToolbar, { api: api }), jsx(PixelEditorCanvas, { api: api }), jsx(PixelEditorRightPanel, { api: api })] }), jsx(PixelEditorTimeline, { api: api }), jsx(PixelEditorStatusBar, { api: api }), showGenerator && (jsx(NiceSpriteGeneratorPanel, { onSendToCanvas: handleGeneratorSend, onClose: () => setShowGenerator(false) })), jsxs(Ys, { open: api.dlgNew, onClose: () => api.setDlgNew(false), title: "New Document", children: [jsx("label", { children: "Width (px)" }), jsx(ir, { min: 1, max: 4096, value: api.nw, onChange: (val) => api.setNw(val !== null && val !== void 0 ? val : 64), "aria-label": "Document width" }), jsx("label", { children: "Height (px)" }), jsx(ir, { min: 1, max: 4096, value: api.nh, onChange: (val) => api.setNh(val !== null && val !== void 0 ? val : 64), "aria-label": "Document height" }), jsx("div", { style: { display: "flex", gap: 4, flexWrap: "wrap", marginTop: 8 }, children: [
                            [16, 16], [32, 32], [48, 48], [64, 64], [128, 128],
                            [256, 256], [16, 32], [32, 64], [48, 16], [64, 32],
                        ].map(([w, h]) => (jsxs(We, { className: styles.btnSecondary, variant: "ghost", size: "sm", style: { fontSize: 10, padding: "2px 6px" }, onClick: () => { api.setNw(w); api.setNh(h); }, children: [w, "x", h] }, `${w}x${h}`))) }), jsxs("div", { className: styles.dialogActions, children: [jsx(We, { className: styles.btnSecondary, variant: "ghost", onClick: () => api.setDlgNew(false), children: "Cancel" }), jsx(We, { className: styles.btnPrimary, variant: "primary", onClick: () => api.newDoc(api.nw, api.nh), children: "Create" })] })] })] }));
};
/** @deprecated Use NicePixelEditor */
const PixelEditor = NicePixelEditor;

export { NicePixelEditor, PixelEditor };
//# sourceMappingURL=PixelEditor.js.map
