'use strict';

var jsxRuntime = require('react/jsx-runtime');
var React = require('react');
var PixelEditor_module = require('./PixelEditor.module.css.js');
var index = require('../packages/ui/dist/index.js');
var usePixelEditor = require('./usePixelEditor.js');
var PixelEditorMenuBar = require('./PixelEditorMenuBar.js');
var PixelEditorToolbar = require('./PixelEditorToolbar.js');
var PixelEditorCanvas = require('./PixelEditorCanvas.js');
var PixelEditorRightPanel = require('./PixelEditorRightPanel.js');
var PixelEditorTimeline = require('./PixelEditorTimeline.js');
var PixelEditorStatusBar = require('./PixelEditorStatusBar.js');
var SpriteGeneratorPanel = require('./SpriteGeneratorPanel.js');

const NicePixelEditor = ({ initialWidth = 64, initialHeight = 64, className, onSaveToLibrary, }) => {
    const api = usePixelEditor.usePixelEditor({ initialWidth, initialHeight, onSaveToLibrary });
    const [showGenerator, setShowGenerator] = React.useState(false);
    const handleGeneratorSend = React.useCallback((imageData) => {
        var _a;
        (_a = api.importImageData) === null || _a === void 0 ? void 0 : _a.call(api, imageData);
    }, [api]);
    return (jsxRuntime.jsxs("div", { className: `${PixelEditor_module.root} ${className || ""}`, children: [jsxRuntime.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 = "";
                } }), jsxRuntime.jsx(PixelEditorMenuBar, { api: api, hasOnSaveToLibrary: !!onSaveToLibrary, onOpenGenerator: () => setShowGenerator(true) }), jsxRuntime.jsxs("div", { className: PixelEditor_module.mainArea, children: [jsxRuntime.jsx(PixelEditorToolbar, { api: api }), jsxRuntime.jsx(PixelEditorCanvas, { api: api }), jsxRuntime.jsx(PixelEditorRightPanel, { api: api })] }), jsxRuntime.jsx(PixelEditorTimeline, { api: api }), jsxRuntime.jsx(PixelEditorStatusBar, { api: api }), showGenerator && (jsxRuntime.jsx(SpriteGeneratorPanel, { onSendToCanvas: handleGeneratorSend, onClose: () => setShowGenerator(false) })), jsxRuntime.jsxs(index.NiceModal, { open: api.dlgNew, onClose: () => api.setDlgNew(false), title: "New Document", children: [jsxRuntime.jsx("label", { children: "Width (px)" }), jsxRuntime.jsx(index.NiceNumberInput, { min: 1, max: 4096, value: api.nw, onChange: (val) => api.setNw(val !== null && val !== void 0 ? val : 64), "aria-label": "Document width" }), jsxRuntime.jsx("label", { children: "Height (px)" }), jsxRuntime.jsx(index.NiceNumberInput, { min: 1, max: 4096, value: api.nh, onChange: (val) => api.setNh(val !== null && val !== void 0 ? val : 64), "aria-label": "Document height" }), jsxRuntime.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]) => (jsxRuntime.jsxs(index.NiceButton, { className: PixelEditor_module.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}`))) }), jsxRuntime.jsxs("div", { className: PixelEditor_module.dialogActions, children: [jsxRuntime.jsx(index.NiceButton, { className: PixelEditor_module.btnSecondary, variant: "ghost", onClick: () => api.setDlgNew(false), children: "Cancel" }), jsxRuntime.jsx(index.NiceButton, { className: PixelEditor_module.btnPrimary, variant: "primary", onClick: () => api.newDoc(api.nw, api.nh), children: "Create" })] })] })] }));
};
/** @deprecated Use NicePixelEditor */
const PixelEditor = NicePixelEditor;

exports.NicePixelEditor = NicePixelEditor;
exports.PixelEditor = PixelEditor;
//# sourceMappingURL=PixelEditor.js.map
