import { Component, Input } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@ng-bootstrap/ng-bootstrap";
import * as i2 from "@angular/platform-browser";
import * as i3 from "tango-app-ui-shared";
import * as i4 from "../../services/trax.service";
import * as i5 from "@angular/common";
import * as i6 from "@angular/forms";
export class TraxRunAIPopupComponent {
    dialogRef;
    sanitizer;
    toast;
    sopService;
    requestText = "";
    next = true;
    runAIFeatures = [
        { featureName: "Matched/Not Matched", lableName: "detectionStatus" },
        { featureName: "Count", lableName: "No of Employee" },
        { featureName: "Character Extraction", lableName: "GST Number" },
        { featureName: "Others", lableName: "" },
    ];
    selectedFeatures = [];
    data;
    constructor(dialogRef, sanitizer, toast, sopService) {
        this.dialogRef = dialogRef;
        this.sanitizer = sanitizer;
        this.toast = toast;
        this.sopService = sopService;
    }
    ngOnInit() {
        this.sopService.getClientrunAIFeatues(this.data.clientId).subscribe((res) => {
            if (res && res.code == 200 && res.data.length) {
                this.runAIFeatures = res.data.map((ele) => { return { featureName: ele.featureName, lableName: ele.lableName }; });
            }
        });
        if (this.data?.user) {
            this.data.user.forEach((item) => {
                item.invite = true;
            });
        }
        this.data.images = JSON.parse(JSON.stringify(this.data.images));
        this.next = this.data.images.length ? true : false;
        this.selectedFeatures = this.data.runAIFeatures;
    }
    closepopup() {
        this.dialogRef.close('cancel');
    }
    confirmpopup() {
        let errors = [];
        if (!this.selectedFeatures.length) {
            this.toast.getErrorToast('Please select a Features');
            return;
        }
        this.selectedFeatures.forEach((ele) => {
            ele.lableName = ele?.lableName.trim();
            if (!ele?.lableName.length) {
                errors.push(`${ele.featureName}`);
            }
        });
        if (errors.length) {
            this.toast.getErrorToast(`${errors.toString()} feature label is missing`);
            return;
        }
        let confirmData = {
            images: this.data.images,
            runAIFeatures: this.selectedFeatures,
            runAIDescription: this.data.runAIDescription,
        };
        this.dialogRef.close(confirmData);
    }
    checkRunAI() {
        if (this.data?.images?.length) {
            let enableRunAI = this.data?.images?.find((ele) => ele.runAI);
            return enableRunAI ? false : true;
        }
    }
    onStoreSelect(selectedItems) {
        this.selectedFeatures = selectedItems.map((item) => {
            // Find the full feature object from runAIFeatures to get the lableName
            const fullFeature = this.runAIFeatures.find((f) => f.featureName === item.featureName);
            return {
                ...item,
                lableName: fullFeature?.lableName,
                customLabel: "", // Initialize custom label
            };
        });
        console.log(this.selectedFeatures, 'features');
    }
    onInputChange(value) {
        // Remove leading/trailing spaces
        let cleanValue = value.trim();
        // Block <script> or suspicious tags
        cleanValue = cleanValue.replace(/<script.*?>.*?<\/script>/gi, '');
        // (Optional) remove all angle brackets to block any HTML
        cleanValue = cleanValue.replace(/<.*?>/g, '');
        this.data.runAIDescription = cleanValue;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TraxRunAIPopupComponent, deps: [{ token: i1.NgbActiveModal }, { token: i2.DomSanitizer }, { token: i3.ToastService }, { token: i4.TraxService }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: TraxRunAIPopupComponent, selector: "lib-trax-run-ai-popup", inputs: { data: "data" }, ngImport: i0, template: "<div class=\"text-start p-9 h-auto scroll-y my-2\">\r\n    <div [innerHTML]=\"data.imagesrc\"></div>\r\n    <div class=\"customtitle  mt-4\">\r\n        {{data.title}}\r\n    </div>\r\n    <div class=\"content mt-4\" [innerHtml]=\"data.content\">\r\n    </div>\r\n    <div class=\"error mt-5 p-5 pt-0 h-auto mh-200px overflow-scroll\" *ngIf=\"data?.error\">\r\n        <div class=\"mt-5\" *ngFor=\"let error of data?.error;let i =index\">\r\n            <span>{{i + 1}}.&#41; {{error}}</span>\r\n        </div>\r\n    </div>\r\n    <div class=\"subtitle storesubtitle mb-4\">\r\n        {{data.subtitle}}\r\n    </div>\r\n\r\n    <div *ngIf=\"next\" >\r\n        <div class=\"mt-5\">\r\n            <label for=\"inputmodel\" class=\"label\">Question</label><br>\r\n            <input class=\"inputlabel\" id=\"inputmodel\" placeholder=\"Question\" type=\"text\" value=\"{{data.questionName}}\" disabled>\r\n        </div>\r\n    \r\n        <div class=\"mt-5\">\r\n            <label for=\"inputmodel\" class=\"label\">Select the reference images to process</label><br>\r\n            <div class=\"row\">\r\n                <div class=\"col-md-4 position-relative\" *ngFor=\"let img of data.images\"> <!-- -->\r\n                    <div class=\"pb-4 img-border border border-1 h-100 rounded-3 position-relative\">\r\n                        <!-- Checkbox in top-right --> <!--[(ngModel)]=\"img.selected\"-->\r\n                        <input type=\"checkbox\" \r\n                            class=\"position-absolute absolute form-check-input\"\r\n                            [(ngModel)]=\"img.runAI\" />\r\n    \r\n                        <!-- Image -->\r\n                        <img src=\"{{data.environment}}{{img.imageURL}}\" alt=\"\" class=\"w-100 mb-2 rounded border\" width=\"90%\" height=\"100px\"/>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"!next\">\r\n        <!-- <div class=\"mt-5\">\r\n            <label for=\"inputmodel\" class=\"label\">What\u2019s the ouput you looking for</label><br>\r\n            <input class=\"inputlabel\" id=\"inputmodel\" placeholder=\"Select Option\" type=\"text\">\r\n        </div> -->\r\n        <div class=\"mt-5\">\r\n            <div class=\"select-wrapper\">\r\n                <div class=\"placeholder-overlay\"> What\u2019s the ouput you looking for </div>\r\n                <lib-select [items]=\"runAIFeatures\" [disabled]=\"false\" [multi]=\"true\"\r\n                    [searchField]=\"'featureName'\" [idField]=\"'featureName'\" (selected)=\"onStoreSelect($event)\"\r\n                    [selectedValues]=\"selectedFeatures\"></lib-select>\r\n            </div>\r\n        </div>\r\n        <div class=\"mt-5\">\r\n            <label for=\"inputmodel\" class=\"label\">Specify your request</label><br>\r\n            <input class=\"inputlabel\" id=\"inputmodel\" [(ngModel)]=\"data.runAIDescription\" (ngModelChange)=\"onInputChange($event)\" placeholder=\"\" type=\"text\">\r\n        </div>\r\n    \r\n        <div class=\"mt-5\" *ngFor=\"let feature of selectedFeatures; let i = index\">\r\n            <ng-container *ngIf=\"feature.lableName !== 'detectionStatus'\">\r\n                <label for=\"label-{{i}}\" class=\"label\">\r\n                    @if(feature.featureName === 'Others') {\r\n                        Label if any\r\n                    }@else {\r\n                        Label for {{feature.featureName || feature.lableName}}\r\n                    }\r\n                </label><br>\r\n                <input class=\"inputlabel\" id=\"label-{{i}}\" \r\n                    placeholder=\"{{feature?.lableName}}\" \r\n                    type=\"text\" [(ngModel)]=\"feature.lableName\">\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n\r\n\r\n\r\n    <div class=\"d-flex text-center justify-content-between mt-5\">\r\n        <button class=\"btn min-width-popup btn-outline\" (click)=\"closepopup()\">Cancel</button>\r\n        <button class=\"btn min-width-popup btn-outline active btn-active-primary\" *ngIf=\"!next\"\r\n            (click)=\"confirmpopup()\">Request</button>\r\n        <button class=\"btn min-width-popup btn-outline active btn-active-primary\" *ngIf=\"next\"\r\n            (click)=\"next = false\" [disabled]=\"checkRunAI()\">Next</button>\r\n    </div>\r\n</div>\r\n", styles: [".Overlay{top:0;left:0;width:100%;height:100%;z-index:200!important;position:fixed;background:#58575799}input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #D0D5DD)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.form-check.form-check-solid .form-check-input:checked{background-color:var(--primary-50, #EAF8FF)!important}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF)!important;background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.min-width-popup{min-width:47%!important}.content{color:var(--gray-500, #667085);font-family:Inter;font-size:14px;padding:0!important;font-style:normal;font-weight:400}.label{color:var(--gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}input{font-size:16px;color:var(--gray-900, #101828)}.inputlabel{width:100%;margin-top:5px;padding:10px 14px;border-radius:8px;border:1px solid var(--gray-300, #D0D5DD);background:var(--white, #FFF);box-shadow:0 1px 2px #1018280d}.inputlabel:focus{outline:1px solid var(--gray-300, #D0D5DD)!important;box-shadow:0 1px 2px #1018280d!important;border:#F9FAFB!important;outline:1px solid var(--primary-300, #6BCAFF)!important;box-shadow:0 0 0 4px #d5effe,0 1px 2px #1018280d!important;color:#101828}.popup{position:absolute;top:50%;left:50%;opacity:1;transform:translate(-50%,-50%);background:var(--white, #FFF);border-radius:12px!important;border-radius:12px;box-shadow:0 8px 8px -4px #10182808,0 20px 24px -4px #10182814;padding:30px;width:400px;height:fit-content}.btn-outline{border:1px solid lightgrey;padding:calc(.75rem + 1px) calc(1.5rem + 1px)}.fs-18px{font-size:18px;color:var(--black, #000);font-family:inter}.fw-600{font-weight:600!important}::ng-deep .mat-dialog-container{box-shadow:none;background:#fff;color:#000000de}.symbol-label{color:var(--primary-600, #00A3FF);text-align:center;font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.invitemain{color:var(--gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:20px}.invitesub{color:var(--gray-500, #667085);font-family:Inter;font-size:14px;font-style:normal;font-weight:400;line-height:20px}.subtitle{color:var(--Black, #101828);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.customtitle{color:var(--gray-900, #101828);font-family:Inter;font-size:18px;font-style:normal;font-weight:600;line-height:28px}.addScroll{height:300px;overflow-y:scroll}.storesubtitle{word-break:break-all;padding-top:.5em}::ng-deep .mat-dialog-container{display:block;padding:24px;border-radius:12px;box-sizing:border-box;overflow:auto;outline:0;width:100%;height:100%;min-height:inherit;max-height:inherit}.error{color:var(--Error-700, #B42318);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px;border-radius:8px;border:1px solid var(--Error-300, #FDA29B);background:var(--Error-25, #FFFBFA)}.absolute{right:2px}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.CustomSelectComponent, selector: "lib-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TraxRunAIPopupComponent, decorators: [{
            type: Component,
            args: [{ selector: "lib-trax-run-ai-popup", template: "<div class=\"text-start p-9 h-auto scroll-y my-2\">\r\n    <div [innerHTML]=\"data.imagesrc\"></div>\r\n    <div class=\"customtitle  mt-4\">\r\n        {{data.title}}\r\n    </div>\r\n    <div class=\"content mt-4\" [innerHtml]=\"data.content\">\r\n    </div>\r\n    <div class=\"error mt-5 p-5 pt-0 h-auto mh-200px overflow-scroll\" *ngIf=\"data?.error\">\r\n        <div class=\"mt-5\" *ngFor=\"let error of data?.error;let i =index\">\r\n            <span>{{i + 1}}.&#41; {{error}}</span>\r\n        </div>\r\n    </div>\r\n    <div class=\"subtitle storesubtitle mb-4\">\r\n        {{data.subtitle}}\r\n    </div>\r\n\r\n    <div *ngIf=\"next\" >\r\n        <div class=\"mt-5\">\r\n            <label for=\"inputmodel\" class=\"label\">Question</label><br>\r\n            <input class=\"inputlabel\" id=\"inputmodel\" placeholder=\"Question\" type=\"text\" value=\"{{data.questionName}}\" disabled>\r\n        </div>\r\n    \r\n        <div class=\"mt-5\">\r\n            <label for=\"inputmodel\" class=\"label\">Select the reference images to process</label><br>\r\n            <div class=\"row\">\r\n                <div class=\"col-md-4 position-relative\" *ngFor=\"let img of data.images\"> <!-- -->\r\n                    <div class=\"pb-4 img-border border border-1 h-100 rounded-3 position-relative\">\r\n                        <!-- Checkbox in top-right --> <!--[(ngModel)]=\"img.selected\"-->\r\n                        <input type=\"checkbox\" \r\n                            class=\"position-absolute absolute form-check-input\"\r\n                            [(ngModel)]=\"img.runAI\" />\r\n    \r\n                        <!-- Image -->\r\n                        <img src=\"{{data.environment}}{{img.imageURL}}\" alt=\"\" class=\"w-100 mb-2 rounded border\" width=\"90%\" height=\"100px\"/>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"!next\">\r\n        <!-- <div class=\"mt-5\">\r\n            <label for=\"inputmodel\" class=\"label\">What\u2019s the ouput you looking for</label><br>\r\n            <input class=\"inputlabel\" id=\"inputmodel\" placeholder=\"Select Option\" type=\"text\">\r\n        </div> -->\r\n        <div class=\"mt-5\">\r\n            <div class=\"select-wrapper\">\r\n                <div class=\"placeholder-overlay\"> What\u2019s the ouput you looking for </div>\r\n                <lib-select [items]=\"runAIFeatures\" [disabled]=\"false\" [multi]=\"true\"\r\n                    [searchField]=\"'featureName'\" [idField]=\"'featureName'\" (selected)=\"onStoreSelect($event)\"\r\n                    [selectedValues]=\"selectedFeatures\"></lib-select>\r\n            </div>\r\n        </div>\r\n        <div class=\"mt-5\">\r\n            <label for=\"inputmodel\" class=\"label\">Specify your request</label><br>\r\n            <input class=\"inputlabel\" id=\"inputmodel\" [(ngModel)]=\"data.runAIDescription\" (ngModelChange)=\"onInputChange($event)\" placeholder=\"\" type=\"text\">\r\n        </div>\r\n    \r\n        <div class=\"mt-5\" *ngFor=\"let feature of selectedFeatures; let i = index\">\r\n            <ng-container *ngIf=\"feature.lableName !== 'detectionStatus'\">\r\n                <label for=\"label-{{i}}\" class=\"label\">\r\n                    @if(feature.featureName === 'Others') {\r\n                        Label if any\r\n                    }@else {\r\n                        Label for {{feature.featureName || feature.lableName}}\r\n                    }\r\n                </label><br>\r\n                <input class=\"inputlabel\" id=\"label-{{i}}\" \r\n                    placeholder=\"{{feature?.lableName}}\" \r\n                    type=\"text\" [(ngModel)]=\"feature.lableName\">\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n\r\n\r\n\r\n    <div class=\"d-flex text-center justify-content-between mt-5\">\r\n        <button class=\"btn min-width-popup btn-outline\" (click)=\"closepopup()\">Cancel</button>\r\n        <button class=\"btn min-width-popup btn-outline active btn-active-primary\" *ngIf=\"!next\"\r\n            (click)=\"confirmpopup()\">Request</button>\r\n        <button class=\"btn min-width-popup btn-outline active btn-active-primary\" *ngIf=\"next\"\r\n            (click)=\"next = false\" [disabled]=\"checkRunAI()\">Next</button>\r\n    </div>\r\n</div>\r\n", styles: [".Overlay{top:0;left:0;width:100%;height:100%;z-index:200!important;position:fixed;background:#58575799}input[type=checkbox]{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #D0D5DD)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.form-check.form-check-solid .form-check-input:checked{background-color:var(--primary-50, #EAF8FF)!important}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF)!important;background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.min-width-popup{min-width:47%!important}.content{color:var(--gray-500, #667085);font-family:Inter;font-size:14px;padding:0!important;font-style:normal;font-weight:400}.label{color:var(--gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}input{font-size:16px;color:var(--gray-900, #101828)}.inputlabel{width:100%;margin-top:5px;padding:10px 14px;border-radius:8px;border:1px solid var(--gray-300, #D0D5DD);background:var(--white, #FFF);box-shadow:0 1px 2px #1018280d}.inputlabel:focus{outline:1px solid var(--gray-300, #D0D5DD)!important;box-shadow:0 1px 2px #1018280d!important;border:#F9FAFB!important;outline:1px solid var(--primary-300, #6BCAFF)!important;box-shadow:0 0 0 4px #d5effe,0 1px 2px #1018280d!important;color:#101828}.popup{position:absolute;top:50%;left:50%;opacity:1;transform:translate(-50%,-50%);background:var(--white, #FFF);border-radius:12px!important;border-radius:12px;box-shadow:0 8px 8px -4px #10182808,0 20px 24px -4px #10182814;padding:30px;width:400px;height:fit-content}.btn-outline{border:1px solid lightgrey;padding:calc(.75rem + 1px) calc(1.5rem + 1px)}.fs-18px{font-size:18px;color:var(--black, #000);font-family:inter}.fw-600{font-weight:600!important}::ng-deep .mat-dialog-container{box-shadow:none;background:#fff;color:#000000de}.symbol-label{color:var(--primary-600, #00A3FF);text-align:center;font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.invitemain{color:var(--gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:20px}.invitesub{color:var(--gray-500, #667085);font-family:Inter;font-size:14px;font-style:normal;font-weight:400;line-height:20px}.subtitle{color:var(--Black, #101828);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.customtitle{color:var(--gray-900, #101828);font-family:Inter;font-size:18px;font-style:normal;font-weight:600;line-height:28px}.addScroll{height:300px;overflow-y:scroll}.storesubtitle{word-break:break-all;padding-top:.5em}::ng-deep .mat-dialog-container{display:block;padding:24px;border-radius:12px;box-sizing:border-box;overflow:auto;outline:0;width:100%;height:100%;min-height:inherit;max-height:inherit}.error{color:var(--Error-700, #B42318);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px;border-radius:8px;border:1px solid var(--Error-300, #FDA29B);background:var(--Error-25, #FFFBFA)}.absolute{right:2px}\n"] }]
        }], ctorParameters: () => [{ type: i1.NgbActiveModal }, { type: i2.DomSanitizer }, { type: i3.ToastService }, { type: i4.TraxService }], propDecorators: { data: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 