"use strict";
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const utils_1 = require("@onesy/utils");
const style_react_1 = require("@onesy/style-react");
const Tooltip_1 = __importDefault(require("../Tooltip"));
const utils_2 = require("../utils");
const useStyle = (0, style_react_1.style)(theme => {
    const dot = {
        display: 'inline-block',
        position: 'absolute',
        width: '6px',
        height: '6px',
        borderRadius: '50%',
        background: '#a4a4a4',
        outline: '1px solid white'
    };
    return {
        root: {
            width: '100%',
            minHeight: '1px',
            lineHeight: '0',
            userSelect: 'none',
            overflow: 'hidden'
        },
        mouseDown_move: {
            '& *': {
                cursor: 'grab !important'
            }
        },
        mouseDown_top: {
            '& *': {
                cursor: 'ns-resize !important'
            }
        },
        mouseDown_left: {
            '& *': {
                cursor: 'ew-resize !important'
            }
        },
        mouseDown_right: {
            '& *': {
                cursor: 'ew-resize !important'
            }
        },
        mouseDown_bottom: {
            '& *': {
                cursor: 'ns-resize !important'
            }
        },
        mouseDown_top_left: {
            '& *': {
                cursor: 'nwse-resize !important'
            }
        },
        mouseDown_top_right: {
            '& *': {
                cursor: 'nesw-resize !important'
            }
        },
        mouseDown_bottom_left: {
            '& *': {
                cursor: 'nesw-resize !important'
            }
        },
        mouseDown_bottom_right: {
            '& *': {
                cursor: 'nwse-resize !important'
            }
        },
        canvas: {
            position: 'absolute',
            zIndex: '0'
        },
        canvas_main: {
            position: 'relative',
            width: '100%',
            height: 'auto'
        },
        canvas_imageSelector: {
            zIndex: -1
        },
        background: {
            position: 'absolute',
            inset: '0',
            width: '100%',
            height: '100%',
            opacity: '0',
            background: theme.methods.palette.color.colorToRgb(theme.palette.text.default.primary, 44),
            transition: theme.methods.transitions.make('opacity', { duration: 'xxs' }),
            zIndex: '1'
        },
        background_in: {
            opacity: '1'
        },
        imageSelector_main: {
            position: 'absolute',
            top: '0',
            left: '0',
            width: '0',
            height: '0',
            outline: '2px dashed white',
            background: 'transparent',
            touchAction: 'none',
            opacity: '0',
            zIndex: '14',
            userSelect: 'none',
            transition: theme.methods.transitions.make('opacity'),
        },
        imageSelector_main_in: {
            opacity: '1'
        },
        imageSelector: {
            position: 'absolute',
            top: '0',
            left: '0',
            width: '0',
            height: '0',
            touchAction: 'none',
            overflow: 'hidden',
            userSelect: 'none',
            zIndex: '11'
        },
        move: {
            position: 'absolute',
            inset: '0',
            width: '100%',
            height: '100%',
            cursor: 'grab',
            '&:active': {
                cursor: 'grabbing !important'
            }
        },
        grid_line: {
            position: 'absolute',
            background: 'white',
            mixBlendMode: 'difference'
        },
        grid_line_top_start: {
            top: '33.3333%',
            insetInline: '0',
            width: '100%',
            height: '1px'
        },
        grid_line_top_end: {
            top: '66.6666%',
            insetInline: '0',
            width: '100%',
            height: '1px'
        },
        grid_line_left_start: {
            left: '33.3333%',
            insetBlock: '0',
            width: '1px',
            height: '100%'
        },
        grid_line_left_end: {
            left: '66.6666%',
            insetBlock: '0',
            width: '1px',
            height: '100%'
        },
        dot: Object.assign({}, dot),
        dot_top_left: {
            top: '-1px',
            left: '-1px',
            transform: 'translate(-50%, -50%)',
            cursor: 'nwse-resize'
        },
        dot_top_right: {
            top: '-1px',
            right: '-1px',
            transform: 'translate(50%, -50%)',
            cursor: 'nesw-resize'
        },
        dot_bottom_left: {
            bottom: '-1px',
            left: '-1px',
            transform: 'translate(-50%, 50%)',
            cursor: 'nesw-resize'
        },
        dot_bottom_right: {
            bottom: '-1px',
            right: '-1px',
            transform: 'translate(50%, 50%)',
            cursor: 'nwse-resize'
        },
        border: {
            position: 'absolute'
        },
        border_top: {
            top: '-2px',
            height: '2px',
            width: '100%',
            cursor: 'ns-resize',
            '&::before': Object.assign(Object.assign({}, dot), { content: '""', top: '50%', left: '50%', transform: 'translate(-50%, -50%)' })
        },
        border_left: {
            left: '-2px',
            height: '100%',
            width: '2px',
            cursor: 'ew-resize',
            '&::before': Object.assign(Object.assign({}, dot), { content: '""', top: '50%', left: '50%', transform: 'translate(-50%, -50%)' })
        },
        border_right: {
            right: '-2px',
            height: '100%',
            width: '2px',
            cursor: 'ew-resize',
            '&::before': Object.assign(Object.assign({}, dot), { content: '""', top: '50%', right: '50%', transform: 'translate(50%, -50%)' })
        },
        border_bottom: {
            bottom: '-2px',
            height: '2px',
            width: '100%',
            cursor: 'ns-resize',
            '&::before': Object.assign(Object.assign({}, dot), { content: '""', bottom: '50%', left: '50%', transform: 'translate(-50%, 50%)' })
        }
    };
}, { name: 'onesy-ImageCrop' });
const ImageCrop = react_1.default.forwardRef((props_, ref) => {
    var _a;
    const theme = (0, style_react_1.useOnesyTheme)();
    const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyImageCrop) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
    const Tooltip = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Tooltip) || Tooltip_1.default; }, [theme]);
    const { 
    // url, datauri or canvas
    image: image_, minWidth, minHeight, maxWidth, maxHeight, selectorDefault, selector: selector_, onSelectorChange: onSelectorChange_, type = `image/jpeg`, quality = 1, aspectRatio, gridLines, dynamicParent, onFocus: onFocus_, onBlur: onBlur_, TooltipProps, Component = 'div', className } = props, other = __rest(props, ["image", "minWidth", "minHeight", "maxWidth", "maxHeight", "selectorDefault", "selector", "onSelectorChange", "type", "quality", "aspectRatio", "gridLines", "dynamicParent", "onFocus", "onBlur", "TooltipProps", "Component", "className"]);
    const { classes } = useStyle();
    const [image, setImage] = react_1.default.useState();
    const [focus, setFocus] = react_1.default.useState();
    const [mouseDown, setMouseDown] = react_1.default.useState();
    const [selector, setSelector] = react_1.default.useState(selectorDefault !== undefined ? selectorDefault : selector_);
    const [selectorRelative, setSelectorRelative] = react_1.default.useState();
    const refs = {
        root: react_1.default.useRef(null),
        image: react_1.default.useRef(null),
        mouseDown: react_1.default.useRef(null),
        selector: react_1.default.useRef(null),
        imageSelectorMain: react_1.default.useRef(null),
        imageSelector: react_1.default.useRef(null),
        previousMouseEvent: react_1.default.useRef(null),
        canvasMain: react_1.default.useRef(null),
        canvasImageSelector: react_1.default.useRef(null),
        move: react_1.default.useRef(null),
        borderTop: react_1.default.useRef(null),
        borderLeft: react_1.default.useRef(null),
        borderRight: react_1.default.useRef(null),
        borderBottom: react_1.default.useRef(null),
        dotTopLeft: react_1.default.useRef(null),
        dotTopRight: react_1.default.useRef(null),
        dotBottomLeft: react_1.default.useRef(null),
        dotBottomRight: react_1.default.useRef(null),
        props: react_1.default.useRef(null),
        dynamicParent: react_1.default.useRef(null),
        focus: react_1.default.useRef(null),
        aspectRatio: react_1.default.useRef(null)
    };
    refs.image.current = image;
    refs.mouseDown.current = mouseDown;
    refs.selector.current = selector;
    refs.props.current = props;
    refs.focus.current = focus;
    refs.dynamicParent.current = dynamicParent;
    refs.aspectRatio.current = aspectRatio;
    const onSelectorChange = (valueNew) => {
        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
        // min, max for width, height
        // + resolve it to max width and height for aspect ratio
        if ((0, utils_1.is)('object', valueNew) && !!Object.keys(valueNew).length && refs.root.current) {
            const rootRect = (_a = refs.root.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
            const minWidth_ = refs.props.current.minWidth !== undefined ? refs.props.current.minWidth : Number.MIN_SAFE_INTEGER;
            const minHeight_ = refs.props.current.minHeight !== undefined ? refs.props.current.minHeight : Number.MIN_SAFE_INTEGER;
            const maxWidth_ = refs.props.current.maxWidth !== undefined ? refs.props.current.maxWidth : Number.MAX_SAFE_INTEGER;
            const maxHeight_ = refs.props.current.maxHeight !== undefined ? refs.props.current.maxHeight : Number.MAX_SAFE_INTEGER;
            valueNew.width = (0, utils_1.clamp)(valueNew.width, minWidth_, maxWidth_);
            valueNew.height = (0, utils_1.clamp)(valueNew.height, minHeight_, maxHeight_);
            if (refs.aspectRatio.current !== undefined) {
                if (valueNew.width + (valueNew.width / refs.aspectRatio.current) >= valueNew.height + (valueNew.height * refs.aspectRatio.current)) {
                    valueNew.height = valueNew.width / refs.aspectRatio.current;
                }
                else {
                    valueNew.width = valueNew.height * refs.aspectRatio.current;
                }
                // Max width
                if (valueNew.left + valueNew.width > rootRect.width) {
                    valueNew.width = rootRect.width - valueNew.left;
                    valueNew.height = valueNew.width / refs.aspectRatio.current;
                }
                // Max height
                if (valueNew.top + valueNew.height > rootRect.height) {
                    valueNew.height = rootRect.height - valueNew.top;
                    valueNew.width = valueNew.height * refs.aspectRatio.current;
                }
                // Max width, height per maxWidth and maxHeight
                if (valueNew.width < minWidth_ || valueNew.width > maxWidth_) {
                    valueNew.width = (0, utils_1.clamp)(valueNew.width, minWidth_, maxWidth_);
                    valueNew.height = valueNew.width / refs.aspectRatio.current;
                }
                if (valueNew.height < minHeight_ || valueNew.height > maxHeight_) {
                    valueNew.height = (0, utils_1.clamp)(valueNew.height, minHeight_, maxHeight_);
                    valueNew.width = valueNew.height / refs.aspectRatio.current;
                }
            }
            // If previous values are within maxWidth and/or maxHeight
            // and left or top are not same as before
            // return
            if (!['move'].includes((_b = refs.mouseDown.current) === null || _b === void 0 ? void 0 : _b.version)) {
                if (maxWidth_ !== undefined || maxHeight_ !== undefined) {
                    if ((valueNew.top < ((_c = refs.selector.current) === null || _c === void 0 ? void 0 : _c.top) || valueNew.left < ((_d = refs.selector.current) === null || _d === void 0 ? void 0 : _d.left)) && (((_e = refs.selector.current) === null || _e === void 0 ? void 0 : _e.width) === maxWidth_ || ((_f = refs.selector.current) === null || _f === void 0 ? void 0 : _f.height) === maxHeight_))
                        return;
                }
            }
        }
        const rootRect_ = refs.root.current.getBoundingClientRect();
        const selectorRelative_ = {
            top: (valueNew.top / (rootRect_ === null || rootRect_ === void 0 ? void 0 : rootRect_.height)) * ((_g = refs.canvasMain.current) === null || _g === void 0 ? void 0 : _g.height),
            left: (valueNew.left / (rootRect_ === null || rootRect_ === void 0 ? void 0 : rootRect_.width)) * ((_h = refs.canvasMain.current) === null || _h === void 0 ? void 0 : _h.width),
            width: (valueNew.width / (rootRect_ === null || rootRect_ === void 0 ? void 0 : rootRect_.width)) * ((_j = refs.canvasMain.current) === null || _j === void 0 ? void 0 : _j.width),
            height: (valueNew.height / (rootRect_ === null || rootRect_ === void 0 ? void 0 : rootRect_.height)) * ((_k = refs.canvasMain.current) === null || _k === void 0 ? void 0 : _k.height)
        };
        // Update inner or controlled
        if (!props.hasOwnProperty('selector')) {
            setSelector(valueNew);
            setSelectorRelative(selectorRelative_);
        }
        if ((0, utils_1.is)('function', onSelectorChange_))
            onSelectorChange_(selectorRelative_);
    };
    react_1.default.useEffect(() => {
        var _a;
        const method = (event) => {
            switch (event.key) {
                case 'Escape':
                    if (refs.focus.current)
                        setSelector({});
                    break;
                default:
                    break;
            }
        };
        const onMouseUp = (event) => {
            setMouseDown(false);
            refs.previousMouseEvent.current = undefined;
        };
        // Move
        const onMove = (x, y) => {
            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
            if (refs.mouseDown.current && refs.previousMouseEvent.current) {
                const { top: previousTop, left: previousLeft } = refs.mouseDown.current;
                const rootRect = refs.root.current.getBoundingClientRect();
                const selectorRect_ = refs.imageSelectorMain.current.getBoundingClientRect();
                const selectorRect = {};
                // Normalize relative to root
                selectorRect.width = selectorRect_.width;
                selectorRect.height = selectorRect_.height;
                selectorRect.top = selectorRect_.top - rootRect.top;
                selectorRect.left = selectorRect_.left - rootRect.left;
                selectorRect.right = selectorRect.left + selectorRect_.width;
                selectorRect.bottom = selectorRect.top + selectorRect_.height;
                if (((_a = refs.mouseDown.current) === null || _a === void 0 ? void 0 : _a.version) === 'make') {
                    const top_ = (0, utils_1.clamp)(y - rootRect.top, 0, rootRect.height);
                    const left_ = (0, utils_1.clamp)(x - rootRect.left, 0, rootRect.width);
                    let top = (0, utils_1.clamp)(top_, 0, previousTop);
                    let left = (0, utils_1.clamp)(left_, 0, previousLeft);
                    let width = Math.abs(left_ - previousLeft);
                    let height = Math.abs(top_ - previousTop);
                    if (refs.aspectRatio.current !== undefined) {
                        if (left < previousLeft) {
                            if (((_b = refs.selector.current) === null || _b === void 0 ? void 0 : _b.left) < previousLeft && left < ((_c = refs.selector.current) === null || _c === void 0 ? void 0 : _c.left) && (top <= 0 || ((_d = refs.selector.current) === null || _d === void 0 ? void 0 : _d.top) + ((_e = refs.selector.current) === null || _e === void 0 ? void 0 : _e.height) >= rootRect.height))
                                return;
                        }
                        if (top < previousTop) {
                            if (((_f = refs.selector.current) === null || _f === void 0 ? void 0 : _f.top) < previousTop && top < ((_g = refs.selector.current) === null || _g === void 0 ? void 0 : _g.top) && (left <= 0 || ((_h = refs.selector.current) === null || _h === void 0 ? void 0 : _h.left) + ((_j = refs.selector.current) === null || _j === void 0 ? void 0 : _j.width) >= rootRect.width))
                                return;
                        }
                        // Max surface
                        if (width + (width / refs.aspectRatio.current) >= height + (height * refs.aspectRatio.current)) {
                            height = width / refs.aspectRatio.current;
                        }
                        else {
                            width = height * refs.aspectRatio.current;
                        }
                        // Moved left
                        if (left < previousLeft) {
                            left = (0, utils_1.clamp)(previousLeft - width, 0, previousLeft);
                            // Update width, height upto the previousLeft
                            width = (0, utils_1.clamp)(width, 0, previousLeft);
                            height = width / refs.aspectRatio.current;
                        }
                        // Moved top
                        if (top < previousTop) {
                            top = (0, utils_1.clamp)(previousTop - height, 0, previousTop);
                            // Update width, height upto the previousTop
                            height = (0, utils_1.clamp)(height, 0, previousTop);
                            width = height * refs.aspectRatio.current;
                        }
                        // Max width
                        if (left + width > rootRect.width) {
                            width = rootRect.width - left;
                            height = width / refs.aspectRatio.current;
                        }
                        // Max height
                        if (top + height > rootRect.height) {
                            height = rootRect.height - top;
                            width = height * refs.aspectRatio.current;
                        }
                        // Min left
                        if (left < previousLeft)
                            left = previousLeft - width;
                        // Min top
                        if (top < previousTop)
                            top = previousTop - height;
                    }
                    onSelectorChange(Object.assign(Object.assign({}, refs.selector.current), { top,
                        left,
                        width,
                        height }));
                }
                else if (((_k = refs.mouseDown.current) === null || _k === void 0 ? void 0 : _k.version) === 'move') {
                    const top = y - refs.previousMouseEvent.current.clientY;
                    const left = x - refs.previousMouseEvent.current.clientX;
                    onSelectorChange(Object.assign(Object.assign({}, refs.selector.current), { top: (0, utils_1.clamp)(refs.selector.current.top + top, 0, rootRect.height - selectorRect.height), left: (0, utils_1.clamp)(refs.selector.current.left + left, 0, rootRect.width - selectorRect.width) }));
                }
                else if (((_l = refs.mouseDown.current) === null || _l === void 0 ? void 0 : _l.version) === 'top_left') {
                    const incY = y - refs.previousMouseEvent.current.clientY;
                    const incX = x - refs.previousMouseEvent.current.clientX;
                    let top = (0, utils_1.clamp)(selectorRect.top + incY, 0);
                    let left = (0, utils_1.clamp)(selectorRect.left + incX, 0);
                    if ((selectorRect.bottom - top < 0) &&
                        (selectorRect.right - left < 0))
                        refs.mouseDown.current.version = 'bottom_right';
                    else if (selectorRect.bottom - top < 0)
                        refs.mouseDown.current.version = 'bottom_left';
                    else if (selectorRect.right - left < 0)
                        refs.mouseDown.current.version = 'top_right';
                    let width = (0, utils_1.clamp)(selectorRect.right - left, 0);
                    let height = (0, utils_1.clamp)(selectorRect.bottom - top, 0);
                    if (refs.aspectRatio.current !== undefined) {
                        // Left
                        if (left < refs.selector.current.left && refs.selector.current.left < previousLeft && ((_m = refs.selector.current) === null || _m === void 0 ? void 0 : _m.top) === 0)
                            return;
                        // Max surface
                        if (width + (width / refs.aspectRatio.current) >= height + (height * refs.aspectRatio.current)) {
                            height = width / refs.aspectRatio.current;
                        }
                        else {
                            width = height * refs.aspectRatio.current;
                        }
                        // Moved left
                        if (left < previousLeft) {
                            left = (0, utils_1.clamp)(previousLeft - width, 0, previousLeft);
                            // Update width, height upto the previousLeft
                            width = (0, utils_1.clamp)(width, 0, previousLeft);
                            height = width / refs.aspectRatio.current;
                        }
                        // Moved top
                        if (top < previousTop) {
                            top = (0, utils_1.clamp)(previousTop - height, 0, previousTop);
                            // Update width, height upto the previousTop
                            height = (0, utils_1.clamp)(height, 0, previousTop);
                            width = height * refs.aspectRatio.current;
                        }
                        // Max width
                        if (left + width > rootRect.width) {
                            width = rootRect.width - left;
                            height = width / refs.aspectRatio.current;
                        }
                        // Max height
                        if (top + height > rootRect.height) {
                            height = rootRect.height - top;
                            width = height * refs.aspectRatio.current;
                        }
                        // Min left
                        if (left < previousLeft)
                            left = previousLeft - width;
                        // Min top
                        if (top < previousTop)
                            top = previousTop - height;
                    }
                    onSelectorChange(Object.assign(Object.assign({}, refs.selector.current), { top,
                        left,
                        width,
                        height }));
                }
                else if (((_o = refs.mouseDown.current) === null || _o === void 0 ? void 0 : _o.version) === 'top_right') {
                    const incY = y - refs.previousMouseEvent.current.clientY;
                    const incX = x - refs.previousMouseEvent.current.clientX;
                    const top = (0, utils_1.clamp)(selectorRect.top + incY, 0);
                    if ((selectorRect.bottom - top < 0) &&
                        (selectorRect.width + incX < 0))
                        refs.mouseDown.current.version = 'bottom_left';
                    else if (selectorRect.bottom - top < 0)
                        refs.mouseDown.current.version = 'bottom_right';
                    else if (selectorRect.width + incX < 0)
                        refs.mouseDown.current.version = 'top_left';
                    let width = (0, utils_1.clamp)(Math.abs(selectorRect.width + incX), 0, rootRect.width - selectorRect.left);
                    let height = (0, utils_1.clamp)(selectorRect.bottom - top, 0);
                    // Top
                    if (refs.aspectRatio.current !== undefined) {
                        // Top
                        if (top < refs.selector.current.top && refs.selector.current.top < previousTop && refs.selector.current.left + refs.selector.current.width >= rootRect.width)
                            return;
                        width = height * refs.aspectRatio.current;
                        height = width / refs.aspectRatio.current;
                        // Max width
                        if (refs.selector.current.left + width > rootRect.width) {
                            width = rootRect.width - refs.selector.current.left;
                            height = width / refs.aspectRatio.current;
                        }
                        // Max height
                        if (refs.selector.current.top + height > rootRect.height) {
                            height = rootRect.height - refs.selector.current.top;
                            width = height * refs.aspectRatio.current;
                        }
                    }
                    onSelectorChange(Object.assign(Object.assign({}, refs.selector.current), { top,
                        width,
                        height }));
                }
                else if (((_p = refs.mouseDown.current) === null || _p === void 0 ? void 0 : _p.version) === 'bottom_right') {
                    const incY = y - refs.previousMouseEvent.current.clientY;
                    const incX = x - refs.previousMouseEvent.current.clientX;
                    if ((selectorRect.height + incY < 0) && (selectorRect.width + incX < 0))
                        refs.mouseDown.current.version = 'top_left';
                    else if (selectorRect.height + incY < 0)
                        refs.mouseDown.current.version = 'top_right';
                    else if (selectorRect.width + incX < 0)
                        refs.mouseDown.current.version = 'bottom_left';
                    let width = (0, utils_1.clamp)(Math.abs(selectorRect.width + incX), 0, rootRect.width - selectorRect.left);
                    let height = (0, utils_1.clamp)(Math.abs(selectorRect.height + incY), 0, rootRect.height - selectorRect.top);
                    // Right
                    if (refs.aspectRatio.current !== undefined) {
                        height = width / refs.aspectRatio.current;
                        // Max width
                        if (refs.selector.current.left + width > rootRect.width) {
                            width = rootRect.width - refs.selector.current.left;
                            height = width / refs.aspectRatio.current;
                        }
                        // Max height
                        if (refs.selector.current.top + height > rootRect.height) {
                            height = rootRect.height - refs.selector.current.top;
                            width = height * refs.aspectRatio.current;
                        }
                        width = height * refs.aspectRatio.current;
                        // Max width
                        if (refs.selector.current.left + width > rootRect.width) {
                            width = rootRect.width - refs.selector.current.left;
                            height = width / refs.aspectRatio.current;
                        }
                        // Max height
                        if (refs.selector.current.top + height > rootRect.height) {
                            height = rootRect.height - refs.selector.current.top;
                            width = height * refs.aspectRatio.current;
                        }
                    }
                    onSelectorChange(Object.assign(Object.assign({}, refs.selector.current), { width,
                        height }));
                }
                else if (((_q = refs.mouseDown.current) === null || _q === void 0 ? void 0 : _q.version) === 'bottom_left') {
                    const incY = y - refs.previousMouseEvent.current.clientY;
                    const incX = x - refs.previousMouseEvent.current.clientX;
                    const left = (0, utils_1.clamp)(selectorRect.left + incX, 0);
                    if ((selectorRect.height + incY < 0) && (selectorRect.right - left < 0))
                        refs.mouseDown.current.version = 'top_right';
                    else if (selectorRect.height + incY < 0)
                        refs.mouseDown.current.version = 'top_left';
                    else if (selectorRect.right - left < 0)
                        refs.mouseDown.current.version = 'bottom_right';
                    let width = (0, utils_1.clamp)(selectorRect.right - left, 0);
                    let height = (0, utils_1.clamp)(Math.abs(selectorRect.height + incY), 0, rootRect.height - selectorRect.top);
                    // Left
                    if (refs.aspectRatio.current !== undefined) {
                        // Left
                        if (left < refs.selector.current.left && ((_r = refs.selector.current) === null || _r === void 0 ? void 0 : _r.top) + ((_s = refs.selector.current) === null || _s === void 0 ? void 0 : _s.height) >= rootRect.height)
                            return;
                        height = width / refs.aspectRatio.current;
                        // Max width
                        if (refs.selector.current.left + width > rootRect.width) {
                            width = rootRect.width - refs.selector.current.left;
                            height = width / refs.aspectRatio.current;
                        }
                        // Max height
                        if (refs.selector.current.top + height > rootRect.height) {
                            height = rootRect.height - refs.selector.current.top;
                            width = height * refs.aspectRatio.current;
                        }
                        width = height * refs.aspectRatio.current;
                        // Max width
                        if (refs.selector.current.left + width > rootRect.width) {
                            width = rootRect.width - refs.selector.current.left;
                            height = width / refs.aspectRatio.current;
                        }
                        // Max height
                        if (refs.selector.current.top + height > rootRect.height) {
                            height = rootRect.height - refs.selector.current.top;
                            width = height * refs.aspectRatio.current;
                        }
                    }
                    onSelectorChange(Object.assign(Object.assign({}, refs.selector.current), { left,
                        width,
                        height }));
                }
                else if (((_t = refs.mouseDown.current) === null || _t === void 0 ? void 0 : _t.version) === 'top') {
                    const inc = y - refs.previousMouseEvent.current.clientY;
                    const top = (0, utils_1.clamp)(refs.selector.current.top + inc, 0);
                    if (refs.selector.current.top <= 0 && top <= 0)
                        return;
                    if (selectorRect.bottom - top < 0)
                        refs.mouseDown.current.version = 'bottom';
                    let width = refs.selector.current.width;
                    let height = (0, utils_1.clamp)(Math.abs(refs.selector.current.height - inc), 0, previousTop - top);
                    if (refs.aspectRatio.current !== undefined) {
                        // Top
                        if (top < refs.selector.current.top && refs.selector.current.top < previousTop && refs.selector.current.left + refs.selector.current.width >= rootRect.width)
                            return;
                        width = height * refs.aspectRatio.current;
                        // Max width
                        if (refs.selector.current.left + width > rootRect.width) {
                            width = rootRect.width - refs.selector.current.left;
                            height = width / refs.aspectRatio.current;
                        }
                        // Max height
                        if (top + height > rootRect.height) {
                            height = rootRect.height - top;
                            width = height * refs.aspectRatio.current;
                        }
                    }
                    onSelectorChange(Object.assign(Object.assign({}, refs.selector.current), { top,
                        width,
                        height }));
                }
                else if (((_u = refs.mouseDown.current) === null || _u === void 0 ? void 0 : _u.version) === 'bottom') {
                    const inc = y - refs.previousMouseEvent.current.clientY;
                    if (selectorRect.height + inc < 0)
                        refs.mouseDown.current.version = 'top';
                    let width = refs.selector.current.width;
                    let height = (0, utils_1.clamp)(Math.abs(selectorRect.height + inc), 0, rootRect.height - refs.selector.current.top);
                    if (refs.aspectRatio.current !== undefined) {
                        width = height * refs.aspectRatio.current;
                        // Max height
                        if (refs.selector.current.top + height > rootRect.height) {
                            height = rootRect.height - refs.selector.current.top;
                            width = height * refs.aspectRatio.current;
                        }
                        // Max width
                        if (refs.selector.current.left + width > rootRect.width) {
                            width = rootRect.width - refs.selector.current.left;
                            height = width / refs.aspectRatio.current;
                        }
                    }
                    onSelectorChange(Object.assign(Object.assign({}, refs.selector.current), { width,
                        height }));
                }
                else if (((_v = refs.mouseDown.current) === null || _v === void 0 ? void 0 : _v.version) === 'left') {
                    const inc = x - refs.previousMouseEvent.current.clientX;
                    const left = (0, utils_1.clamp)(selectorRect.left + inc, 0);
                    if (selectorRect.right - left < 0)
                        refs.mouseDown.current.version = 'right';
                    let width = (0, utils_1.clamp)(selectorRect.right - left, 0);
                    let height = refs.selector.current.height;
                    if (refs.aspectRatio.current !== undefined) {
                        if (left < refs.selector.current.left && ((_w = refs.selector.current) === null || _w === void 0 ? void 0 : _w.top) + ((_x = refs.selector.current) === null || _x === void 0 ? void 0 : _x.height) >= rootRect.height)
                            return;
                        height = width / refs.aspectRatio.current;
                        // Max width
                        if (refs.selector.current.left + width > rootRect.width) {
                            width = rootRect.width - refs.selector.current.left;
                            height = width / refs.aspectRatio.current;
                        }
                        // Max height
                        if (refs.selector.current.top + height > rootRect.height) {
                            height = rootRect.height - refs.selector.current.top;
                            width = height * refs.aspectRatio.current;
                        }
                    }
                    onSelectorChange(Object.assign(Object.assign({}, refs.selector.current), { left,
                        width,
                        height }));
                }
                else if (((_y = refs.mouseDown.current) === null || _y === void 0 ? void 0 : _y.version) === 'right') {
                    const inc = x - refs.previousMouseEvent.current.clientX;
                    if (selectorRect.width + inc < 0)
                        refs.mouseDown.current.version = 'left';
                    let width = (0, utils_1.clamp)(Math.abs(selectorRect.width + inc), 0, rootRect.width - selectorRect.left);
                    let height = refs.selector.current.height;
                    if (refs.aspectRatio.current !== undefined) {
                        height = width / refs.aspectRatio.current;
                        // Max width
                        if (refs.selector.current.left + width > rootRect.width) {
                            width = rootRect.width - refs.selector.current.left;
                            height = width / refs.aspectRatio.current;
                        }
                        // Max height
                        if (refs.selector.current.top + height > rootRect.height) {
                            height = rootRect.height - refs.selector.current.top;
                            width = height * refs.aspectRatio.current;
                        }
                    }
                    onSelectorChange(Object.assign(Object.assign({}, refs.selector.current), { width,
                        height }));
                }
            }
        };
        // Mouse move
        const onMouseMove = (event) => {
            if (refs.mouseDown.current) {
                const { clientY, clientX } = event;
                onMove(clientX, clientY);
                refs.previousMouseEvent.current = event;
            }
        };
        // Touch move
        const onTouchMove = (event) => {
            if (refs.mouseDown.current) {
                const { clientY, clientX } = event.touches[0];
                onMove(clientX, clientY);
                refs.previousMouseEvent.current = event;
                // Normalize for use as a mouseDown value
                refs.previousMouseEvent.current.clientY = clientY;
                refs.previousMouseEvent.current.clientX = clientX;
            }
        };
        const rootDocument = (0, utils_1.isEnvironment)('browser') ? (((_a = refs.root.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) || window.document) : undefined;
        rootDocument.addEventListener('keydown', method);
        rootDocument.addEventListener('mousemove', onMouseMove);
        rootDocument.addEventListener('mouseup', onMouseUp);
        rootDocument.addEventListener('touchmove', onTouchMove, { passive: true });
        rootDocument.addEventListener('touchend', onMouseUp);
        return () => {
            // Clean up
            rootDocument.removeEventListener('keydown', method);
            rootDocument.removeEventListener('mousemove', onMouseMove);
            rootDocument.removeEventListener('mouseup', onMouseUp);
            rootDocument.removeEventListener('touchmove', onTouchMove);
            rootDocument.removeEventListener('touchend', onMouseUp);
            if (refs.image.current) {
                setImage('');
                if (rootDocument.body.style.overflow === 'hidden')
                    rootDocument.body.style.removeProperty('overflow');
            }
        };
    }, []);
    react_1.default.useEffect(() => {
        if (image_ !== image) {
            if (image_ instanceof HTMLCanvasElement)
                setImage(image_);
            else if ((0, utils_1.is)('string', image_))
                !refs.dynamicParent.current ? makeImage(image_) : setTimeout(() => makeImage(image_), 140);
        }
    }, [image_]);
    const updateSelector = (selector__ = refs.selector.current, image__ = refs.image.current) => {
        var _a, _b, _c, _d;
        if (selector__ !== undefined && image__ !== undefined) {
            const rootRect = refs.root.current.getBoundingClientRect();
            const selectorValue = {
                top: (0, utils_1.clamp)(selector__.top, 0, image__.height),
                left: (0, utils_1.clamp)(selector__.left, 0, image__.height)
            };
            selectorValue.width = (0, utils_1.clamp)((selector__.width || 0), 0, rootRect.width - selectorValue.left);
            selectorValue.height = (0, utils_1.clamp)((selector__.height || 0), 0, rootRect.height - selectorValue.top);
            // Aspect ratio
            if (refs.aspectRatio.current !== undefined) {
                // Max surface
                if (selectorValue.width + (selectorValue.width / refs.aspectRatio.current) >= selectorValue.height + (selectorValue.height * refs.aspectRatio.current)) {
                    selectorValue.height = selectorValue.width / refs.aspectRatio.current;
                }
                else {
                    selectorValue.width = selectorValue.height * refs.aspectRatio.current;
                }
                // Max width
                if (selectorValue.left + selectorValue.width > rootRect.width) {
                    selectorValue.width = rootRect.width - selectorValue.left;
                    selectorValue.height = selectorValue.width / refs.aspectRatio.current;
                }
                // Max height
                if (selectorValue.top + selectorValue.height > rootRect.height) {
                    selectorValue.height = rootRect.height - selectorValue.top;
                    selectorValue.width = selectorValue.height * refs.aspectRatio.current;
                }
            }
            // Update selector
            setSelector(selectorValue);
            // Update selector relative
            setSelectorRelative({
                top: (selectorValue.top / (rootRect === null || rootRect === void 0 ? void 0 : rootRect.height)) * ((_a = refs.canvasMain.current) === null || _a === void 0 ? void 0 : _a.height),
                left: (selectorValue.left / (rootRect === null || rootRect === void 0 ? void 0 : rootRect.width)) * ((_b = refs.canvasMain.current) === null || _b === void 0 ? void 0 : _b.width),
                width: (selectorValue.width / (rootRect === null || rootRect === void 0 ? void 0 : rootRect.width)) * ((_c = refs.canvasMain.current) === null || _c === void 0 ? void 0 : _c.width),
                height: (selectorValue.height / (rootRect === null || rootRect === void 0 ? void 0 : rootRect.height)) * ((_d = refs.canvasMain.current) === null || _d === void 0 ? void 0 : _d.height)
            });
        }
    };
    react_1.default.useEffect(() => {
        updateSelector();
    }, [aspectRatio]);
    react_1.default.useEffect(() => {
        if (selector_ !== selector)
            updateSelector(selector_);
    }, [selector_]);
    react_1.default.useEffect(() => {
        if (image) {
            refs.canvasMain.current.width = image.width;
            refs.canvasMain.current.height = image.height;
            refs.canvasMain.current.getContext('2d').drawImage(image, 0, 0), image.width, image.height;
            refs.canvasImageSelector.current.width = image.width;
            refs.canvasImageSelector.current.height = image.height;
            refs.canvasImageSelector.current.getContext('2d').drawImage(image, 0, 0), image.width, image.height;
            // Update selector
            updateSelector();
        }
    }, [image]);
    const makeImage = async (value = image) => {
        var _a;
        const img = await (0, utils_2.image)(value);
        const rootDocument = (0, utils_1.isEnvironment)('browser') ? (((_a = refs.root.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) || window.document) : undefined;
        const canvas = rootDocument.createElement('canvas');
        const rootRect = refs.root.current.getBoundingClientRect();
        const aspectRatioImg = img.width / img.height;
        // width being parent width
        img.width = rootRect.width;
        // height keep aspect ratio of the img for the height
        img.height = img.width / aspectRatioImg;
        canvas.width = img.width;
        canvas.height = img.height;
        canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
        setImage(canvas);
    };
    const onFocus = react_1.default.useCallback((event) => {
        setFocus(true);
        if ((0, utils_1.is)('function', onFocus_))
            onFocus_(event);
    }, []);
    const onBlur = react_1.default.useCallback((event) => {
        setFocus(false);
        if ((0, utils_1.is)('function', onBlur_))
            onBlur_(event);
    }, []);
    const onTouchStart = react_1.default.useCallback((event) => {
        if (![
            refs.imageSelectorMain.current,
            refs.imageSelector.current,
            refs.move.current,
            refs.borderTop.current,
            refs.borderLeft.current,
            refs.borderRight.current,
            refs.borderBottom.current,
            refs.dotTopLeft.current,
            refs.dotTopRight.current,
            refs.dotBottomLeft.current,
            refs.dotBottomRight.current
        ].includes(event.target)) {
            const { clientY, clientX } = event.touches[0];
            const rootRect = refs.root.current.getBoundingClientRect();
            setMouseDown({
                version: 'make',
                top: clientY - rootRect.top,
                left: clientX - rootRect.left
            });
        }
    }, []);
    const onMouseDown = react_1.default.useCallback((event) => {
        if (![
            refs.imageSelectorMain.current,
            refs.imageSelector.current,
            refs.move.current,
            refs.borderTop.current,
            refs.borderLeft.current,
            refs.borderRight.current,
            refs.borderBottom.current,
            refs.dotTopLeft.current,
            refs.dotTopRight.current,
            refs.dotBottomLeft.current,
            refs.dotBottomRight.current
        ].includes(event.target)) {
            const { clientY, clientX } = event;
            const rootRect = refs.root.current.getBoundingClientRect();
            setMouseDown({
                version: 'make',
                top: clientY - rootRect.top,
                left: clientX - rootRect.left
            });
        }
    }, []);
    const onTouchStartSelector = react_1.default.useCallback((event) => {
        const { clientY, clientX } = event.touches[0];
        const rootRect = refs.root.current.getBoundingClientRect();
        setMouseDown({
            version: 'move',
            top: clientY - rootRect.top,
            left: clientX - rootRect.left
        });
    }, []);
    const onMouseDownSelector = react_1.default.useCallback((event) => {
        const { clientY, clientX } = event;
        const rootRect = refs.root.current.getBoundingClientRect();
        setMouseDown({
            version: 'move',
            top: clientY - rootRect.top,
            left: clientX - rootRect.left
        });
    }, []);
    const onTouchStartBorder = (version) => (event) => {
        var _a, _b, _c, _d;
        setMouseDown({
            version,
            top: ((_a = refs.selector.current) === null || _a === void 0 ? void 0 : _a.top) + ((_b = refs.selector.current) === null || _b === void 0 ? void 0 : _b.height),
            left: ((_c = refs.selector.current) === null || _c === void 0 ? void 0 : _c.left) + ((_d = refs.selector.current) === null || _d === void 0 ? void 0 : _d.width)
        });
    };
    const onMouseDownBorder = (version) => (event) => {
        var _a, _b, _c, _d;
        setMouseDown({
            version,
            top: ((_a = refs.selector.current) === null || _a === void 0 ? void 0 : _a.top) + ((_b = refs.selector.current) === null || _b === void 0 ? void 0 : _b.height),
            left: ((_c = refs.selector.current) === null || _c === void 0 ? void 0 : _c.left) + ((_d = refs.selector.current) === null || _d === void 0 ? void 0 : _d.width)
        });
    };
    const rect = (_a = refs.root.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
    return ((0, jsx_runtime_1.jsxs)(Component, Object.assign({ ref: item => {
            if (ref) {
                if ((0, utils_1.is)('function', ref))
                    ref(item);
                else
                    ref.current = item;
            }
            refs.root.current = item;
        }, tabIndex: 0, onFocus: onFocus, onBlur: onBlur, onTouchStart: onTouchStart, onMouseDown: onMouseDown, className: (0, style_react_1.classNames)([
            (0, utils_2.staticClassName)('ImageCrop', theme) && [
                'onesy-ImageCrop-root'
            ],
            className,
            classes.root
        ]) }, other, { children: [(0, jsx_runtime_1.jsx)("canvas", { ref: refs.canvasMain, className: (0, style_react_1.classNames)([
                    (0, utils_2.staticClassName)('ImageCrop', theme) && [
                        'onesy-ImageCrop-canvas',
                        'onesy-ImageCrop-canvas-main'
                    ],
                    classes.canvas,
                    classes.canvas_main
                ]) }), (0, jsx_runtime_1.jsx)("div", { className: (0, style_react_1.classNames)([
                    (0, utils_2.staticClassName)('ImageCrop', theme) && [
                        'onesy-ImageCrop-background'
                    ],
                    classes.background,
                    image && classes.background_in
                ]) }), (0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ open: mouseDown && ((selector === null || selector === void 0 ? void 0 : selector.width) + (selector === null || selector === void 0 ? void 0 : selector.height) > 0), label: `${Math.round((selectorRelative === null || selectorRelative === void 0 ? void 0 : selectorRelative.width) || 0)} x ${Math.round((selectorRelative === null || selectorRelative === void 0 ? void 0 : selectorRelative.height) || 0)}`, position: 'bottom' }, TooltipProps, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: refs.imageSelectorMain, className: (0, style_react_1.classNames)([
                        (0, utils_2.staticClassName)('ImageCrop', theme) && [
                            'onesy-ImageCrop-image-selector-main'
                        ],
                        classes.imageSelector_main,
                        selector && classes.imageSelector_main_in
                    ]), style: Object.assign({}, selector) }, { children: [(0, jsx_runtime_1.jsx)("div", { ref: refs.move, onTouchStart: onTouchStartSelector, onMouseDown: onMouseDownSelector, className: (0, style_react_1.classNames)([
                                (0, utils_2.staticClassName)('ImageCrop', theme) && [
                                    'onesy-ImageCrop-move'
                                ],
                                classes.move
                            ]) }), gridLines && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: (0, style_react_1.classNames)([
                                        (0, utils_2.staticClassName)('ImageCrop', theme) && [
                                            'onesy-ImageCrop-grid-line',
                                            'onesy-ImageCrop-grid-line-top-start'
                                        ],
                                        classes.grid_line,
                                        classes.grid_line_top_start
                                    ]) }), (0, jsx_runtime_1.jsx)("div", { className: (0, style_react_1.classNames)([
                                        (0, utils_2.staticClassName)('ImageCrop', theme) && [
                                            'onesy-ImageCrop-grid-line',
                                            'onesy-ImageCrop-grid-line-top-end'
                                        ],
                                        classes.grid_line,
                                        classes.grid_line_top_end
                                    ]) }), (0, jsx_runtime_1.jsx)("div", { className: (0, style_react_1.classNames)([
                                        (0, utils_2.staticClassName)('ImageCrop', theme) && [
                                            'onesy-ImageCrop-grid-line',
                                            'onesy-ImageCrop-grid-line-left-start'
                                        ],
                                        classes.grid_line,
                                        classes.grid_line_left_start
                                    ]) }), (0, jsx_runtime_1.jsx)("div", { className: (0, style_react_1.classNames)([
                                        (0, utils_2.staticClassName)('ImageCrop', theme) && [
                                            'onesy-ImageCrop-grid-line',
                                            'onesy-ImageCrop-grid-line-left-end'
                                        ],
                                        classes.grid_line,
                                        classes.grid_line_left_end
                                    ]) })] }), (0, jsx_runtime_1.jsx)("div", { ref: refs.dotTopLeft, onTouchStart: onTouchStartBorder('top_left'), onMouseDown: onMouseDownBorder('top_left'), className: (0, style_react_1.classNames)([
                                (0, utils_2.staticClassName)('ImageCrop', theme) && [
                                    'onesy-ImageCrop-dot',
                                    'onesy-ImageCrop-dot-top-left'
                                ],
                                classes.dot,
                                classes.dot_top_left
                            ]) }), (0, jsx_runtime_1.jsx)("div", { ref: refs.dotTopRight, onTouchStart: onTouchStartBorder('top_right'), onMouseDown: onMouseDownBorder('top_right'), className: (0, style_react_1.classNames)([
                                (0, utils_2.staticClassName)('ImageCrop', theme) && [
                                    'onesy-ImageCrop-dot',
                                    'onesy-ImageCrop-dot-top-right'
                                ],
                                classes.dot,
                                classes.dot_top_right
                            ]) }), (0, jsx_runtime_1.jsx)("div", { ref: refs.dotBottomLeft, onTouchStart: onTouchStartBorder('bottom_left'), onMouseDown: onMouseDownBorder('bottom_left'), className: (0, style_react_1.classNames)([
                                (0, utils_2.staticClassName)('ImageCrop', theme) && [
                                    'onesy-ImageCrop-dot',
                                    'onesy-ImageCrop-dot-bottom-left'
                                ],
                                classes.dot,
                                classes.dot_bottom_left
                            ]) }), (0, jsx_runtime_1.jsx)("div", { ref: refs.dotBottomRight, onTouchStart: onTouchStartBorder('bottom_right'), onMouseDown: onMouseDownBorder('bottom_right'), className: (0, style_react_1.classNames)([
                                (0, utils_2.staticClassName)('ImageCrop', theme) && [
                                    'onesy-ImageCrop-dot',
                                    'onesy-ImageCrop-dot-bottom-right'
                                ],
                                classes.dot,
                                classes.dot_bottom_right
                            ]) }), (0, jsx_runtime_1.jsx)("div", { ref: refs.borderTop, onTouchStart: onTouchStartBorder('top'), onMouseDown: onMouseDownBorder('top'), className: (0, style_react_1.classNames)([
                                (0, utils_2.staticClassName)('ImageCrop', theme) && [
                                    'onesy-ImageCrop-border',
                                    'onesy-ImageCrop-border-top'
                                ],
                                classes.border,
                                classes.border_top
                            ]) }), (0, jsx_runtime_1.jsx)("div", { ref: refs.borderLeft, onTouchStart: onTouchStartBorder('left'), onMouseDown: onMouseDownBorder('left'), className: (0, style_react_1.classNames)([
                                (0, utils_2.staticClassName)('ImageCrop', theme) && [
                                    'onesy-ImageCrop-border',
                                    'onesy-ImageCrop-border-left'
                                ],
                                classes.border,
                                classes.border_left
                            ]) }), (0, jsx_runtime_1.jsx)("div", { ref: refs.borderRight, onTouchStart: onTouchStartBorder('right'), onMouseDown: onMouseDownBorder('right'), className: (0, style_react_1.classNames)([
                                (0, utils_2.staticClassName)('ImageCrop', theme) && [
                                    'onesy-ImageCrop-border',
                                    'onesy-ImageCrop-border-right'
                                ],
                                classes.border,
                                classes.border_right
                            ]) }), (0, jsx_runtime_1.jsx)("div", { ref: refs.borderBottom, onTouchStart: onTouchStartBorder('bottom'), onMouseDown: onMouseDownBorder('bottom'), className: (0, style_react_1.classNames)([
                                (0, utils_2.staticClassName)('ImageCrop', theme) && [
                                    'onesy-ImageCrop-border',
                                    'onesy-ImageCrop-border-bottom'
                                ],
                                classes.border,
                                classes.border_bottom
                            ]) })] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ ref: refs.imageSelector, className: (0, style_react_1.classNames)([
                    (0, utils_2.staticClassName)('ImageCrop', theme) && [
                        'onesy-ImageCrop-image-selector'
                    ],
                    classes.imageSelector
                ]), style: Object.assign({}, selector) }, { children: (0, jsx_runtime_1.jsx)("canvas", { ref: refs.canvasImageSelector, className: (0, style_react_1.classNames)([
                        (0, utils_2.staticClassName)('ImageCrop', theme) && [
                            'onesy-ImageCrop-canvas',
                            'onesy-ImageCrop-canvas-image-selector'
                        ],
                        classes.canvas,
                        classes.canvas_imageSelector
                    ]), width: (image === null || image === void 0 ? void 0 : image.width) || 0, height: (image === null || image === void 0 ? void 0 : image.height) || 0, style: {
                        top: `${((selector === null || selector === void 0 ? void 0 : selector.top) || 0) * -1}px`,
                        left: `${((selector === null || selector === void 0 ? void 0 : selector.left) || 0) * -1}px`,
                        width: rect === null || rect === void 0 ? void 0 : rect.width,
                        height: rect === null || rect === void 0 ? void 0 : rect.height
                    } }) }))] })));
});
ImageCrop.displayName = 'onesy-ImageCrop';
exports.default = ImageCrop;