import { Component, Inject, Directive, ElementRef, Input, HostListener, ViewChild, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatDialogRef, MAT_DIALOG_DATA, MatDialog, MatDialogModule } from '@angular/material/dialog';
import { MatIconModule } from '@angular/material/icon';
import * as $ from 'jquery';
import { SdModal, SdModalModule } from '@sd-angular/core/modal';

class ImagePreviewComponent {
    constructor(dialogRef, data) {
        this.dialogRef = dialogRef;
        this.data = data;
    }
    ngOnInit() {
        this.currentImageUrl = typeof this.data.currentImage === 'string' ? this.data.currentImage : this.data.currentImage.previewSrc || this.data.currentImage.src;
    }
    next() {
        const currentIdx = this.data.images.findIndex((image) => (image.previewSrc || image.src) === this.currentImageUrl);
        if (currentIdx === this.data.images.length - 1) {
            this.currentImageUrl = this.data.images[0].previewSrc || this.data.images[0].src;
        }
        else {
            this.currentImageUrl = this.data.images[currentIdx + 1].previewSrc || this.data.images[currentIdx + 1].src;
        }
    }
    prev() {
        const currentIdx = this.data.images.findIndex((image) => (image.previewSrc || image.src) === this.currentImageUrl);
        if (currentIdx === 0) {
            this.currentImageUrl = this.data.images[this.data.images.length - 1].previewSrc || this.data.images[this.data.images.length - 1].src;
        }
        else {
            this.currentImageUrl = this.data.images[currentIdx - 1].previewSrc || this.data.images[currentIdx - 1].src;
        }
    }
}
ImagePreviewComponent.decorators = [
    { type: Component, args: [{
                selector: 'app-image-preview',
                template: "<h1 mat-dialog-title class=\"d-flex\">\r\n  <mat-icon\r\n    mat-dialog-close\r\n    role=\"img\"\r\n    class=\"mat-icon notranslate material-icons mat-icon-no-color ml-auto\"\r\n    >close</mat-icon\r\n  >\r\n</h1>\r\n<div mat-dialog-content class=\"h-100 position-relative m-0\">\r\n <ng-container *ngIf=\"data?.images?.length\">\r\n    <span class=\"material-icons-outlined position-absolute prev\" (click)=\"prev()\">\r\n      arrow_back_ios\r\n    </span>\r\n    <span class=\"material-icons-outlined position-absolute next\" (click)=\"next()\">\r\n      arrow_forward_ios\r\n    </span>\r\n </ng-container>\r\n  <img\r\n    [src]=\"currentImageUrl\"\r\n    class=\"image-preview_image\"\r\n  />\r\n</div>\r\n",
                styles: [".image-prevew-panel .mat-dialog-container{padding:0}:host{display:flex;flex-direction:column;height:100%}.image-preview_image{-o-object-fit:contain;display:block;height:100%;margin:0 auto;object-fit:contain;width:90%}.material-icons-outlined{cursor:pointer}.material-icons-outlined.prev{left:5px;top:50%;transform:translateY(-50%)}.material-icons-outlined.next{right:5px;top:50%;transform:translateY(-50%)}"]
            },] }
];
ImagePreviewComponent.ctorParameters = () => [
    { type: MatDialogRef },
    { type: undefined, decorators: [{ type: Inject, args: [MAT_DIALOG_DATA,] }] }
];

class ImagePreviewDirective {
    constructor(el, dialog) {
        this.el = el;
        this.dialog = dialog;
        this.images = null;
    }
    onClick() {
        let currentImage;
        currentImage = this.el.nativeElement.src;
        if (this.images.length && this.sdPreviewCurrentIdx >= 0) {
            currentImage = this.images[this.sdPreviewCurrentIdx];
        }
        this.dialog.open(ImagePreviewComponent, {
            data: { currentImage, images: this.images },
            backdropClass: ["image-prevew-backdrop"],
            panelClass: "image-prevew-panel",
            width: "600px",
            maxWidth: "90%",
            height: "600px",
            maxHeight: "90%",
        });
    }
}
ImagePreviewDirective.decorators = [
    { type: Directive, args: [{
                selector: "[sdImagePreview]",
            },] }
];
ImagePreviewDirective.ctorParameters = () => [
    { type: ElementRef },
    { type: MatDialog }
];
ImagePreviewDirective.propDecorators = {
    images: [{ type: Input, args: ["sdImagePreview",] }],
    sdPreviewCurrentIdx: [{ type: Input }],
    onClick: [{ type: HostListener, args: ["click",] }]
};

var _initImageSlideShowBox;
class ImagePreviewSdmodalComponent {
    constructor(dialogRef, data) {
        this.dialogRef = dialogRef;
        this.data = data;
        this.imageList = [];
        this.imageOrgWidthList = [];
        this.imageListTotal = 0;
        this.imageCurrent = '';
        this.imageCurrentIndex = 0;
        this.imageCurrentPercent = 100;
        this.imageCurrentWidth = 0;
        _initImageSlideShowBox.set(this, () => {
            setTimeout(() => {
                this.imageList = [];
                this.imageOrgWidthList = [];
                $('img[alt=c-image-editor-quill]').each((index, obj) => {
                    $(obj).parent('a').addClass('c-image-editor-quill-box');
                    $(obj).parent('a').click((e) => {
                        e.preventDefault();
                        e.stopPropagation();
                        const currentImg = $(e.currentTarget).children('img');
                        this.imageCurrent = $(currentImg).attr('src');
                        this.imageCurrentIndex = this.imageList.findIndex(t => t === this.imageCurrent);
                        this.imageCurrentPercent = 100;
                        // @ts-ignore
                        this.imageCurrentWidth = $(currentImg)[0].naturalWidth;
                        this.popup.open();
                    });
                    this.imageList.push($(obj).attr('src'));
                    // @ts-ignore
                    this.imageOrgWidthList.push($(obj)[0].naturalWidth);
                    this.imageListTotal = this.imageList.length;
                });
            }, 100);
        });
        this.imageGalleryBoxPrev = () => {
            if (this.imageCurrentIndex > 0) {
                this.imageCurrentIndex--;
                this.imageCurrent = this.imageList[this.imageCurrentIndex];
                this.imageGalleryBoxCalculateWidth();
            }
        };
        this.imageGalleryBoxNext = () => {
            if (this.imageCurrentIndex < this.imageList.length - 1) {
                this.imageCurrentIndex++;
                this.imageCurrent = this.imageList[this.imageCurrentIndex];
                this.imageGalleryBoxCalculateWidth();
            }
        };
        this.imageGalleryBoxZoomIn = () => {
            if (this.imageCurrentPercent < 200) {
                this.imageCurrentPercent += 10;
                this.imageGalleryBoxCalculateWidth();
            }
        };
        this.imageGalleryBoxZoomOut = () => {
            if (this.imageCurrentPercent > 10) {
                this.imageCurrentPercent -= 10;
                this.imageGalleryBoxCalculateWidth();
            }
        };
        this.imageGalleryBoxCalculateWidth = () => {
            const orgWidth = this.imageOrgWidthList[this.imageCurrentIndex];
            this.imageCurrentWidth = this.imageCurrentPercent * orgWidth / 100.0;
        };
    }
    ngOnInit() {
        // tslint:disable-next-line:max-line-length
        // this.currentImageUrl = typeof this.data.currentImage === 'string' ? this.data.currentImage : this.data.currentImage.previewSrc || this.data.currentImage.src;
    }
}
_initImageSlideShowBox = new WeakMap();
ImagePreviewSdmodalComponent.decorators = [
    { type: Component, args: [{
                selector: 'sd-image-preview-2',
                template: "<sd-modal [title]=\"' '\" width=\"90%\" #popup>\r\n  <sd-modal-body>\r\n    <div class=\"c-image-gallery-box\">\r\n      <div class=\"c-content-scroll\">\r\n        <div class=\"c-content\">\r\n          <div class=\"c-content-cell\">\r\n            <img src=\"{{imageCurrent}}\" style=\"width: {{imageCurrentWidth}}px\"/>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"c-toolbar\">\r\n        <mat-icon (click)=\"imageGalleryBoxZoomOut()\">zoom_out</mat-icon>\r\n        <span><b>{{imageCurrentPercent}}%</b></span>\r\n        <mat-icon (click)=\"imageGalleryBoxZoomIn()\">zoom_in</mat-icon>\r\n        <span>&nbsp;</span>\r\n        <mat-icon (click)=\"imageGalleryBoxPrev()\">navigate_before</mat-icon>\r\n        <span><b>{{(imageCurrentIndex + 1)}} / {{imageListTotal}}</b></span>\r\n        <mat-icon (click)=\"imageGalleryBoxNext()\">navigate_next</mat-icon>\r\n      </div>\r\n\r\n    </div>\r\n\r\n  </sd-modal-body>\r\n</sd-modal>\r\n",
                styles: [".c-image-gallery-box{background:rgba(0,0,0,.54);position:relative}.c-image-gallery-box .c-content-scroll{height:79vh;overflow:auto;width:100%}.c-image-gallery-box .c-content-scroll .c-content{display:table;height:100%;width:100%}.c-image-gallery-box .c-content-scroll .c-content .c-content-cell{display:table-cell;text-align:center;vertical-align:middle}.c-image-gallery-box .c-toolbar{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;background:rgba(0,0,0,.5);border-radius:4px;bottom:18px;color:#eee;left:0;margin-left:auto;margin-right:auto;padding-top:8px;position:absolute;right:0;text-align:center;user-select:none;width:250px}.c-image-gallery-box .c-toolbar span{margin:0 4px;vertical-align:top}.c-image-gallery-box .c-toolbar mat-icon{cursor:pointer;margin:0 4px}"]
            },] }
];
ImagePreviewSdmodalComponent.ctorParameters = () => [
    { type: MatDialogRef },
    { type: undefined, decorators: [{ type: Inject, args: [MAT_DIALOG_DATA,] }] }
];
ImagePreviewSdmodalComponent.propDecorators = {
    popup: [{ type: ViewChild, args: [SdModal,] }]
};

class SdImagePreviewModule {
}
SdImagePreviewModule.decorators = [
    { type: NgModule, args: [{
                declarations: [ImagePreviewComponent, ImagePreviewSdmodalComponent, ImagePreviewDirective],
                exports: [ImagePreviewDirective],
                imports: [
                    CommonModule,
                    MatDialogModule,
                    MatIconModule,
                    SdModalModule
                ],
                entryComponents: [ImagePreviewComponent]
            },] }
];

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

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

export { SdImagePreviewModule, ImagePreviewComponent as ɵa, ImagePreviewSdmodalComponent as ɵb, ImagePreviewDirective as ɵc };
//# sourceMappingURL=sd-angular-core-image-preview.js.map
