'use client';
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
import { useModal } from '@faceless-ui/modal';
import React, { useRef, useState } from 'react';
import ReactCrop from 'react-image-crop';
import 'react-image-crop/dist/ReactCrop.css';
import { editDrawerSlug } from '../../elements/Upload/index.js';
import { PlusIcon } from '../../icons/Plus/index.js';
import { useTranslation } from '../../providers/Translation/index.js';
import { Button } from '../Button/index.js';
import './index.scss';
const baseClass = 'edit-upload';
const Input = (props)=>{
    const { name, onChange, ref, value } = props;
    return /*#__PURE__*/ _jsxDEV("div", {
        className: `${baseClass}__input`,
        children: [
            name,
            /*#__PURE__*/ _jsxDEV("input", {
                name: name,
                onChange: (e)=>onChange(e.target.value),
                ref: ref,
                type: "number",
                value: value
            }, void 0, false, {
                fileName: "src/elements/EditUpload/index.tsx",
                lineNumber: 31,
                columnNumber: 7
            }, this)
        ]
    }, void 0, true, {
        fileName: "src/elements/EditUpload/index.tsx",
        lineNumber: 29,
        columnNumber: 5
    }, this);
};
const defaultCrop = {
    height: 100,
    unit: '%',
    width: 100,
    x: 0,
    y: 0
};
export const EditUpload = ({ fileName, fileSrc, imageCacheTag, initialCrop, initialFocalPoint, onSave, showCrop, showFocalPoint })=>{
    const { closeModal } = useModal();
    const { t } = useTranslation();
    const [crop, setCrop] = useState(()=>({
            ...defaultCrop,
            ...initialCrop || {}
        }));
    const defaultFocalPosition = {
        x: 50,
        y: 50
    };
    const [focalPosition, setFocalPosition] = useState(()=>({
            ...defaultFocalPosition,
            ...initialFocalPoint
        }));
    const [checkBounds, setCheckBounds] = useState(false);
    const [uncroppedPixelHeight, setUncroppedPixelHeight] = useState(0);
    const [uncroppedPixelWidth, setUncroppedPixelWidth] = useState(0);
    const focalWrapRef = useRef(undefined);
    const imageRef = useRef(undefined);
    const cropRef = useRef(undefined);
    const heightInputRef = useRef(null);
    const widthInputRef = useRef(null);
    const [imageLoaded, setImageLoaded] = useState(false);
    const onImageLoad = (e)=>{
        // set the default image height/width on load
        setUncroppedPixelHeight(e.currentTarget.naturalHeight);
        setUncroppedPixelWidth(e.currentTarget.naturalWidth);
        setImageLoaded(true);
    };
    const fineTuneCrop = ({ dimension, value })=>{
        const intValue = parseInt(value);
        const percentage = 100 * (intValue / (dimension === 'width' ? uncroppedPixelWidth : uncroppedPixelHeight));
        if (percentage <= 0 || percentage > 100) {
            return null;
        }
        setCrop({
            ...crop,
            [dimension]: percentage
        });
    };
    const fineTuneFocalPosition = ({ coordinate, value })=>{
        const intValue = parseInt(value);
        if (intValue >= 0 && intValue <= 100) {
            setFocalPosition((prevPosition)=>({
                    ...prevPosition,
                    [coordinate]: intValue
                }));
        }
    };
    const saveEdits = ()=>{
        if (typeof onSave === 'function') {
            onSave({
                crop: crop ? crop : undefined,
                focalPoint: focalPosition,
                heightInPixels: Number(heightInputRef?.current?.value ?? uncroppedPixelHeight),
                widthInPixels: Number(widthInputRef?.current?.value ?? uncroppedPixelWidth)
            });
        }
        closeModal(editDrawerSlug);
    };
    const onDragEnd = React.useCallback(({ x, y })=>{
        setFocalPosition({
            x,
            y
        });
        setCheckBounds(false);
    }, []);
    const centerFocalPoint = ()=>{
        const containerRect = focalWrapRef.current.getBoundingClientRect();
        const boundsRect = showCrop ? cropRef.current.getBoundingClientRect() : imageRef.current.getBoundingClientRect();
        const xCenter = (boundsRect.left - containerRect.left + boundsRect.width / 2) / containerRect.width * 100;
        const yCenter = (boundsRect.top - containerRect.top + boundsRect.height / 2) / containerRect.height * 100;
        setFocalPosition({
            x: xCenter,
            y: yCenter
        });
    };
    const fileSrcToUse = imageCacheTag ? `${fileSrc}?${encodeURIComponent(imageCacheTag)}` : fileSrc;
    return /*#__PURE__*/ _jsxDEV("div", {
        className: baseClass,
        children: [
            /*#__PURE__*/ _jsxDEV("div", {
                className: `${baseClass}__header`,
                children: [
                    /*#__PURE__*/ _jsxDEV("h2", {
                        title: `${t('general:editing')} ${fileName}`,
                        children: [
                            t('general:editing'),
                            " ",
                            fileName
                        ]
                    }, void 0, true, {
                        fileName: "src/elements/EditUpload/index.tsx",
                        lineNumber: 177,
                        columnNumber: 9
                    }, this),
                    /*#__PURE__*/ _jsxDEV("div", {
                        className: `${baseClass}__actions`,
                        children: [
                            /*#__PURE__*/ _jsxDEV(Button, {
                                "aria-label": t('general:cancel'),
                                buttonStyle: "secondary",
                                className: `${baseClass}__cancel`,
                                onClick: ()=>closeModal(editDrawerSlug),
                                children: t('general:cancel')
                            }, void 0, false, {
                                fileName: "src/elements/EditUpload/index.tsx",
                                lineNumber: 181,
                                columnNumber: 11
                            }, this),
                            /*#__PURE__*/ _jsxDEV(Button, {
                                "aria-label": t('general:applyChanges'),
                                buttonStyle: "primary",
                                className: `${baseClass}__save`,
                                disabled: !imageLoaded,
                                onClick: saveEdits,
                                children: t('general:applyChanges')
                            }, void 0, false, {
                                fileName: "src/elements/EditUpload/index.tsx",
                                lineNumber: 189,
                                columnNumber: 11
                            }, this)
                        ]
                    }, void 0, true, {
                        fileName: "src/elements/EditUpload/index.tsx",
                        lineNumber: 180,
                        columnNumber: 9
                    }, this)
                ]
            }, void 0, true, {
                fileName: "src/elements/EditUpload/index.tsx",
                lineNumber: 176,
                columnNumber: 7
            }, this),
            /*#__PURE__*/ _jsxDEV("div", {
                className: `${baseClass}__toolWrap`,
                children: [
                    /*#__PURE__*/ _jsxDEV("div", {
                        className: `${baseClass}__crop`,
                        children: /*#__PURE__*/ _jsxDEV("div", {
                            className: `${baseClass}__focal-wrapper`,
                            ref: focalWrapRef,
                            style: {
                                aspectRatio: `${uncroppedPixelWidth / uncroppedPixelHeight}`
                            },
                            children: [
                                showCrop ? /*#__PURE__*/ _jsxDEV(ReactCrop, {
                                    className: `${baseClass}__reactCrop`,
                                    crop: crop,
                                    onChange: (_, c)=>setCrop(c),
                                    onComplete: ()=>setCheckBounds(true),
                                    renderSelectionAddon: ()=>{
                                        return /*#__PURE__*/ _jsxDEV("div", {
                                            className: `${baseClass}__crop-window`,
                                            ref: cropRef
                                        }, void 0, false, {
                                            fileName: "src/elements/EditUpload/index.tsx",
                                            lineNumber: 216,
                                            columnNumber: 26
                                        }, void 0);
                                    },
                                    children: /*#__PURE__*/ _jsxDEV("img", {
                                        alt: t('upload:setCropArea'),
                                        onLoad: onImageLoad,
                                        ref: imageRef,
                                        src: fileSrcToUse
                                    }, void 0, false, {
                                        fileName: "src/elements/EditUpload/index.tsx",
                                        lineNumber: 219,
                                        columnNumber: 17
                                    }, this)
                                }, void 0, false, {
                                    fileName: "src/elements/EditUpload/index.tsx",
                                    lineNumber: 210,
                                    columnNumber: 15
                                }, this) : /*#__PURE__*/ _jsxDEV("img", {
                                    alt: t('upload:setFocalPoint'),
                                    onLoad: onImageLoad,
                                    ref: imageRef,
                                    src: fileSrcToUse
                                }, void 0, false, {
                                    fileName: "src/elements/EditUpload/index.tsx",
                                    lineNumber: 227,
                                    columnNumber: 15
                                }, this),
                                showFocalPoint && /*#__PURE__*/ _jsxDEV(DraggableElement, {
                                    boundsRef: showCrop ? cropRef : imageRef,
                                    checkBounds: showCrop ? checkBounds : false,
                                    className: `${baseClass}__focalPoint`,
                                    containerRef: focalWrapRef,
                                    initialPosition: focalPosition,
                                    onDragEnd: onDragEnd,
                                    setCheckBounds: showCrop ? setCheckBounds : false,
                                    children: /*#__PURE__*/ _jsxDEV(PlusIcon, {}, void 0, false, {
                                        fileName: "src/elements/EditUpload/index.tsx",
                                        lineNumber: 244,
                                        columnNumber: 17
                                    }, this)
                                }, void 0, false, {
                                    fileName: "src/elements/EditUpload/index.tsx",
                                    lineNumber: 235,
                                    columnNumber: 15
                                }, this)
                            ]
                        }, void 0, true, {
                            fileName: "src/elements/EditUpload/index.tsx",
                            lineNumber: 202,
                            columnNumber: 11
                        }, this)
                    }, void 0, false, {
                        fileName: "src/elements/EditUpload/index.tsx",
                        lineNumber: 201,
                        columnNumber: 9
                    }, this),
                    (showCrop || showFocalPoint) && /*#__PURE__*/ _jsxDEV("div", {
                        className: `${baseClass}__sidebar`,
                        children: [
                            showCrop && /*#__PURE__*/ _jsxDEV("div", {
                                className: `${baseClass}__groupWrap`,
                                children: [
                                    /*#__PURE__*/ _jsxDEV("div", {
                                        children: /*#__PURE__*/ _jsxDEV("div", {
                                            className: `${baseClass}__titleWrap`,
                                            children: [
                                                /*#__PURE__*/ _jsxDEV("h3", {
                                                    children: t('upload:crop')
                                                }, void 0, false, {
                                                    fileName: "src/elements/EditUpload/index.tsx",
                                                    lineNumber: 255,
                                                    columnNumber: 21
                                                }, this),
                                                /*#__PURE__*/ _jsxDEV(Button, {
                                                    buttonStyle: "none",
                                                    className: `${baseClass}__reset`,
                                                    onClick: ()=>setCrop({
                                                            height: 100,
                                                            unit: '%',
                                                            width: 100,
                                                            x: 0,
                                                            y: 0
                                                        }),
                                                    children: t('general:reset')
                                                }, void 0, false, {
                                                    fileName: "src/elements/EditUpload/index.tsx",
                                                    lineNumber: 256,
                                                    columnNumber: 21
                                                }, this)
                                            ]
                                        }, void 0, true, {
                                            fileName: "src/elements/EditUpload/index.tsx",
                                            lineNumber: 254,
                                            columnNumber: 19
                                        }, this)
                                    }, void 0, false, {
                                        fileName: "src/elements/EditUpload/index.tsx",
                                        lineNumber: 253,
                                        columnNumber: 17
                                    }, this),
                                    /*#__PURE__*/ _jsxDEV("span", {
                                        className: `${baseClass}__description`,
                                        children: t('upload:cropToolDescription')
                                    }, void 0, false, {
                                        fileName: "src/elements/EditUpload/index.tsx",
                                        lineNumber: 273,
                                        columnNumber: 17
                                    }, this),
                                    /*#__PURE__*/ _jsxDEV("div", {
                                        className: `${baseClass}__inputsWrap`,
                                        children: [
                                            /*#__PURE__*/ _jsxDEV(Input, {
                                                name: `${t('upload:width')} (px)`,
                                                onChange: (value)=>fineTuneCrop({
                                                        dimension: 'width',
                                                        value
                                                    }),
                                                ref: widthInputRef,
                                                value: (crop.width / 100 * uncroppedPixelWidth).toFixed(0)
                                            }, void 0, false, {
                                                fileName: "src/elements/EditUpload/index.tsx",
                                                lineNumber: 277,
                                                columnNumber: 19
                                            }, this),
                                            /*#__PURE__*/ _jsxDEV(Input, {
                                                name: `${t('upload:height')} (px)`,
                                                onChange: (value)=>fineTuneCrop({
                                                        dimension: 'height',
                                                        value
                                                    }),
                                                ref: heightInputRef,
                                                value: (crop.height / 100 * uncroppedPixelHeight).toFixed(0)
                                            }, void 0, false, {
                                                fileName: "src/elements/EditUpload/index.tsx",
                                                lineNumber: 283,
                                                columnNumber: 19
                                            }, this)
                                        ]
                                    }, void 0, true, {
                                        fileName: "src/elements/EditUpload/index.tsx",
                                        lineNumber: 276,
                                        columnNumber: 17
                                    }, this)
                                ]
                            }, void 0, true, {
                                fileName: "src/elements/EditUpload/index.tsx",
                                lineNumber: 252,
                                columnNumber: 15
                            }, this),
                            showFocalPoint && /*#__PURE__*/ _jsxDEV("div", {
                                className: `${baseClass}__groupWrap`,
                                children: [
                                    /*#__PURE__*/ _jsxDEV("div", {
                                        children: /*#__PURE__*/ _jsxDEV("div", {
                                            className: `${baseClass}__titleWrap`,
                                            children: [
                                                /*#__PURE__*/ _jsxDEV("h3", {
                                                    children: t('upload:focalPoint')
                                                }, void 0, false, {
                                                    fileName: "src/elements/EditUpload/index.tsx",
                                                    lineNumber: 297,
                                                    columnNumber: 21
                                                }, this),
                                                /*#__PURE__*/ _jsxDEV(Button, {
                                                    buttonStyle: "none",
                                                    className: `${baseClass}__reset`,
                                                    onClick: centerFocalPoint,
                                                    children: t('general:reset')
                                                }, void 0, false, {
                                                    fileName: "src/elements/EditUpload/index.tsx",
                                                    lineNumber: 298,
                                                    columnNumber: 21
                                                }, this)
                                            ]
                                        }, void 0, true, {
                                            fileName: "src/elements/EditUpload/index.tsx",
                                            lineNumber: 296,
                                            columnNumber: 19
                                        }, this)
                                    }, void 0, false, {
                                        fileName: "src/elements/EditUpload/index.tsx",
                                        lineNumber: 295,
                                        columnNumber: 17
                                    }, this),
                                    /*#__PURE__*/ _jsxDEV("span", {
                                        className: `${baseClass}__description`,
                                        children: t('upload:focalPointDescription')
                                    }, void 0, false, {
                                        fileName: "src/elements/EditUpload/index.tsx",
                                        lineNumber: 307,
                                        columnNumber: 17
                                    }, this),
                                    /*#__PURE__*/ _jsxDEV("div", {
                                        className: `${baseClass}__inputsWrap`,
                                        children: [
                                            /*#__PURE__*/ _jsxDEV(Input, {
                                                name: "X %",
                                                onChange: (value)=>fineTuneFocalPosition({
                                                        coordinate: 'x',
                                                        value
                                                    }),
                                                value: focalPosition.x.toFixed(0)
                                            }, void 0, false, {
                                                fileName: "src/elements/EditUpload/index.tsx",
                                                lineNumber: 311,
                                                columnNumber: 19
                                            }, this),
                                            /*#__PURE__*/ _jsxDEV(Input, {
                                                name: "Y %",
                                                onChange: (value)=>fineTuneFocalPosition({
                                                        coordinate: 'y',
                                                        value
                                                    }),
                                                value: focalPosition.y.toFixed(0)
                                            }, void 0, false, {
                                                fileName: "src/elements/EditUpload/index.tsx",
                                                lineNumber: 316,
                                                columnNumber: 19
                                            }, this)
                                        ]
                                    }, void 0, true, {
                                        fileName: "src/elements/EditUpload/index.tsx",
                                        lineNumber: 310,
                                        columnNumber: 17
                                    }, this)
                                ]
                            }, void 0, true, {
                                fileName: "src/elements/EditUpload/index.tsx",
                                lineNumber: 294,
                                columnNumber: 15
                            }, this)
                        ]
                    }, void 0, true, {
                        fileName: "src/elements/EditUpload/index.tsx",
                        lineNumber: 250,
                        columnNumber: 11
                    }, this)
                ]
            }, void 0, true, {
                fileName: "src/elements/EditUpload/index.tsx",
                lineNumber: 200,
                columnNumber: 7
            }, this)
        ]
    }, void 0, true, {
        fileName: "src/elements/EditUpload/index.tsx",
        lineNumber: 175,
        columnNumber: 5
    }, this);
};
const DraggableElement = ({ boundsRef, checkBounds, children, className, containerRef, initialPosition = {
    x: 50,
    y: 50
}, onDragEnd, setCheckBounds })=>{
    const [position, setPosition] = useState({
        x: initialPosition.x,
        y: initialPosition.y
    });
    const [isDragging, setIsDragging] = useState(false);
    const dragRef = useRef(undefined);
    const getCoordinates = React.useCallback((mouseXArg, mouseYArg, recenter)=>{
        const containerRect = containerRef.current.getBoundingClientRect();
        const boundsRect = boundsRef.current.getBoundingClientRect();
        const mouseX = mouseXArg ?? boundsRect.left;
        const mouseY = mouseYArg ?? boundsRect.top;
        const xOutOfBounds = mouseX < boundsRect.left || mouseX > boundsRect.right;
        const yOutOfBounds = mouseY < boundsRect.top || mouseY > boundsRect.bottom;
        let x = (mouseX - containerRect.left) / containerRect.width * 100;
        let y = (mouseY - containerRect.top) / containerRect.height * 100;
        const xCenter = (boundsRect.left - containerRect.left + boundsRect.width / 2) / containerRect.width * 100;
        const yCenter = (boundsRect.top - containerRect.top + boundsRect.height / 2) / containerRect.height * 100;
        if (xOutOfBounds || yOutOfBounds) {
            setIsDragging(false);
            if (mouseX < boundsRect.left) {
                x = (boundsRect.left - containerRect.left) / containerRect.width * 100;
            } else if (mouseX > boundsRect.right) {
                x = (containerRect.width - (containerRect.right - boundsRect.right)) / containerRect.width * 100;
            }
            if (mouseY < boundsRect.top) {
                y = (boundsRect.top - containerRect.top) / containerRect.height * 100;
            } else if (mouseY > boundsRect.bottom) {
                y = (containerRect.height - (containerRect.bottom - boundsRect.bottom)) / containerRect.height * 100;
            }
            if (recenter) {
                x = xOutOfBounds ? xCenter : x;
                y = yOutOfBounds ? yCenter : y;
            }
        }
        return {
            x,
            y
        };
    }, [
        boundsRef,
        containerRef
    ]);
    const handleMouseDown = (event)=>{
        event.preventDefault();
        setIsDragging(true);
    };
    const handleMouseMove = (event)=>{
        if (!isDragging) {
            return null;
        }
        const { x, y } = getCoordinates(event.clientX, event.clientY);
        setPosition({
            x,
            y
        });
    };
    const onDrop = ()=>{
        setIsDragging(false);
        onDragEnd(position);
    };
    React.useEffect(()=>{
        if (isDragging || !dragRef.current) {
            return;
        }
        if (checkBounds) {
            const { height, left, top, width } = dragRef.current.getBoundingClientRect();
            const { x, y } = getCoordinates(left + width / 2, top + height / 2, true);
            onDragEnd({
                x,
                y
            });
            setPosition({
                x,
                y
            });
            setCheckBounds(false);
            return;
        }
    }, [
        getCoordinates,
        isDragging,
        checkBounds,
        setCheckBounds,
        position.x,
        position.y,
        onDragEnd
    ]);
    React.useEffect(()=>{
        setPosition({
            x: initialPosition.x,
            y: initialPosition.y
        });
    }, [
        initialPosition.x,
        initialPosition.y
    ]);
    return /*#__PURE__*/ _jsxDEV("div", {
        className: [
            `${baseClass}__draggable-container`,
            isDragging && `${baseClass}__draggable-container--dragging`
        ].filter(Boolean).join(' '),
        onMouseMove: handleMouseMove,
        children: [
            /*#__PURE__*/ _jsxDEV("button", {
                className: [
                    `${baseClass}__draggable`,
                    className
                ].filter(Boolean).join(' '),
                onMouseDown: handleMouseDown,
                onMouseUp: onDrop,
                ref: dragRef,
                style: {
                    left: `${position.x}%`,
                    top: `${position.y}%`
                },
                type: "button",
                children: children
            }, void 0, false, {
                fileName: "src/elements/EditUpload/index.tsx",
                lineNumber: 439,
                columnNumber: 7
            }, this),
            /*#__PURE__*/ _jsxDEV("div", {}, void 0, false, {
                fileName: "src/elements/EditUpload/index.tsx",
                lineNumber: 449,
                columnNumber: 7
            }, this)
        ]
    }, void 0, true, {
        fileName: "src/elements/EditUpload/index.tsx",
        lineNumber: 430,
        columnNumber: 5
    }, this);
};

//# sourceMappingURL=index.js.map