import { jsx, jsxs } from 'react/jsx-runtime';
import React from 'react';
import cs from './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 (jsxs("div", { className: cs.cropOverlay, children: [jsx("div", { className: cs.cropDarkBg }), 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: [jsxs("div", { className: cs.cropGridContainer, children: [[1, 2].map(i => (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 => (jsx("div", { style: {
                                    position: "absolute", top: 0, bottom: 0,
                                    left: `${(i / 3) * 100}%`, width: 1,
                                    background: "rgba(255,255,255,0.3)",
                                } }, `v${i}`)))] }), jsx("div", { style: { ...handleStyle("nw-resize"), top: -7, left: -7 }, onMouseDown: e => handleCropMouseDown(e, "nw") }), jsx("div", { style: { ...handleStyle("ne-resize"), top: -7, right: -7 }, onMouseDown: e => handleCropMouseDown(e, "ne") }), jsx("div", { style: { ...handleStyle("sw-resize"), bottom: -7, left: -7 }, onMouseDown: e => handleCropMouseDown(e, "sw") }), jsx("div", { style: { ...handleStyle("se-resize"), bottom: -7, right: -7 }, onMouseDown: e => handleCropMouseDown(e, "se") }), jsx("div", { style: { ...handleStyle("n-resize"), top: -7, left: "50%", transform: "translateX(-50%)" }, onMouseDown: e => handleCropMouseDown(e, "n") }), jsx("div", { style: { ...handleStyle("s-resize"), bottom: -7, left: "50%", transform: "translateX(-50%)" }, onMouseDown: e => handleCropMouseDown(e, "s") }), jsx("div", { style: { ...handleStyle("w-resize"), top: "50%", left: -7, transform: "translateY(-50%)" }, onMouseDown: e => handleCropMouseDown(e, "w") }), jsx("div", { style: { ...handleStyle("e-resize"), top: "50%", right: -7, transform: "translateY(-50%)" }, onMouseDown: e => handleCropMouseDown(e, "e") }), jsxs("div", { className: cs.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 (jsx("div", { ref: containerRef, className: cs.canvasViewport, style: { cursor: activeTab === "draw" ? "crosshair" : undefined }, onMouseDown: handleCanvasMouseDown, onMouseMove: handleCanvasMouseMove, onMouseUp: handleCanvasMouseUp, onMouseLeave: handleCanvasMouseUp, children: jsx("div", { className: cs.zoomWrap, style: { transform: `scale(${zoom})` }, children: showCompare ? (
            // ── Before / After comparison ──
            jsxs("div", { className: cs.compareWrap, onMouseDown: () => setCompareDragging(true), children: [jsx("canvas", { ref: compareCanvasRef, className: cs.canvasOriginal, role: "img", "aria-label": "Photo editor original preview canvas" }), jsx("div", { className: cs.compareClip, style: { width: `${comparePosition}%` }, children: jsx("canvas", { ref: mainCanvasRef, className: cs.canvasEdited, role: "img", "aria-label": "Photo editor edited preview canvas" }) }), jsx("div", { className: cs.compareSlider, style: {
                            left: `${comparePosition}%`,
                            background: accent,
                            boxShadow: `0 0 8px ${accent}`,
                        }, children: jsx("div", { className: cs.compareSliderKnob, style: { background: accent }, children: jsx("i", { className: `fa fa-arrows-h ${cs.compareSliderIcon}` }) }) }), jsx("div", { className: cs.compareLabelOriginal, children: "Original" }), jsx("div", { className: cs.compareLabelEdited, style: { background: `${accent}cc` }, children: "Edited" })] })) : (
            // ── Regular canvas view ──
            jsxs("div", { className: cs.regularWrap, children: [jsx("canvas", { ref: mainCanvasRef, className: cs.canvasRegular, role: "img", "aria-label": "Photo editor canvas" }), jsx(CropOverlay, { api: api })] })) }) }));
});
PhotoEditorCanvas.displayName = "PhotoEditorCanvas";

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