import imageClip from './imageClip.js';

new imageClip({
    src: 'data:image/png;base64,',
    ok: (data) => {
        console.log(data);
    },
    complete: () => {
        // 取消或确认操作回调
    }
});

// imageClip.js
/**
 * 图片裁剪
 */
class imageClip {
    constructor({ src, ok, complete }) {
        this.state = {
            src,
            ok,
            complete,
            cutBox: null,
            canvas: null, // 展示画布
            scaleRate: 1, // 展示图片缩小的倍数，裁剪时候需要把尺寸还原(裁剪坐标除这个倍数，就是原图的裁剪坐标)
            canvasOrigin: null, // 图片原尺寸的画布（最终裁剪的画布）
            cutRectCanvas: null, // 裁剪框显示的画布
            cutRect: {
                x: 0, y: 0, width: 0, height: 0
            }, // 裁剪线框
            touchPosition: {
                value: '',
                touch_x: 0,
                touch_y: 0,
                before_x: 0,
                before_y: 0,
                before_width: 0,
                before_height: 0,
            }, // 触摸位置，移动或者缩放裁剪框
        };

        this.initBox();
    }

    initBox() {
        if (!this.state.cutBox) {
            this.state.cutBox = document.createElement('div');
            Object.assign(this.state.cutBox.style, {
                position: 'fixed',
                left: 0,
                top: 0,
                right: 0,
                bottom: '12px',
                background: 'rgba(0,0,0,1)'
            });

            const BottomArea = document.createElement('div');
            Object.assign(BottomArea.style, {
                position: 'absolute',
                left: 0,
                bottom: 0,
                width: '100%',
                height: '72px',
                background: 'rgba(255,255,255,1)',
                display: 'flex',
                flexDirection: 'row',
                alignItems: 'center',
                justifyContent: 'space-between',
                fontSize: '14px',
                borderTopLeftRadius: '14px',
                borderTopRightRadius: '14px',
            });

            const BottomAreaCancel = document.createElement('div');
            BottomAreaCancel.innerText = 'Cancel';
            Object.assign(BottomAreaCancel.style, {
                padding: '0 20px',
            });

            const BottomAreaOk = document.createElement('div');
            BottomAreaOk.innerText = 'OK';
            Object.assign(BottomAreaOk.style, {
                padding: '0 20px',
            });

            const BottomAreaText = document.createElement('div');
            BottomAreaText.innerText = 'Crop';


            BottomAreaCancel.addEventListener('click', (e) => {
                this.state.complete && this.state.complete();

                document.body.removeChild(this.state.cutBox);
            });
            BottomAreaOk.addEventListener('click', (e) => {
                let { x, y, width, height } = this.state.cutRect;
                let x_new = x / this.state.scaleRate;
                let y_new = y / this.state.scaleRate;
                let width_new = width / this.state.scaleRate;
                let height_new = height / this.state.scaleRate;
                let imgData = this.state.canvasOrigin.getContext('2d').getImageData(x_new, y_new, width_new, height_new);
                Object.assign(this.state.canvasOrigin.style, {
                    width: width_new + 'px',
                    height: height_new + 'px',
                });
                this.state.canvasOrigin.width = width_new;
                this.state.canvasOrigin.height = height_new;
                this.state.canvasOrigin.getContext('2d').putImageData(imgData, 0, 0);
                let dataUrl = this.state.canvasOrigin.toDataURL();
                this.state.ok && this.state.ok(dataUrl);
                this.state.complete && this.state.complete();

                document.body.removeChild(this.state.cutBox);
            });

            this.initCanvas();

            BottomArea.appendChild(BottomAreaCancel);
            BottomArea.appendChild(BottomAreaText);
            BottomArea.appendChild(BottomAreaOk);
            this.state.cutBox.appendChild(BottomArea);
            document.body.appendChild(this.state.cutBox);
        }
    }

    // 初始化页面展示画布
    initCanvas() {
        this.state.canvas = document.createElement('canvas');
        const canvasWidth = document.body.offsetWidth * 0.8;
        const canvasHeight = document.body.offsetHeight - 72 - 60;
        const canvasLeft = document.body.offsetWidth * 0.2 / 2;
        const canvasTop = 30;
        Object.assign(this.state.canvas.style, {
            position: 'absolute',
            left: canvasLeft + 'px',
            top: canvasTop + 'px',
            width: canvasWidth + 'px',
            height: canvasHeight + 'px',
            background: '#fff',
        });
        this.state.canvas.width = canvasWidth;
        this.state.canvas.height = canvasHeight;
        this.state.cutBox.appendChild(this.state.canvas);

        this.renderImage();
    }

    // 渲染裁剪图片
    renderImage() {
        const canvasWidth = this.state.canvas.width;
        const canvasHeight = this.state.canvas.height;
        const canvasLeft = parseFloat(this.state.canvas.style.left);
        const canvasTop = parseFloat(this.state.canvas.style.top);
        const img = document.createElement('img');
        img.src = this.state.src;
        img.onload = () => {
            this.state.canvasOrigin = document.createElement('canvas');
            Object.assign(this.state.canvasOrigin.style, {
                width: img.width + 'px',
                height: img.height + 'px',
                background: '#fff',
            });
            this.state.canvasOrigin.width = img.width;
            this.state.canvasOrigin.height = img.height;
            this.state.canvasOrigin.getContext('2d').drawImage(img, 0, 0, img.width, img.height);

            let newWidth = 0, newHeight = 0, newCanvasLeft = 0, newCanvasTop = 0;
            if (canvasWidth / canvasHeight > img.width / img.height) {
                // 以画布的高度为基准，缩放图片
                this.state.scaleRate = canvasHeight / img.height;
                newWidth = img.width * (canvasHeight / img.height);
                newHeight = canvasHeight;
                newCanvasLeft = canvasLeft + (canvasWidth - newWidth) / 2;
                newCanvasTop = canvasTop;
            } else {
                // 以画布的宽度为基准，缩放图片
                this.state.scaleRate = canvasWidth / img.width;
                newWidth = canvasWidth;
                newHeight = img.height * (canvasWidth / img.width);
                newCanvasLeft = canvasLeft;
                newCanvasTop = canvasTop + (canvasHeight - newHeight) / 2;
            }

            Object.assign(this.state.canvas.style, {
                left: newCanvasLeft + 'px',
                top: newCanvasTop + 'px',
                width: parseInt(newWidth) + 'px',
                height: parseInt(newHeight) + 'px',
            });
            this.state.canvas.width = parseInt(newWidth);
            this.state.canvas.height = parseInt(newHeight);
            this.state.canvas.getContext('2d').drawImage(img, 0, 0, parseInt(newWidth), parseInt(newHeight));

            this.renderCutRectCanvas();
        };
    }

    // 渲染裁剪线框的画布
    renderCutRectCanvas() {
        this.state.cutRectCanvas = document.createElement('canvas');
        Object.assign(this.state.cutRectCanvas.style, {
            position: 'absolute',
            left: this.state.canvas.style.left,
            top: this.state.canvas.style.top,
            width: this.state.canvas.width + 'px',
            height: this.state.canvas.height + 'px',
            // background: 'rgba(0,0,0,0.4)',
        });
        this.state.cutRectCanvas.width = this.state.canvas.width;
        this.state.cutRectCanvas.height = this.state.canvas.height;
        this.state.cutBox.appendChild(this.state.cutRectCanvas);
        this.state.cutRect = {
            x: 0, y: 0, width: this.state.canvas.width, height: this.state.canvas.height
        };
        this.renderCutRect();
        this.addEvent();
    }

    // 渲染裁剪框
    renderCutRect() {
        let { x, y, width, height } = this.state.cutRect;
        let context = this.state.cutRectCanvas.getContext("2d");
        context.clearRect(0, 0, this.state.cutRectCanvas.width, this.state.cutRectCanvas.height); // 清空裁剪框画布

        // 设置裁剪框外面部分透明度为0.4
        context.globalAlpha = 0.4;
        context.fillStyle = 'rgba(0, 0, 0, 1)';
        context.fillRect(0, 0, this.state.cutRectCanvas.width, this.state.cutRectCanvas.height);

        // 裁剪框内全透明
        context.globalAlpha = 1; // 重置透明度为 1
        context.clearRect(x, y, width, height); // 清空裁剪框区域

        // 裁剪外层框
        context.strokeStyle = "#E46F5A";
        context.lineWidth = 2;
        context.strokeRect(x, y, width, height);

        this.addGridlines();
    }

    // 侧边及顶点线条及网格线
    addGridlines() {
        let { x, y, width, height } = this.state.cutRect;
        let context = this.state.cutRectCanvas.getContext("2d");
        // 侧边及顶点线条
        context.fillStyle = '#E46F5A';
        // 可拖动边角的厚度
        let thickness = 3;
        // 上
        let t_width = width * 0.2;
        let t_height = thickness;
        let t_left = (width - width * 0.2) / 2 + x;
        context.fillRect(t_left, y, t_width, t_height);
        // 右
        let r_width = thickness;
        let r_height = height * 0.2;
        let r_top = (height - height * 0.2) / 2 + y;
        context.fillRect(x + width - r_width, r_top, r_width, r_height);
        // 下
        let b_width = width * 0.2;
        let b_height = thickness;
        let b_left = (width - width * 0.2) / 2 + x;
        context.fillRect(b_left, y + height - b_height, b_width, b_height);
        // 左
        let l_width = thickness;
        let l_height = height * 0.2;
        let l_top = (height - height * 0.2) / 2 + y;
        context.fillRect(x, l_top, l_width, l_height);
        // 左上角
        let t_l_width = width * 0.1;
        let t_l_height = thickness;
        context.fillRect(x, y, t_l_width, t_l_height);
        let l_t_width = thickness;
        let l_t_height = height * 0.1;
        context.fillRect(x, y, l_t_width, l_t_height);
        // 右上角
        let t_r_width = width * 0.1;
        let t_r_height = thickness;
        context.fillRect(x + width - t_r_width, y, t_r_width, t_r_height);
        let r_t_width = thickness;
        let r_t_height = height * 0.1;
        context.fillRect(x + width - r_t_width, y, r_t_width, r_t_height);
        // 右下角
        let b_r_width = width * 0.1;
        let b_r_height = thickness;
        context.fillRect(x + width - t_r_width, y + height - b_r_height, b_r_width, b_r_height);
        let r_b_width = thickness;
        let r_b_height = height * 0.1;
        context.fillRect(x + width - r_t_width, y + height - r_b_height, r_b_width, r_b_height);
        // 左下角
        let b_l_width = width * 0.1;
        let b_l_height = thickness;
        context.fillRect(x, y + height - b_l_height, b_l_width, b_l_height);
        let l_b_width = thickness;
        let l_b_height = height * 0.1;
        context.fillRect(x, y + height - l_b_height, l_b_width, l_b_height);

        // 网格线
        // 竖线
        let x1 = width / 3 + x;
        let x2 = width / 3 * 2 + x;
        context.fillRect(x1, y, 1, height);
        context.fillRect(x2, y, 1, height);
        // 横线
        let y1 = height / 3 + y;
        let y2 = height / 3 * 2 + y;
        context.fillRect(x, y1, width, 1);
        context.fillRect(x, y2, width, 1);
    }

    // 裁剪画布添加监听事件
    addEvent() {
        const touch_space = 8; // 触摸留白区域（4个对角）
        const touch_space_line = 40; // 触摸留白区域(上下左右)
        const cut_space = 60; // 裁剪留白区域(最小尺寸)

        this.state.cutRectCanvas.addEventListener('touchstart', e => {
            let { x, y, width, height } = this.state.cutRect;

            const { clientX, clientY } = e.touches[0];
            const touch_x = clientX - parseFloat(this.state.cutRectCanvas.style.left);
            const touch_y = clientY - parseFloat(this.state.cutRectCanvas.style.top);

            this.state.touchPosition.touch_x = touch_x;
            this.state.touchPosition.touch_y = touch_y;
            this.state.touchPosition.before_x = this.state.cutRect.x;
            this.state.touchPosition.before_y = this.state.cutRect.y;
            this.state.touchPosition.before_width = this.state.cutRect.width;
            this.state.touchPosition.before_height = this.state.cutRect.height;

            if ((touch_x > ((width - width * 0.2) / 2 + x) - touch_space_line) && (touch_x < ((width + width * 0.2) / 2 + x) + touch_space_line) && (touch_y > y - touch_space_line) && (touch_y < y + touch_space_line)) {
                // 顶部
                this.state.touchPosition.value = 'top';
            } else if ((touch_x > x + width - touch_space_line) && (touch_x < x + width + touch_space_line) && ((touch_y > height - height * 0.2) / 2 + y - touch_space_line) && (touch_y < (height + height * 0.2) / 2 + y + touch_space_line)) {
                // 右侧
                this.state.touchPosition.value = 'right';
            } else if ((touch_x > ((width - width * 0.2) / 2 + x) - touch_space_line) && (touch_x < ((width + width * 0.2) / 2 + x) + touch_space_line) && (touch_y > (height + y - touch_space_line)) && (touch_y < (height + y + touch_space_line))) {
                // 底部
                this.state.touchPosition.value = 'bottom';
            } else if ((touch_x > (x - touch_space_line) && (touch_x < (x + touch_space_line)) && (touch_y > (height - height * 0.2) / 2 + y - touch_space_line) && (touch_y < (height + height * 0.2) / 2 + y + touch_space_line))) {
                // 左侧
                this.state.touchPosition.value = 'left';
            } else if ((touch_x > x - width * 0.1 - touch_space && (touch_x < x + width * 0.1 + touch_space) && (touch_y > y - height * 0.1 - touch_space) && (touch_y < y + height * 0.1 + touch_space))) {
                // 左上角
                this.state.touchPosition.value = 'top_left';
            } else if ((touch_x > x + width - width * 0.1 - touch_space && (touch_x < x + width + width * 0.1 + touch_space) && (touch_y > y - height * 0.1 - touch_space) && (touch_y < y + height * 0.1 + touch_space))) {
                // 右上角
                this.state.touchPosition.value = 'top_right';
            } else if ((touch_x > x + width - width * 0.1 - touch_space && (touch_x < x + width + width * 0.1 + touch_space) && (touch_y > y + height - height * 0.1 - touch_space) && (touch_y < y + height + height * 0.1 + touch_space))) {
                // 右下角
                this.state.touchPosition.value = 'bottom_right';
            } else if ((touch_x > x - width * 0.1 - touch_space && (touch_x < x + width * 0.1 + touch_space) && (touch_y > y + height - height * 0.1 - touch_space) && (touch_y < y + height + height * 0.1 + touch_space))) {
                // 左下角
                this.state.touchPosition.value = 'bottom_left';
            } else if ((touch_x > x + touch_space) && (touch_x < x + width - touch_space) && (touch_y > y + touch_space) && (touch_y < y + height - touch_space)) {
                // 在裁剪矩形框内
                this.state.touchPosition.value = 'inRect';
            }
            // console.log('touchstart', this.state.touchPosition.value);
        });
        this.state.cutRectCanvas.addEventListener('touchmove', e => {
            const { clientX, clientY } = e.touches[0];
            const touch_x = clientX - parseFloat(this.state.cutRectCanvas.style.left);
            const touch_y = clientY - parseFloat(this.state.cutRectCanvas.style.top);

            const move_x = touch_x - this.state.touchPosition.touch_x;
            const move_y = touch_y - this.state.touchPosition.touch_y;

            let { x: new_x, y: new_y, width: new_width, height: new_height } = this.state.cutRect;
            const { cutRectCanvas, cutRect, touchPosition } = this.state;
            const { before_x, before_y, before_width, before_height } = touchPosition;
            if (this.state.touchPosition.value === 'inRect') {
                // x,y修改
                new_x = before_x + move_x;
                new_x = Math.max(0, Math.min(new_x, cutRectCanvas.width - cutRect.width));
                new_y = before_y + move_y;
                new_y = Math.max(0, Math.min(new_y, cutRectCanvas.height - cutRect.height));
            } else if (this.state.touchPosition.value === 'top') {
                // y,height修改
                new_y = before_y + move_y;
                new_y = Math.max(0, Math.min(new_y, before_y + before_height - cut_space));
                new_height = before_height - move_y;
                new_height = Math.max(cut_space, Math.min(new_height, before_y + before_height - new_y));
            } else if (this.state.touchPosition.value === 'right') {
                // width修改
                new_width = before_width + move_x;
                new_width = Math.max(cut_space, Math.min(new_width, cutRectCanvas.width - before_x));
            } else if (this.state.touchPosition.value === 'bottom') {
                // height修改
                new_height = touchPosition.before_height + move_y;
                new_height = Math.max(cut_space, Math.min(new_height, cutRectCanvas.height - before_y));
            } else if (this.state.touchPosition.value === 'left') {
                // x,width修改
                new_x = before_x + move_x;
                new_x = Math.max(0, Math.min(new_x, before_x + before_width - cut_space));
                new_width = before_width - move_x;
                new_width = Math.max(cut_space, Math.min(new_width, before_x + before_width - new_x));
            } else if (this.state.touchPosition.value === 'top_left') {
                // x,y,width,height修改
                new_x = before_x + move_x;
                new_x = Math.max(0, Math.min(new_x, before_x + before_width - cut_space));
                new_width = before_width - move_x;
                new_width = Math.max(cut_space, Math.min(new_width, before_x + before_width - new_x));
                new_y = before_y + move_y;
                new_y = Math.max(0, Math.min(new_y, before_y + before_height - cut_space));
                new_height = before_height - move_y;
                new_height = Math.max(cut_space, Math.min(new_height, before_y + before_height - new_y));
            } else if (this.state.touchPosition.value === 'top_right') {
                // y,width,height修改
                new_width = before_width + move_x;
                new_width = Math.max(cut_space, Math.min(new_width, cutRectCanvas.width - before_x));
                new_y = before_y + move_y;
                new_y = Math.max(0, Math.min(new_y, before_y + before_height - cut_space));
                new_height = before_height - move_y;
                new_height = Math.max(cut_space, Math.min(new_height, before_y + before_height - new_y));
            } else if (this.state.touchPosition.value === 'bottom_right') {
                // width,height修改
                new_width = before_width + move_x;
                new_width = Math.max(cut_space, Math.min(new_width, cutRectCanvas.width - before_x));
                new_height = touchPosition.before_height + move_y;
                new_height = Math.max(cut_space, Math.min(new_height, cutRectCanvas.height - before_y));
            } else if (this.state.touchPosition.value === 'bottom_left') {
                // x,width,height修改
                new_x = before_x + move_x;
                new_x = Math.max(0, Math.min(new_x, before_x + before_width - cut_space));
                new_width = before_width - move_x;
                new_width = Math.max(cut_space, Math.min(new_width, before_x + before_width - new_x));
                new_height = touchPosition.before_height + move_y;
                new_height = Math.max(cut_space, Math.min(new_height, cutRectCanvas.height - before_y));
            }

            // console.log(new_x, new_y, new_width, new_height);
            this.state.cutRect.x = new_x;
            this.state.cutRect.y = new_y;
            this.state.cutRect.width = new_width;
            this.state.cutRect.height = new_height;
            this.renderCutRect();
            // console.log('touchmove', e);
        });
        this.state.cutRectCanvas.addEventListener('touchend', e => {
            this.state.touchPosition.value = '';
            // console.log('touchend', e);
        });
    }

}

export default imageClip;