import * as tslib_1 from "tslib";
import React, { useState, useRef, useEffect } from 'react';
import { Spin } from 'antd';
import CropperLib from 'cropperjs';
import { ModalContainer } from '..';
import Controller from './Controller';
var cropperIns;
var DEFAULT_CROPPERSIZE = 360;
var IMG_SPECTRATIO = 0;
var DEFAULT_SPECTRATIO = 450;
var DEFAULT_CROPPERCSTYLE;
var Cropper = function (_a) {
    var imgData = _a.imgData, children = _a.children, onCroppered = _a.onCroppered, className = _a.className, style = _a.style, onReady = _a.onReady;
    var _b = useState({ width: 0, height: 0 }), cropperCStyle = _b[0], setCropperCStyle = _b[1];
    var _c = useState({ width: 0, height: 0 }), cropperStyle = _c[0], setCropperStyle = _c[1];
    var _d = useState(false), cropperLoading = _d[0], setCropperLoading = _d[1];
    var modalRef = useRef(null);
    var imgRef = useRef(null);
    useEffect(function () {
        return function () {
            cropperIns && cropperIns.destroy();
        };
    }, []);
    var showCropper = function () {
        if (modalRef.current) {
            modalRef.current.open();
            var setWH = function (lenKey1, lenKey2) {
                var smallerSide = imgData[lenKey1] < imgData[lenKey2];
                IMG_SPECTRATIO = +imgData[smallerSide ? lenKey2 : lenKey1] / DEFAULT_SPECTRATIO;
                return smallerSide ? +imgData[lenKey1] / IMG_SPECTRATIO : DEFAULT_SPECTRATIO;
            };
            var cropperCH = setWH('height', 'width');
            var cropperCW = setWH('width', 'height');
            DEFAULT_CROPPERSIZE = cropperCH > cropperCW ? cropperCW : cropperCH;
            DEFAULT_CROPPERCSTYLE = { width: cropperCW, height: cropperCH };
            var timer_1 = setTimeout(function () {
                setCropperCStyle(DEFAULT_CROPPERCSTYLE);
                setCropperStyle({ width: DEFAULT_CROPPERSIZE, height: DEFAULT_CROPPERSIZE });
                setCropperLoading(true);
                clearTimeout(timer_1);
            }, 0);
        }
    };
    var initialCropper = function () {
        cropperIns = new CropperLib(imgRef.current, {
            aspectRatio: 1,
            viewMode: 3,
            zoomable: false,
            minContainerHeight: DEFAULT_CROPPERCSTYLE.height,
            minContainerWidth: DEFAULT_CROPPERCSTYLE.width,
            ready: function () {
                setCropperLoading(false);
                resetCropperSize({ width: DEFAULT_CROPPERSIZE, height: DEFAULT_CROPPERSIZE });
                onReady && onReady();
            },
            cropstart: function (_event) { },
            cropend: function (_event) {
                var _a = cropperIns.getCropBoxData(), width = _a.width, height = _a.height;
                setCropperStyle({
                    width: Number(width.toFixed(0)),
                    height: Number(height.toFixed(0)),
                });
            },
        });
    };
    function destroyCropper() {
        if (!cropperIns)
            return;
        cropperIns.destroy();
    }
    function resetCropperSize(_a) {
        var width = _a.width, height = _a.height;
        cropperIns.setAspectRatio(width / height);
        cropperIns.setCropBoxData({ width: Number(width), height: Number(height) });
    }
    function resetInputValue(_a) {
        var width = _a.width, height = _a.height;
        var calculate = function (size) { return Number((size * IMG_SPECTRATIO).toFixed(0)); };
        return {
            width: calculate(width),
            height: calculate(height),
        };
    }
    function onOk() {
        if (modalRef.current) {
            modalRef.current.close();
        }
        var canvasStyle = resetInputValue(cropperIns.getCropBoxData());
        var canvasTemp = cropperIns.getCroppedCanvas(canvasStyle);
        var image = new Image();
        image.setAttribute('crossOrigin', 'anonymous');
        image.onload = function () {
            var canvas = document.createElement('canvas');
            canvas.width = canvasStyle.width;
            canvas.height = canvasStyle.height;
            var ctx = canvas.getContext('2d');
            ctx && ctx.drawImage(image, 0, 0, canvasStyle.width, canvasStyle.height);
            onCroppered && onCroppered(canvas);
            destroyCropper();
        };
        image.src = canvasTemp.toDataURL('image/jpeg');
    }
    function changeAspectRatio(ratio) {
        function setNewCropBox(judge) {
            var _a;
            if (judge === void 0) { judge = cropperCStyle.width >= cropperCStyle.height; }
            var orderedKey = judge
                ? ['width', 'height']
                : ['height', 'width'];
            cropperIns.setAspectRatio(ratio.width / ratio.height);
            return _a = {},
                _a[orderedKey[1]] = cropperCStyle[orderedKey[1]],
                _a[orderedKey[0]] = (cropperCStyle[orderedKey[1]] * ratio[orderedKey[0]]) / ratio[orderedKey[1]],
                _a;
        }
        var newCropBoxData = setNewCropBox();
        if (newCropBoxData.width > cropperCStyle.width ||
            newCropBoxData.height > cropperCStyle.height) {
            newCropBoxData = setNewCropBox(cropperCStyle.width < cropperCStyle.height);
        }
        cropperIns.setCropBoxData(newCropBoxData);
        return { width: newCropBoxData.width, height: newCropBoxData.height };
    }
    return (React.createElement(React.Fragment, null,
        React.createElement("div", { onClick: showCropper }, children),
        React.createElement(ModalContainer, { title: "\u56FE\u7247\u88C1\u526A", onOk: onOk, ref: modalRef, style: tslib_1.__assign({ width: '80%', maxWidth: 946 }, style), onCancel: destroyCropper, className: className, destroyOnClose: true },
            React.createElement(Spin, { spinning: cropperLoading },
                React.createElement("div", { style: tslib_1.__assign({}, cropperCStyle, { margin: '0 auto', textAlign: 'center' }) },
                    React.createElement("img", { id: "cropper_img", ref: imgRef, style: tslib_1.__assign({}, cropperCStyle), alt: "\u88C1\u526A\u56FE\u7247", src: imgData.imgUrl, onLoad: initialCropper })),
                cropperStyle.width && (React.createElement(Controller, tslib_1.__assign({}, {
                    imgData: imgData,
                    IMG_SPECTRATIO: IMG_SPECTRATIO,
                    resetCropperSize: resetCropperSize,
                    resetInputValue: resetInputValue,
                    initialValue: resetInputValue(cropperStyle),
                }, { onSelectChange: changeAspectRatio, cropperIns: cropperIns })))))));
};
export default Cropper;
//# sourceMappingURL=index.js.map