/**
 * 2020-9-17
 * 处理Canvas与CSS相关的逻辑
*/
import { jpegQualityFactor } from './utils/const';
export const PatternNumber = RegExp(/-{0,1}((\d\.\d+[eE][+-]\d+)+|(\d(\.{0,1}\d+)|\d))/g);    
export function matR90() {
    return from2x3To3x3([0,1,-1,0,0,0]);
}
export function matRNeg90() {
    return from2x3To3x3([0,-1,1,0,0,0]);
}    
export function matR180() {
    return from2x3To3x3([-1,0,0,-1,0,0]);
}
export function matFlipx() {
    return from2x3To3x3([-1,0,0,1,0,0]);
}
export function matFlipy() {
    return from2x3To3x3([1,0,0,-1,0,0]);
}
export function matIdentity() {
    return from2x3To3x3([1,0,0,1,0,0]);
}
export function isIdentity(elements) {
    if (elements && Array.isArray(elements)) {
        return elements.toString() == '1,0,0,1,0,0';
    }
    return false;
}
function matFromElement(elements) {
    elements = elements || [1,0,0,1,0,0];
    return from2x3To3x3(elements);
}    
export function createMatrix2x3(elements) {
    if (Array.isArray(elements)) {
        return elements.split(',').map(e=>parseFloat(e));
    }
    return [1,0,0,1,0,0];
}
function matZoomIn(x, y) {
    x = x || 1.1;
    y = y || 1.1;
    let mat2x3 = [x,0,0,y,0,0];
    return from2x3To3x3(mat2x3);
}
function matZoomOut(x, y) {
    x = x || 0.9;
    y = y || 0.9;        
    let mat2x3 = [x,0,0,y,0,0];
    return from2x3To3x3(mat2x3);
}
function MatTranslate(x, y) {
    x = x || 0;
    y = y || 0;
    return from2x3To3x3([1,0,0,1,x,y]);
}
function matrixMultiplyVector(mat, v) {
    let x = mat[0] * v[0] + mat[1] * v[1] + mat[2] * v[2],
        y = mat[3] * v[0] + mat[4] * v[1] + mat[5] * v[2],
        z = mat[6] * v[0] + mat[7] * v[1] + mat[8] * v[2];
    // console.log('matrix * vector', x, y, z);
    return [x,y,z];    
}
function matrixMultiplyMatrix(a, b) {
    let c1 = matrixMultiplyVector(a, [b[0], b[3], b[6]]),
        c2 = matrixMultiplyVector(a, [b[1], b[4], b[7]]),
        c3 = matrixMultiplyVector(a, [b[2], b[5], b[8]]);
    // console.log('matrix * matrix', c1, c2, c3);
    return [
        c1[0], c2[0], c3[0],
        c1[1], c2[1], c3[1],
        c1[2], c2[2], c3[2],
    ];
}
export function from2x3To3x3(mat) {
    let m = [
        1,0,0,
        0,1,0,
        0,0,1
    ];
    m[0] = mat[0];
    m[1] = mat[2];
    m[2] = mat[4];
    m[3] = mat[1];
    m[4] = mat[3];
    m[5] = mat[5];
    return m;
}
function from3x3To2x3(mat) {
    return [
        mat[0], mat[3], mat[1], 
        mat[4], mat[2], mat[5]
    ];
}
function getTargetWidthHeight(mat, sw, sh, isRightAngle) {
    let tw, th;
    let m = from2x3To3x3(mat);
    let v0 = [0,0,1], v1 = [sw,sh,1],
        v2 = [sw,0,1], v3 = [0,sh,1];
    let nv0 = matrixMultiplyVector(m, v0),
        nv1 = matrixMultiplyVector(m, v1),
        nv2 = matrixMultiplyVector(m, v2),
        nv3 = matrixMultiplyVector(m, v3);
    
    let minx = Math.min(nv0[0], nv1[0], nv2[0], nv3[0]),
        miny = Math.min(nv0[1], nv1[1], nv2[1], nv3[1]),
        maxx = Math.max(nv0[0], nv1[0], nv2[0], nv3[0]),
        maxy = Math.max(nv0[1], nv1[1], nv2[1], nv3[1]);

    let xlen = maxx - minx;
    let ylen = maxy - miny;

    if (isRightAngle) {
        if (Math.abs(xlen - sw) < Math.abs(xlen - sh) ) {
            tw = sw;
            th = sh;
        } else {
            tw = sh;
            th = sw;
        }
    } else {
        tw = xlen;
        th = ylen;
    }

    return {
        w: tw,
        h: th,
    }
}
export function applyMatrix2Url(url, mat, isRightAngle, canvaswidth = 350, canvasheight = 350) {
    var canvas = document.createElement('canvas'),
        ctx = canvas.getContext("2d");
    canvas.width = canvaswidth;
    canvas.height = canvasheight;
    if (isIdentity(mat)) {
        return new Promise((resolve) => {
            let img = new Image();
            img.src = url;
            img.onload = () => {
                ctx.drawImage(img, 0, 0, img.width, img.height)
                canvas.toBlob(blob=>{
                    console.log('-as-', url, img, img.width, img.height, blob)
                    resolve({
                        buffer: blob,
                        width: img.width,
                        height: img.height,
                    })
                }, 'image/jpeg', jpegQualityFactor);
            }
        }).catch((err) => {
            console.log('parse local error wrong', err)
            return Promise.resolve({
                buffer: null,
                width: 0,
                height: 0,
            });
        })
    } 
    return new Promise((resolve)=>{            
        let img = new Image();
        img.src = url;
        img.onload = ()=>{
            let twh = getTargetWidthHeight(mat, img.width, img.height, isRightAngle);
            let x = (twh.w - img.width) / 2,
                y = (twh.h - img.height) / 2,
                width  = img.width,
                height = img.height,
                cx = x + 0.5 * width,
                cy = y + 0.5 * height;

            ctx.translate(cx, cy);
            ctx.transform(mat[0], mat[1], mat[2], mat[3], mat[4], mat[5]);
            ctx.translate(-cx, -cy);

            ctx.drawImage(img, x, y, width, height);
            canvas.toBlob(blob=>{
                resolve({
                    buffer: blob,
                    width: twh.w,
                    height: twh.h,
                })
            }, 'image/jpeg', jpegQualityFactor);
        }
    }).catch(err=>{
        console.log('parse wrong', err)
        return Promise.resolve({
            buffer: null,
            width: 0,
            height: 0,
        });
    })
}
function beautifyTo2x3From3x3(mat) {
    try {
        let mStr = from3x3To2x3( mat ).toString().match(PatternNumber);                  
        return mStr.map(e=>parseFloat(e)).map(e=>{if(Math.abs(e) < 1e-10) return 0; else return e;});    
    } catch(err) {            
        return [1,0,0,1,0,0];
    }
}
export function beautifyTo2x3FromDOMMatrix(mat) {
    try {
        let mStr = mat.toString().match(PatternNumber);                  
        return mStr.map(e=>parseFloat(e)).map(e=>{if(Math.abs(e) < 1e-10) return 0; else return e;});    
    } catch(err) {
        return [1,0,0,1,0,0];
    }
}
export function m3x3Multiplym2x3(m3x3, m2x3) {
    return beautifyTo2x3From3x3( matrixMultiplyMatrix(m3x3, from2x3To3x3(m2x3)) );
}
export function url2Buffer(url) {
    var canvas = document.createElement('canvas'),
        ctx = canvas.getContext("2d");
    return new Promise((resolve) => {
        let img = new Image();
        img.src = url;
        img.onload = () => {
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0, img.width, img.height);
            canvas.toBlob((blob) => {
                resolve({
                    buffer: blob,
                    width: img.width,
                    height: img.height,
                })
            }, 'image/jpeg', jpegQualityFactor);
        }
    }).catch((err) => {
        console.error('parse local', err);
        return Promise.resolve({
            buffer: null,
            width: 0,
            height: 0,
        });
    })
}
export function urlWithMatrix2Url(url, mat, canvaswidth, canvasheight) {
    return new Promise((resolve)=>{
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext("2d");
        canvas.width = canvaswidth;
        canvas.height = canvasheight;
        const isRightAngle = false;
        if (isIdentity(mat)) {
            return resolve({
                url: url,
                width: canvaswidth,
                height: canvasheight,
            });
        }
        return Promise.resolve(url).then(() => {
            let img = new Image();
            img.src = url;
            img.onload = ()=>{
                let twh = getTargetWidthHeight(mat, img.width, img.height, isRightAngle);
                let x = (twh.w - img.width) / 2,
                    y = (twh.h - img.height) / 2,
                    width  = img.width,
                    height = img.height,
                    cx = x + 0.5 * width,
                    cy = y + 0.5 * height;

                ctx.translate(cx, cy);
                ctx.transform(mat[0], mat[1], mat[2], mat[3], mat[4], mat[5]);
                ctx.translate(-cx, -cy);

                ctx.drawImage(img, x, y, width, height);
                canvas.toBlob(blob=>{
                    resolve({
                        url: URL.createObjectURL(blob),
                        width: twh.w,
                        height: twh.h,
                    })
                }, 'image/jpeg', jpegQualityFactor);
            }
        })
    });
}