import { EventEmitter, Component, ChangeDetectorRef, Input, Output, ViewChild, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { __awaiter, __classPrivateFieldGet, __classPrivateFieldSet } from 'tslib';
import { v4 } from 'uuid';
import Konva from 'konva';
import { Subject, Subscription } from 'rxjs';
import { startWith } from 'rxjs/operators';

var _height, _width, _images, _stage, _layer, _elementRef, _onLoad, _subscription;
class SdMergeImages {
    constructor(ref) {
        this.ref = ref;
        this.id = `I${v4()}`;
        this.kImages = [];
        _height.set(this, void 0);
        _width.set(this, void 0);
        _images.set(this, void 0);
        _stage.set(this, void 0);
        _layer.set(this, void 0);
        this.save = new EventEmitter();
        _elementRef.set(this, void 0);
        _onLoad.set(this, new Subject());
        _subscription.set(this, new Subscription());
        this.toImage = () => __awaiter(this, void 0, void 0, function* () {
            return yield new Promise(resolve => {
                var _a;
                (_a = __classPrivateFieldGet(this, _stage)) === null || _a === void 0 ? void 0 : _a.toImage({
                    callback: (image) => {
                        resolve(image);
                    }
                });
            });
        });
        this.toDataUrl = () => {
            return __classPrivateFieldGet(this, _stage).toDataURL();
        };
    }
    set height(height) {
        __classPrivateFieldSet(this, _height, +height);
    }
    set width(width) {
        __classPrivateFieldSet(this, _width, +width);
    }
    set images(images) {
        setTimeout(() => {
            __classPrivateFieldSet(this, _images, images);
            __classPrivateFieldGet(this, _onLoad).next(__classPrivateFieldGet(this, _images));
        }, 2000);
    }
    set container(elementRef) {
        if (__classPrivateFieldGet(this, _elementRef) !== elementRef) {
            __classPrivateFieldSet(this, _elementRef, elementRef);
            __classPrivateFieldGet(this, _onLoad).next(__classPrivateFieldGet(this, _images));
        }
    }
    ngOnInit() {
    }
    ngAfterViewInit() {
        __classPrivateFieldGet(this, _subscription).add(__classPrivateFieldGet(this, _onLoad).pipe(startWith([])).subscribe(() => {
            var _a;
            if (!document.getElementById(this.id)) {
                return;
            }
            document.getElementById(this.id).innerHTML = '';
            if (!((_a = __classPrivateFieldGet(this, _images)) === null || _a === void 0 ? void 0 : _a.length)) {
                return;
            }
            const images = __classPrivateFieldGet(this, _images);
            __classPrivateFieldSet(this, _stage, new Konva.Stage({
                container: this.id,
                width: __classPrivateFieldGet(this, _width),
                height: __classPrivateFieldGet(this, _height)
            }));
            __classPrivateFieldSet(this, _layer, new Konva.Layer());
            __classPrivateFieldGet(this, _stage).add(__classPrivateFieldGet(this, _layer));
            for (const [idx, img] of images.entries()) {
                let x = 0;
                let y = 0;
                const width = __classPrivateFieldGet(this, _width) / 2;
                const height = __classPrivateFieldGet(this, _height) / 2;
                if (images.length === 1) {
                    x = __classPrivateFieldGet(this, _width) / 4;
                    y = __classPrivateFieldGet(this, _height) / 4;
                }
                else if (images.length === 2) {
                    if (idx === 0) {
                        x = 0;
                        y = __classPrivateFieldGet(this, _height) / 4;
                    }
                    else if (idx === 1) {
                        x = __classPrivateFieldGet(this, _width) / 2;
                        y = __classPrivateFieldGet(this, _height) / 4;
                    }
                }
                else if (images.length === 3) {
                    if (idx === 0) {
                        x = 0;
                        y = 0;
                    }
                    else if (idx === 1) {
                        x = __classPrivateFieldGet(this, _width) / 2;
                        y = 0;
                    }
                    else if (idx === 2) {
                        x = __classPrivateFieldGet(this, _width) / 4;
                        y = __classPrivateFieldGet(this, _height) / 4;
                    }
                }
                else if (images.length === 4) {
                    if (idx === 0) {
                        x = 0;
                        y = 0;
                    }
                    else if (idx === 1) {
                        x = __classPrivateFieldGet(this, _width) / 2;
                        y = 0;
                    }
                    else if (idx === 2) {
                        x = 0;
                        y = __classPrivateFieldGet(this, _height) / 2;
                    }
                    else if (idx === 3) {
                        x = __classPrivateFieldGet(this, _width) / 2;
                        y = __classPrivateFieldGet(this, _height) / 2;
                    }
                }
                const image = new Image();
                const konvaImage = new Konva.Image({
                    image,
                    x,
                    y,
                    width,
                    height,
                    name: 'image',
                    draggable: true,
                });
                this.kImages.push(konvaImage);
                image.onload = () => {
                    konvaImage.image(image);
                    this.ref.detectChanges();
                };
                image.crossOrigin = 'Anonymous';
                image.src = img;
                __classPrivateFieldGet(this, _layer).add(konvaImage);
            }
            const tr = new Konva.Transformer();
            __classPrivateFieldGet(this, _layer).add(tr);
            // at this point basic demo is finished!!
            // we just have several transforming nodes
            __classPrivateFieldGet(this, _layer).draw();
            this.ref.detectChanges();
            // clicks should select/deselect shapes
            __classPrivateFieldGet(this, _stage).on('click tap', (e) => {
                // if click on empty area - remove all selections
                if (e.target === __classPrivateFieldGet(this, _stage)) {
                    tr.nodes([]);
                    __classPrivateFieldGet(this, _layer).draw();
                    return;
                }
                // do nothing if clicked NOT on our rectangles
                if (!e.target.hasName('rect') && !e.target.hasName('image')) {
                    return;
                }
                // do we pressed shift or ctrl?
                const metaPressed = e.evt.shiftKey || e.evt.ctrlKey || e.evt.metaKey;
                const isSelected = tr.nodes().indexOf(e.target) >= 0;
                if (!metaPressed && !isSelected) {
                    // if no key pressed and the node is not selected
                    // select just one
                    tr.nodes([e.target]);
                }
                else if (metaPressed && isSelected) {
                    // if we pressed keys and node was selected
                    // we need to remove it from selection:
                    const nodes = tr.nodes().slice(); // use slice to have new copy of array
                    // remove node from array
                    nodes.splice(nodes.indexOf(e.target), 1);
                    tr.nodes(nodes);
                }
                else if (metaPressed && !isSelected) {
                    // add the node into selection
                    const nodes = tr.nodes().concat([e.target]);
                    tr.nodes(nodes);
                }
                __classPrivateFieldGet(this, _layer).draw();
            });
        }));
    }
    ngOnDestroy() {
        __classPrivateFieldGet(this, _subscription).unsubscribe();
    }
}
_height = new WeakMap(), _width = new WeakMap(), _images = new WeakMap(), _stage = new WeakMap(), _layer = new WeakMap(), _elementRef = new WeakMap(), _onLoad = new WeakMap(), _subscription = new WeakMap();
SdMergeImages.decorators = [
    { type: Component, args: [{
                selector: 'sd-merge-images',
                template: "<div [id]=\"id\" #container></div>",
                styles: [":host ::ng-deep .konvajs-content{border:2px solid #dadada}"]
            },] }
];
SdMergeImages.ctorParameters = () => [
    { type: ChangeDetectorRef }
];
SdMergeImages.propDecorators = {
    height: [{ type: Input }],
    width: [{ type: Input }],
    images: [{ type: Input }],
    save: [{ type: Output }],
    container: [{ type: ViewChild, args: ['container',] }]
};

class SdKonvaModule {
}
SdKonvaModule.decorators = [
    { type: NgModule, args: [{
                declarations: [
                    SdMergeImages
                ],
                imports: [
                    CommonModule
                ],
                exports: [
                    SdMergeImages
                ]
            },] }
];

/*
 * Public API Surface of superdev-angular-core
 */

/**
 * Generated bundle index. Do not edit.
 */

export { SdKonvaModule, SdMergeImages };
//# sourceMappingURL=sd-angular-core-konva.js.map
