class Editor {
    constructor(image, canvas) {
        this.app = new PIXI.Application({
            width: canvas.width,
            height: canvas.height,
            antialias: false,
            transparent: true,
            resolution: 1
        });

        this.opts = {
            angle: 0,
            flipX: false,
            flipY: false
        };

        this.loadImage(image, canvas);
    }

    destroyCrop() {
        if(this.cr) this.cr.destroy();
        this.cr = false;
    }

    extract(type = 'base64') {
        const base64 = this.app.renderer.plugins.extract.base64(this.app.stage);

        if(type === 'blob') {
            return fetch(base64).then(res => res.blob());
        }

        return base64;
    }

    destroy() {
        if(this.cr) this.cr.destroy();
        this.cr = false;
        ed.app.destroy();
    }

    get config() { return this.opts; }

    flip(to = 'x') {
        if(to === 'x') {
            this.sprite.anchor.x = this.sprite.anchor.x == 1 ? 0 : 1;
            this.sprite.scale.x *= -1;
        } else {
            this.sprite.anchor.y = this.sprite.anchor.y == 1 ? 0 : 1;
            this.sprite.scale.y *= -1;
        }

        this.opts.flipX = this.sprite.scale.x < 0;
        this.opts.flipY = this.sprite.scale.y < 0;
    }

    calculateCropPosition() {
        const cropBox = this.cr.getCropBoxData();

        let x = cropBox.left / Math.abs(this.sprite.scale.x);
        let y = cropBox.top / Math.abs(this.sprite.scale.y);
        let width = cropBox.width / Math.abs(this.sprite.scale.x);
        let height = cropBox.height / Math.abs(this.sprite.scale.y);
        const frame = this.sprite.texture.frame;
        const texture = this.sprite.texture;

        if(x < 0) x = 0;
        if(y < 0) y = 0;

        if(!(this.sprite.angle % 270) && this.sprite.angle != 0) {
            let tempWidth = width;
            y = x;
            x = texture.width - height - y;

            width = height;
            height = tempWidth;
        } else if(!(this.sprite.angle % 180) && this.sprite.angle != 0) {
            x = texture.width - x - width;
            y = texture.height - y - height;
        } else if(!(this.sprite.angle % 90) && this.sprite.angle != 0) {
            let tempX = x;
            let tempWidth = width;

            x = y;
            y = tempX;

            width = height;
            height = tempWidth;
        }

        return { x, y, width, height };
    }

    crop() {
        if(!this.cr) return;
        const base = this.sprite.texture.baseTexture;
        let { x, y, width, height } = this.calculateCropPosition();

        const frame = this.sprite.texture.frame;

        if(x < 0) x = 0;
        if(y < 0) y = 0;

        if(frame) {
            x += frame.x;
            y += frame.y;
        }

        if(x > base.width || x + width > base.width) {
            x = 0; width = base.width;
        }

        if(y > base.height || y + height > base.height) {
            y = 0; height = base.height;
        }

        const rect = new PIXI.Rectangle(x, y, width, height);
        this.sprite.texture.frame = rect;
        this.drawFit();

        this.cr.destroy();
        this.cr = false;
    }

    activateCrop() {
        const parentElement = document.querySelector('.take-selfie__holder');
        let canvas = document.getElementById('crop_canvas');

        const { x, y, width, height } = this.app.stage.getBounds();

        canvas.width = width;
        canvas.height = height;

        canvas.parentElement.setAttribute(
            'style', `position: absolute; left: ${x}px; top: ${y}px`
        );

        if(this.cr) this.cr.destroy();
        this.cr = new Cropper(canvas, {});
    }

    drawFit() {
        const originImageWidth = Math.abs(this.sprite.width / this.sprite.scale.x);
        const originImageHeight = Math.abs(this.sprite.height / this.sprite.scale.y);

        const isCalculated = !(this.sprite.angle % 180);

        const w = !isCalculated ? originImageHeight : originImageWidth;
        const h = !isCalculated ? originImageWidth : originImageHeight;

        const cw = this.app.renderer.width;
        const ch = this.app.renderer.height;

        const scale = this.calcScale(cw, ch, w, h);
        this.sprite.scale.set(
            scale * (this.sprite.scale.x < 0 ? -1 : 1),
            scale * (this.sprite.scale.y < 0 ? -1 : 1)
        );

        const centerX = (!isCalculated ? this.sprite.height : this.sprite.width);
        const centerY = (!isCalculated ? this.sprite.width : this.sprite.height);

        this.sprite.position.set(
            this.app.renderer.width / 2,
            this.app.renderer.height / 2
        );

        if(!(this.sprite.angle % 360)) {
            this.sprite.position.x -= this.sprite.width / 2;
            this.sprite.position.y -= this.sprite.height / 2;
        } else if(!(this.sprite.angle % 270) && this.sprite.angle != 0) {
            this.sprite.position.x -= this.sprite.height / 2;
            this.sprite.position.y += this.sprite.width / 2;
        } else if(!(this.sprite.angle % 180) && this.sprite.angle != 0) {
            this.sprite.position.x += this.sprite.width / 2;
            this.sprite.position.y += this.sprite.height / 2;
        } else if(!(this.sprite.angle % 90) && this.sprite.angle != 0) {
            this.sprite.position.x += this.sprite.height / 2;
            this.sprite.position.y -= this.sprite.width / 2;
        }
    }

    rotate(angle = 1) {
        this.sprite.angle += (angle > 0 ? 90 : -90);
        if(this.sprite.angle > 360) {
            this.sprite.angle = 90;
        }

        if(this.sprite.angle < 0) {
            this.sprite.angle = 270;
        }

        this.opts.angle = this.sprite.angle;
        // this.sprite.anchor.set(.5, .5);

        this.drawFit();
    }

    calcScale(w, h, width, height) {
        return Math.min(w / width, h / height);
    }

    async loadImage(image, canvas) {
        const texture = await PIXI.Texture.fromURL(image.getAttribute('src'));
        this.sprite = new PIXI.Sprite(texture);

        const scale = this.calcScale(
            this.app.renderer.width,
            this.app.renderer.height,
            this.sprite.width,
            this.sprite.height
        );

        this.sprite.scale.set(scale, scale);
        this.sprite.position.set(
            (this.app.renderer.width - this.sprite.width) / 2,
            (this.app.renderer.height - this.sprite.height) / 2
        );

        this.app.stage.addChild(this.sprite);
        canvas.replaceWith(this.app.view);
        this.app.view.setAttribute('id', 'canvas');
    }
}