'use strict';

var jsxRuntime = require('react/jsx-runtime');
var React = require('react');
var PhotoEditor_module = require('./PhotoEditor.module.css.js');

// ── Crop Overlay (rule-of-thirds + 8 handles + size indicator) ──
const CropOverlay = ({ api }) => {
    const { cropMode, cropRect, mainCanvasRef, accent, handleCropMouseDown } = api;
    if (!cropMode || !cropRect || !mainCanvasRef.current)
        return null;
    const canvasEl = mainCanvasRef.current;
    const cw = canvasEl.width;
    const ch = canvasEl.height;
    const left = (cropRect.x / cw) * 100;
    const top = (cropRect.y / ch) * 100;
    const width = (cropRect.w / cw) * 100;
    const height = (cropRect.h / ch) * 100;
    const handleStyle = (cursor) => ({
        position: "absolute", width: 14, height: 14,
        background: accent, border: "2px solid #fff",
        borderRadius: 3, cursor, zIndex: 3,
    });
    return (jsxRuntime.jsxs("div", { className: PhotoEditor_module.cropOverlay, children: [jsxRuntime.jsx("div", { className: PhotoEditor_module.cropDarkBg }), jsxRuntime.jsxs("div", { style: {
                    position: "absolute",
                    left: `${left}%`, top: `${top}%`,
                    width: `${width}%`, height: `${height}%`,
                    background: "transparent",
                    boxShadow: "0 0 0 9999px rgba(0,0,0,0.55)",
                    border: `2px solid ${accent}`,
                    pointerEvents: "auto",
                    cursor: "move",
                }, onMouseDown: (e) => handleCropMouseDown(e, "move"), children: [jsxRuntime.jsxs("div", { className: PhotoEditor_module.cropGridContainer, children: [[1, 2].map(i => (jsxRuntime.jsx("div", { style: {
                                    position: "absolute", left: 0, right: 0,
                                    top: `${(i / 3) * 100}%`, height: 1,
                                    background: "rgba(255,255,255,0.3)",
                                } }, `h${i}`))), [1, 2].map(i => (jsxRuntime.jsx("div", { style: {
                                    position: "absolute", top: 0, bottom: 0,
                                    left: `${(i / 3) * 100}%`, width: 1,
                                    background: "rgba(255,255,255,0.3)",
                                } }, `v${i}`)))] }), jsxRuntime.jsx("div", { style: { ...handleStyle("nw-resize"), top: -7, left: -7 }, onMouseDown: e => handleCropMouseDown(e, "nw") }), jsxRuntime.jsx("div", { style: { ...handleStyle("ne-resize"), top: -7, right: -7 }, onMouseDown: e => handleCropMouseDown(e, "ne") }), jsxRuntime.jsx("div", { style: { ...handleStyle("sw-resize"), bottom: -7, left: -7 }, onMouseDown: e => handleCropMouseDown(e, "sw") }), jsxRuntime.jsx("div", { style: { ...handleStyle("se-resize"), bottom: -7, right: -7 }, onMouseDown: e => handleCropMouseDown(e, "se") }), jsxRuntime.jsx("div", { style: { ...handleStyle("n-resize"), top: -7, left: "50%", transform: "translateX(-50%)" }, onMouseDown: e => handleCropMouseDown(e, "n") }), jsxRuntime.jsx("div", { style: { ...handleStyle("s-resize"), bottom: -7, left: "50%", transform: "translateX(-50%)" }, onMouseDown: e => handleCropMouseDown(e, "s") }), jsxRuntime.jsx("div", { style: { ...handleStyle("w-resize"), top: "50%", left: -7, transform: "translateY(-50%)" }, onMouseDown: e => handleCropMouseDown(e, "w") }), jsxRuntime.jsx("div", { style: { ...handleStyle("e-resize"), top: "50%", right: -7, transform: "translateY(-50%)" }, onMouseDown: e => handleCropMouseDown(e, "e") }), jsxRuntime.jsxs("div", { className: PhotoEditor_module.cropSizeLabel, children: [Math.round(cropRect.w), " \u00D7 ", Math.round(cropRect.h)] })] })] }));
};
// ── Canvas Viewport ──
const PhotoEditorCanvas = React.memo(({ api }) => {
    const { containerRef, activeTab, zoom, accent, showCompare, comparePosition, setCompareDragging, mainCanvasRef, compareCanvasRef, handleCanvasMouseDown, handleCanvasMouseMove, handleCanvasMouseUp, } = api;
    return (jsxRuntime.jsx("div", { ref: containerRef, className: PhotoEditor_module.canvasViewport, style: { cursor: activeTab === "draw" ? "crosshair" : undefined }, onMouseDown: handleCanvasMouseDown, onMouseMove: handleCanvasMouseMove, onMouseUp: handleCanvasMouseUp, onMouseLeave: handleCanvasMouseUp, children: jsxRuntime.jsx("div", { className: PhotoEditor_module.zoomWrap, style: { transform: `scale(${zoom})` }, children: showCompare ? (
            // ── Before / After comparison ──
            jsxRuntime.jsxs("div", { className: PhotoEditor_module.compareWrap, onMouseDown: () => setCompareDragging(true), children: [jsxRuntime.jsx("canvas", { ref: compareCanvasRef, className: PhotoEditor_module.canvasOriginal, role: "img", "aria-label": "Photo editor original preview canvas" }), jsxRuntime.jsx("div", { className: PhotoEditor_module.compareClip, style: { width: `${comparePosition}%` }, children: jsxRuntime.jsx("canvas", { ref: mainCanvasRef, className: PhotoEditor_module.canvasEdited, role: "img", "aria-label": "Photo editor edited preview canvas" }) }), jsxRuntime.jsx("div", { className: PhotoEditor_module.compareSlider, style: {
                            left: `${comparePosition}%`,
                            background: accent,
                            boxShadow: `0 0 8px ${accent}`,
                        }, children: jsxRuntime.jsx("div", { className: PhotoEditor_module.compareSliderKnob, style: { background: accent }, children: jsxRuntime.jsx("i", { className: `fa fa-arrows-h ${PhotoEditor_module.compareSliderIcon}` }) }) }), jsxRuntime.jsx("div", { className: PhotoEditor_module.compareLabelOriginal, children: "Original" }), jsxRuntime.jsx("div", { className: PhotoEditor_module.compareLabelEdited, style: { background: `${accent}cc` }, children: "Edited" })] })) : (
            // ── Regular canvas view ──
            jsxRuntime.jsxs("div", { className: PhotoEditor_module.regularWrap, children: [jsxRuntime.jsx("canvas", { ref: mainCanvasRef, className: PhotoEditor_module.canvasRegular, role: "img", "aria-label": "Photo editor canvas" }), jsxRuntime.jsx(CropOverlay, { api: api })] })) }) }));
});
PhotoEditorCanvas.displayName = "PhotoEditorCanvas";

module.exports = PhotoEditorCanvas;
//# sourceMappingURL=PhotoEditorCanvas.js.map
