import { Component, Injector, Input, ViewEncapsulation } from '@angular/core';
import { AxImage } from '../../../../forms/page/widgets/ax-image';
import { AxoUtils } from '../../../../axo-utils/axo-utils';
import { FormObjectViewService } from '../../form-object-view.service';
import { MatDialog } from '@angular/material/dialog';
import { ImageWidgetLightboxViewComponent } from './image-widget-lightbox-view/image-widget-lightbox-view.component';
import { ImageAnnotationDataDto } from './image-annotation-data-dto';
import { ImageMapViewComponent } from './image-map-view/image-map-view.component';
import { ActivatedRoute } from '@angular/router';
import { Subject } from 'rxjs';
import * as i0 from "@angular/core";
import * as i1 from "../../form-object-view.service";
import * as i2 from "@angular/router";
import * as i3 from "@angular/common";
import * as i4 from "@angular/material/icon";
function ImageWidgetViewComponent_ng_container_0_div_1_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 4);
    i0.ɵɵelement(1, "mat-icon", 5);
    i0.ɵɵelementStart(2, "span");
    i0.ɵɵtext(3);
    i0.ɵɵelementStart(4, "span", 6);
    i0.ɵɵtext(5, " :");
    i0.ɵɵelementEnd();
    i0.ɵɵelementEnd();
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r3 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance(3);
    i0.ɵɵtextInterpolate(ctx_r3.widget.prompt);
} }
function ImageWidgetViewComponent_ng_container_0_div_2_div_1_a_4_Template(rf, ctx) { if (rf & 1) {
    const _r11 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "a", 14);
    i0.ɵɵelementStart(1, "mat-icon", 16);
    i0.ɵɵlistener("click", function ImageWidgetViewComponent_ng_container_0_div_2_div_1_a_4_Template_mat_icon_click_1_listener() { i0.ɵɵrestoreView(_r11); const imageWidget_r6 = i0.ɵɵnextContext().$implicit; const ctx_r9 = i0.ɵɵnextContext(3); return ctx_r9.showImageMapView(imageWidget_r6); });
    i0.ɵɵelementEnd();
    i0.ɵɵelementEnd();
} }
function ImageWidgetViewComponent_ng_container_0_div_2_div_1_Template(rf, ctx) { if (rf & 1) {
    const _r13 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 9);
    i0.ɵɵelementStart(1, "div", 10);
    i0.ɵɵelement(2, "img", 11);
    i0.ɵɵelementStart(3, "div", 12);
    i0.ɵɵtemplate(4, ImageWidgetViewComponent_ng_container_0_div_2_div_1_a_4_Template, 2, 0, "a", 13);
    i0.ɵɵelementStart(5, "a", 14);
    i0.ɵɵelementStart(6, "mat-icon", 15);
    i0.ɵɵlistener("click", function ImageWidgetViewComponent_ng_container_0_div_2_div_1_Template_mat_icon_click_6_listener() { const restoredCtx = i0.ɵɵrestoreView(_r13); const i_r7 = restoredCtx.index; const ctx_r12 = i0.ɵɵnextContext(3); return ctx_r12.showAnnotationImage(ctx_r12.widget.identifier, i_r7); });
    i0.ɵɵelementEnd();
    i0.ɵɵelementEnd();
    i0.ɵɵelementEnd();
    i0.ɵɵelementEnd();
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const imageWidget_r6 = ctx.$implicit;
    const ctx_r5 = i0.ɵɵnextContext(3);
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("src", ctx_r5.baseUrl + imageWidget_r6.thumbnail, i0.ɵɵsanitizeUrl);
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("ngIf", ctx_r5.widgetValue.longitude !== null && ctx_r5.widgetValue.latitude !== null);
} }
function ImageWidgetViewComponent_ng_container_0_div_2_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 7);
    i0.ɵɵtemplate(1, ImageWidgetViewComponent_ng_container_0_div_2_div_1_Template, 7, 2, "div", 8);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r4 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngForOf", ctx_r4.widgetValue);
} }
function ImageWidgetViewComponent_ng_container_0_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementContainerStart(0);
    i0.ɵɵtemplate(1, ImageWidgetViewComponent_ng_container_0_div_1_Template, 6, 1, "div", 2);
    i0.ɵɵtemplate(2, ImageWidgetViewComponent_ng_container_0_div_2_Template, 2, 1, "div", 3);
    i0.ɵɵelementContainerEnd();
} if (rf & 2) {
    const ctx_r0 = i0.ɵɵnextContext();
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngIf", ctx_r0.section.showPrompt);
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngIf", ctx_r0.widgetValue.length > 0);
} }
function ImageWidgetViewComponent_ng_template_1_span_2_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "span");
    i0.ɵɵtext(1);
    i0.ɵɵelementStart(2, "span", 6);
    i0.ɵɵtext(3, ":");
    i0.ɵɵelementEnd();
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r14 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance(1);
    i0.ɵɵtextInterpolate(ctx_r14.widget.prompt);
} }
function ImageWidgetViewComponent_ng_template_1_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 17);
    i0.ɵɵelement(1, "mat-icon", 5);
    i0.ɵɵtemplate(2, ImageWidgetViewComponent_ng_template_1_span_2_Template, 4, 1, "span", 18);
    i0.ɵɵelementStart(3, "span", 19);
    i0.ɵɵtext(4, "-");
    i0.ɵɵelementEnd();
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext();
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("ngIf", ctx_r2.section.showPrompt);
} }
export class ImageWidgetViewComponent {
    constructor(_formObjectViewService, _injector, _route) {
        this._formObjectViewService = _formObjectViewService;
        this._injector = _injector;
        this._route = _route;
        this._unsubscribeAll = new Subject();
    }
    ngOnInit() {
        this.widgetValue = this.widget.getWidgetValue();
        if (this.widgetValue && this.widgetValue.length > 0) {
            this.widgetValue = this.widgetValue.map((imageValue) => {
                imageValue.thumbnail = AxoUtils.removeSlashFromImageUrl(imageValue.thumbnail);
                return imageValue;
            });
        }
    }
    /**
      * Get Image Annotation Data using widget identifier
      */
    showAnnotationImage(imgIdentifier, index) {
        const formData = new FormData();
        this.annotationData = new ImageAnnotationDataDto();
        this.annotationData.baseUrl = this.baseUrl;
        this.annotationData.widget = this.widget;
        this.annotationData.widgetProperties = this.widgetProperties;
        this.annotationData.selectedImageId = index;
        formData.append('foid', this.formObjectId);
        formData.append('img_identifier', imgIdentifier);
        this._formObjectViewService.getImageFieldWithAnnotations(formData, this.axonatorX1Url).then((data) => {
            data.baseUrl = this.annotationData.baseUrl;
            data.selectedImageId = this.annotationData.selectedImageId;
            this.annotationData = data;
            this.showAnnotationView = true;
            this.showImageViewWithAnnotation();
        });
    }
    /**
     * Open Image view  dialog
     */
    showImageViewWithAnnotation() {
        this.dialog = this._injector.get(MatDialog);
        this.dialog.open(ImageWidgetLightboxViewComponent, {
            height: '80vh',
            width: '80vw',
            maxWidth: '100vw',
            panelClass: 'imagelightbox-container',
            data: this.annotationData
        });
    }
    /**
     * Open Image map location dialog
     */
    showImageMapView(imageWidget) {
        this.dialog = this._injector.get(MatDialog);
        this.dialog.open(ImageMapViewComponent, {
            maxWidth: '100vw',
            maxHeight: '100vh',
            height: '100%',
            width: '100%',
            panelClass: 'image-map-box-container',
            data: {
                latitude: imageWidget.latitude,
                longitude: imageWidget.longitude,
                zoom: 12
            },
        });
    }
    ngOnDestroy() {
        // Unsubscribe from all subscriptions
        this._unsubscribeAll.next();
        this._unsubscribeAll.complete();
    }
}
ImageWidgetViewComponent.ɵfac = function ImageWidgetViewComponent_Factory(t) { return new (t || ImageWidgetViewComponent)(i0.ɵɵdirectiveInject(i1.FormObjectViewService), i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i2.ActivatedRoute)); };
ImageWidgetViewComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ImageWidgetViewComponent, selectors: [["lib-image-widget-view"]], inputs: { widget: "widget", widgetProperties: "widgetProperties", baseUrl: "baseUrl", axonatorX1Url: "axonatorX1Url", formObjectId: "formObjectId" }, decls: 3, vars: 2, consts: [[4, "ngIf", "ngIfElse"], ["isWidgetValueEmpty", ""], ["class", "data-detail-title flex text-sm m-0", 4, "ngIf"], ["class", "w-full customscroll capture-container py-2 pr-2", 4, "ngIf"], [1, "data-detail-title", "flex", "text-sm", "m-0"], ["svgIcon", "axo_image", 1, "add-text"], [1, "colon"], [1, "w-full", "customscroll", "capture-container", "py-2", "pr-2"], ["class", "data-detail", 4, "ngFor", "ngForOf"], [1, "data-detail"], [1, "capture-data-container", "relative", "text-center", "rounded"], ["alt", "...", 1, "capture-image", 3, "src"], [1, "image-overlay"], ["target", "_blank", 4, "ngIf"], ["target", "_blank"], ["svgIcon", "axo_eye_outline", 3, "click"], ["svgIcon", "axo_location_outline", 3, "click"], [1, "data-detail-info", "capture-container"], [4, "ngIf"], [1, "flex", "justify-start"]], template: function ImageWidgetViewComponent_Template(rf, ctx) { if (rf & 1) {
        i0.ɵɵtemplate(0, ImageWidgetViewComponent_ng_container_0_Template, 3, 2, "ng-container", 0);
        i0.ɵɵtemplate(1, ImageWidgetViewComponent_ng_template_1_Template, 5, 1, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor);
    } if (rf & 2) {
        const _r1 = i0.ɵɵreference(2);
        i0.ɵɵproperty("ngIf", ctx.widget.value)("ngIfElse", _r1);
    } }, directives: [i3.NgIf, i4.MatIcon, i3.NgForOf], styles: ["lib-image-widget-view .capture-data-container{height:5rem;width:5rem;display:flex;justify-content:center;align-items:center;background-color:#ececec}lib-image-widget-view .capture-data-container .capture-image{width:auto!important;max-width:100%;max-height:100%}lib-image-widget-view .image-overlay{display:flex;justify-content:center;align-items:center;position:absolute;column-gap:.8rem;top:0;background:rgba(0,0,0,.5);transition:.5s ease;opacity:0;color:#fff;font-size:20px;width:100%;height:100%;border-radius:.25rem}lib-image-widget-view .image-overlay a{cursor:pointer}lib-image-widget-view .image-overlay a mat-icon{height:1.6rem;width:1.6rem;min-width:1.6rem;min-height:1.6rem}lib-image-widget-view .image-overlay:hover{opacity:1}lib-image-widget-view .mat-icon{height:18px;width:18px;min-width:18px;min-height:18px}\n"], encapsulation: 2 });
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ImageWidgetViewComponent, [{
        type: Component,
        args: [{ selector: 'lib-image-widget-view', encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"widget.value; else isWidgetValueEmpty\" >\n  <div class=\"data-detail-title flex text-sm m-0\" *ngIf=\"section.showPrompt\">\n    <mat-icon class=\"add-text\" svgIcon=\"axo_image\"></mat-icon> \n    <span>{{widget.prompt}}<span class=\"colon\"> :</span></span>\n</div>\n<div class=\"w-full customscroll capture-container py-2 pr-2\" *ngIf=\"widgetValue.length>0\">\n  <div class=\"data-detail\" *ngFor=\"let imageWidget of widgetValue; let i=index\">\n    <div class=\"capture-data-container relative text-center rounded\">\n      <img [src]=\"baseUrl + imageWidget.thumbnail\" class=\"capture-image\" alt=\"...\" />\n      <div class=\"image-overlay\">\n        <a *ngIf=\"widgetValue.longitude !== null && widgetValue.latitude !==null\"  target=\"_blank\">  \n        <mat-icon svgIcon=\"axo_location_outline\" (click)=\"showImageMapView(imageWidget)\" ></mat-icon>\n        </a>\n        <a target=\"_blank\"> \n         <mat-icon svgIcon=\"axo_eye_outline\" (click)=\"showAnnotationImage(widget.identifier,i)\"></mat-icon>\n        </a>\n      </div>\n    </div>\n    </div></div>\n  </ng-container>\n  <ng-template #isWidgetValueEmpty>\n    <div class=\"data-detail-info capture-container\">\n      <mat-icon class=\"add-text\" svgIcon=\"axo_image\"></mat-icon> \n      <span *ngIf=\"section.showPrompt\">{{widget.prompt}}<span class=\"colon\">:</span></span>\n      <span class=\"flex justify-start\">-</span>\n    </div>\n  </ng-template>\n      \n  \n      \n\n\n  \n", styles: ["lib-image-widget-view .capture-data-container{height:5rem;width:5rem;display:flex;justify-content:center;align-items:center;background-color:#ececec}lib-image-widget-view .capture-data-container .capture-image{width:auto!important;max-width:100%;max-height:100%}lib-image-widget-view .image-overlay{display:flex;justify-content:center;align-items:center;position:absolute;column-gap:.8rem;top:0;background:rgba(0,0,0,.5);transition:.5s ease;opacity:0;color:#fff;font-size:20px;width:100%;height:100%;border-radius:.25rem}lib-image-widget-view .image-overlay a{cursor:pointer}lib-image-widget-view .image-overlay a mat-icon{height:1.6rem;width:1.6rem;min-width:1.6rem;min-height:1.6rem}lib-image-widget-view .image-overlay:hover{opacity:1}lib-image-widget-view .mat-icon{height:18px;width:18px;min-width:18px;min-height:18px}\n"] }]
    }], function () { return [{ type: i1.FormObjectViewService }, { type: i0.Injector }, { type: i2.ActivatedRoute }]; }, { widget: [{
            type: Input
        }], widgetProperties: [{
            type: Input
        }], baseUrl: [{
            type: Input
        }], axonatorX1Url: [{
            type: Input
        }], formObjectId: [{
            type: Input
        }] }); })();
//# sourceMappingURL=data:application/json;base64, 