import { Component, Input, ViewEncapsulation } from '@angular/core';
import { AxoUtils } from '../../../../axo-utils/axo-utils';
import { WidgetSubType } from '../../../../forms/page/common/widget-enums';
import { ChoiceList } from '../../../../forms/page/widgets/choicelist';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/material/tooltip";
import * as i3 from "@angular/material/list";
function FormObjectChoiceListValueComponent_mat_card_0_div_10_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 11);
    i0.ɵɵelementStart(1, "span", 12);
    i0.ɵɵtext(2);
    i0.ɵɵelementEnd();
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r3 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate1("+", ctx_r3.widgetValue.length - 1, "");
} }
const _c0 = function (a0, a1) { return { "reference-list-class": a0, "multi-reference-list-class": a1 }; };
function FormObjectChoiceListValueComponent_mat_card_0_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "mat-card", 2);
    i0.ɵɵelementStart(1, "div", 3);
    i0.ɵɵelementStart(2, "div", 4);
    i0.ɵɵelementStart(3, "div", 5);
    i0.ɵɵelement(4, "img", 6);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(5, "div", 7);
    i0.ɵɵelementStart(6, "div", 8);
    i0.ɵɵtext(7);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(8, "div", 9);
    i0.ɵɵtext(9);
    i0.ɵɵelementEnd();
    i0.ɵɵelementEnd();
    i0.ɵɵelementEnd();
    i0.ɵɵtemplate(10, FormObjectChoiceListValueComponent_mat_card_0_div_10_Template, 3, 1, "div", 10);
    i0.ɵɵelementEnd();
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r0 = i0.ɵɵnextContext();
    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(7, _c0, ctx_r0.widget.subType === "reference_list", ctx_r0.widgetValue.length > 1));
    i0.ɵɵadvance(4);
    i0.ɵɵproperty("src", ctx_r0.baseUrl + ctx_r0.choiceListValue, i0.ɵɵsanitizeUrl);
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("matTooltip", ctx_r0.widgetValue[0].formObjectTitle);
    i0.ɵɵadvance(1);
    i0.ɵɵtextInterpolate(ctx_r0.widgetValue[0].formObjectTitle);
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("matTooltip", ctx_r0.widgetValue[0].formObjectSubTitle);
    i0.ɵɵadvance(1);
    i0.ɵɵtextInterpolate(ctx_r0.widgetValue[0].formObjectSubTitle);
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngIf", ctx_r0.widgetValue.length > 1);
} }
function FormObjectChoiceListValueComponent_mat_card_1_div_8_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 11);
    i0.ɵɵelementStart(1, "span", 12);
    i0.ɵɵtext(2);
    i0.ɵɵelementEnd();
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r4 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate1("+", ctx_r4.widgetValue.length - 1, "");
} }
const _c1 = function (a0) { return { "imgFixed-list-class": a0 }; };
function FormObjectChoiceListValueComponent_mat_card_1_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "mat-card", 2);
    i0.ɵɵelementStart(1, "div", 3);
    i0.ɵɵelementStart(2, "div", 4);
    i0.ɵɵelementStart(3, "div", 13);
    i0.ɵɵelement(4, "img", 6);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(5, "div", 14);
    i0.ɵɵelementStart(6, "div", 15);
    i0.ɵɵtext(7);
    i0.ɵɵelementEnd();
    i0.ɵɵelementEnd();
    i0.ɵɵelementEnd();
    i0.ɵɵtemplate(8, FormObjectChoiceListValueComponent_mat_card_1_div_8_Template, 3, 1, "div", 10);
    i0.ɵɵelementEnd();
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(5, _c1, ctx_r1.widget.subType === "img_fixed_list"));
    i0.ɵɵadvance(4);
    i0.ɵɵproperty("src", ctx_r1.baseUrl + ctx_r1.choiceListValue, i0.ɵɵsanitizeUrl);
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("matTooltip", ctx_r1.choiceListImgLabel);
    i0.ɵɵadvance(1);
    i0.ɵɵtextInterpolate(ctx_r1.choiceListImgLabel);
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngIf", ctx_r1.widgetValue.length > 1);
} }
function FormObjectChoiceListValueComponent_div_2_mat_list_item_2_span_3_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "span");
    i0.ɵɵtext(1, ",");
    i0.ɵɵelementEnd();
} }
const _c2 = function (a0, a1, a2) { return { "color": a0, "background-color": a1, "border": a2 }; };
function FormObjectChoiceListValueComponent_div_2_mat_list_item_2_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "mat-list-item", 19);
    i0.ɵɵelementStart(1, "span", 20);
    i0.ɵɵtext(2);
    i0.ɵɵelementEnd();
    i0.ɵɵtemplate(3, FormObjectChoiceListValueComponent_div_2_mat_list_item_2_span_3_Template, 2, 0, "span", 21);
    i0.ɵɵtext(4, "\u00A0 ");
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const item_r6 = ctx.$implicit;
    const i_r7 = ctx.index;
    const ctx_r5 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction3(3, _c2, ctx_r5.extractLabelAndHexCode(item_r6).hexCode ? ctx_r5.getContrastColor(ctx_r5.extractLabelAndHexCode(item_r6).hexCode) : "#000000", ctx_r5.extractLabelAndHexCode(item_r6).hexCode || "#F0F0F0", "1.25px solid " + (ctx_r5.extractLabelAndHexCode(item_r6).hexCode || "#D3D3D3")));
    i0.ɵɵadvance(1);
    i0.ɵɵtextInterpolate1(" ", ctx_r5.extractLabelAndHexCode(item_r6).label, " ");
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngIf", i_r7 !== ctx_r5.widgetValue.length - 1);
} }
const _c3 = function (a0) { return { "fixed-list-class": a0 }; };
function FormObjectChoiceListValueComponent_div_2_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 16);
    i0.ɵɵelementStart(1, "mat-list", 17);
    i0.ɵɵtemplate(2, FormObjectChoiceListValueComponent_div_2_mat_list_item_2_Template, 5, 7, "mat-list-item", 18);
    i0.ɵɵelementEnd();
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext();
    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(2, _c3, ctx_r2.widget.subType === "fixed_list"));
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("ngForOf", ctx_r2.widgetValue);
} }
export class FormObjectChoiceListValueComponent {
    constructor() {
        this.choiceListImgLabel = "";
    }
    ngOnInit() {
        this.widgetValue = this.widget.getWidgetValue();
        if (this.widget.subType === WidgetSubType.referenceList && this.widgetValue && this.widgetValue[0]?.picture) {
            // This is just a temporary fix for the time being due to the list view picture not getting displayed for records submitted through iOS.
            if (this.widgetValue[0].picture.includes('thumb_i')) {
                this.widgetValue[0].picture = AxoUtils.removeSlashFromImageUrl('images/media/default_icons/thumb_no-image-found.png');
            }
            else {
                this.choiceListValue = AxoUtils.removeSlashFromImageUrl(this.widgetValue[0].picture);
            }
        }
        else if (this.widget.subType == WidgetSubType.imageFixedList) {
            // Set Selected Image
            //  this.setSelectedImage(this.widgetValue[0]);
        }
        if (this.choiceListValue === undefined) {
            this.choiceListValue = 'images/media/default_icons/thumb_no-image-found.png';
        }
        // Parse the choices string from widgetProperties
        const choicesArray = this.widgetProperties.choices.split(',').map(choice => choice.trim());
        // Create a map for quicker lookup (label -> full choice with hex code)
        const choicesMap = new Map(choicesArray.map(choice => {
            const { label, hexCode } = this.extractLabelAndHexCode(choice);
            return [label, hexCode ? `${label}:${hexCode}` : label]; // Use label:hexCode format if hexCode exists
        }));
        // Replace each widgetValue with the corresponding choice (if available)
        if (this.widget.subType === WidgetSubType.fixedList) {
            this.widgetValue = this.widgetValue.map(value => {
                const mappedChoice = choicesMap.get(value.trim());
                return mappedChoice || value; // Replace if found, else keep original
            });
        }
    }
    extractLabelAndHexCode(choiceLabel) {
        const parts = choiceLabel.split(':');
        const label = parts[0].trim();
        const hexCode = parts[1]?.match(/^#([A-Fa-f0-9]{6})$/) ? parts[1] : null;
        return { label, hexCode };
    }
    getContrastColor(hexCode) {
        // Remove the hash if present
        const hex = hexCode.replace('#', '');
        // Convert hex to RGB 
        const r = parseInt(hex.slice(0, 2), 16);
        const g = parseInt(hex.slice(2, 4), 16);
        const b = parseInt(hex.slice(4, 6), 16);
        const brightness = (0.299 * r + 0.587 * g + 0.114 * b);
        // If brightness is high, return black, otherwise white
        return brightness > 128 ? '#000000' : '#FFFFFF';
    }
}
FormObjectChoiceListValueComponent.ɵfac = function FormObjectChoiceListValueComponent_Factory(t) { return new (t || FormObjectChoiceListValueComponent)(); };
FormObjectChoiceListValueComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FormObjectChoiceListValueComponent, selectors: [["app-formobject-choicelist-value"]], inputs: { widget: "widget", baseUrl: "baseUrl", widgetProperties: "widgetProperties" }, decls: 3, vars: 3, consts: [[3, "ngClass", 4, "ngIf"], ["class", "choiceList-container", 3, "ngClass", 4, "ngIf"], [3, "ngClass"], [1, "row", "flex", "gap-3", "justify-start", "items-center", "choice-list"], [1, "flex", "gap-4", "items-center"], [1, "reference_list-icon"], ["alt", "...", 1, "thumbnail", 3, "src"], [1, "reference_list-text"], [1, "choice-list-title", "axo-font", "ellipsis", 3, "matTooltip"], [1, "choice-list-sub-title", "axo-font", "ellipsis", 3, "matTooltip"], ["class", "flex justify-end align-center", 4, "ngIf"], [1, "flex", "justify-end", "align-center"], [1, "choice-list-counter"], [1, "imageList-img"], [1, "imageList-text"], [1, "choice-list-title", "ellipsis", "axo-font", 3, "matTooltip"], [1, "choiceList-container", 3, "ngClass"], ["role", "list"], ["role", "listitem", "class", "axo-font", 4, "ngFor", "ngForOf"], ["role", "listitem", 1, "axo-font"], [1, "choice-list-item", 3, "ngStyle"], [4, "ngIf"]], template: function FormObjectChoiceListValueComponent_Template(rf, ctx) { if (rf & 1) {
        i0.ɵɵtemplate(0, FormObjectChoiceListValueComponent_mat_card_0_Template, 11, 10, "mat-card", 0);
        i0.ɵɵtemplate(1, FormObjectChoiceListValueComponent_mat_card_1_Template, 9, 7, "mat-card", 0);
        i0.ɵɵtemplate(2, FormObjectChoiceListValueComponent_div_2_Template, 3, 4, "div", 1);
    } if (rf & 2) {
        i0.ɵɵproperty("ngIf", (ctx.widget.subType === "reference_list" || ctx.widget.subType === "api_list") && ctx.widgetValue !== null && (ctx.widgetValue == null ? null : ctx.widgetValue.length) !== 0 && ctx.widgetValue !== undefined);
        i0.ɵɵadvance(1);
        i0.ɵɵproperty("ngIf", ctx.widget.subType === "img_fixed_list" && ctx.widgetValue !== null && (ctx.widgetValue == null ? null : ctx.widgetValue.length) !== 0 && ctx.widgetValue !== undefined);
        i0.ɵɵadvance(1);
        i0.ɵɵproperty("ngIf", ctx.widget.subType === "fixed_list" && ctx.widgetValue !== null && (ctx.widgetValue == null ? null : ctx.widgetValue.length) !== 0 && ctx.widgetValue !== undefined);
    } }, directives: [i1.NgIf, i1.NgClass, i2.MatTooltip, i3.MatList, i1.NgForOf, i3.MatListItem, i1.NgStyle], styles: ["app-formobject-choicelist-value .choice-list-counter{border-radius:100%;background-color:#6554c0;color:#fff;min-width:1rem;max-width:1rem;min-height:1rem;max-height:1rem;line-height:1rem;margin-left:.5rem;font-size:8px;text-align:center;font-weight:500}app-formobject-choicelist-value .choiceList-container{min-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:100%;line-height:56px;display:flex;align-items:center}app-formobject-choicelist-value .choiceList-container .mat-list-base{padding:0;display:flex;align-items:center}app-formobject-choicelist-value .choiceList-container .mat-list-base .mat-list-item{display:flex;align-items:center;height:3rem;line-height:3rem}app-formobject-choicelist-value .choice-list-sub-title{font-size:10px}app-formobject-choicelist-value .mat-list-item-content{font-size:.8rem;padding:4px!important}app-formobject-choicelist-value .reference_list-icon .thumbnail{width:2rem}app-formobject-choicelist-value .choice-list-item{padding:0 8px;border-radius:6px;height:60%;display:flex;align-items:center;margin-top:9px}\n"], encapsulation: 2 });
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FormObjectChoiceListValueComponent, [{
        type: Component,
        args: [{ selector: 'app-formobject-choicelist-value', encapsulation: ViewEncapsulation.None, template: "<!-- Reference and API List Value -->\n<mat-card\n  *ngIf=\"(this.widget.subType === 'reference_list' || this.widget.subType === 'api_list') && widgetValue !== null && widgetValue?.length!==0 && widgetValue !== undefined\" [ngClass]=\"{'reference-list-class': this.widget.subType === 'reference_list', 'multi-reference-list-class': widgetValue.length > 1}\">\n  <div class=\"row flex gap-3 justify-start items-center choice-list\">\n    <div class=\"flex gap-4 items-center\">\n      <div class=\"reference_list-icon\">\n        <img class=\"thumbnail\" alt=\"...\" [src]=\"baseUrl +  choiceListValue\">\n      </div>\n      <div class=\"reference_list-text\">\n        <div class=\"choice-list-title axo-font ellipsis\" [matTooltip]=\"widgetValue[0].formObjectTitle\">{{widgetValue[0].formObjectTitle}}</div>\n        <div class=\"choice-list-sub-title axo-font ellipsis\" [matTooltip]=\"widgetValue[0].formObjectSubTitle\">{{widgetValue[0].formObjectSubTitle}}</div>\n      </div>\n    </div>\n    <div *ngIf=\"widgetValue.length > 1\" class=\"flex justify-end align-center\">\n      <span class=\"choice-list-counter\">+{{widgetValue.length-1}}</span>\n    </div>\n  </div>\n</mat-card>\n<!-- Image Choice List Value-->\n<mat-card\n  *ngIf=\" this.widget.subType === 'img_fixed_list' && widgetValue !== null && widgetValue?.length!==0 && widgetValue !== undefined\" [ngClass]=\"{'imgFixed-list-class': this.widget.subType === 'img_fixed_list'}\">\n  <div class=\"row flex gap-3 justify-start items-center choice-list\">\n    <div class=\"flex gap-4 items-center\">\n      <div class=\"imageList-img\">\n        <img class=\"thumbnail\" alt=\"...\" [src]=\"baseUrl +  choiceListValue\">\n      </div>\n      <div class=\"imageList-text\">\n        <div class=\"choice-list-title ellipsis axo-font\"  [matTooltip]=\"choiceListImgLabel\">{{choiceListImgLabel}}</div>\n      </div>\n    </div>\n    <div *ngIf=\"widgetValue.length > 1\" class=\"flex justify-end align-center\">\n      <span class=\"choice-list-counter\">+{{widgetValue.length-1}}</span>\n    </div>\n  </div>\n</mat-card>\n\n<!-- Fixed Choice list Value-->\n<div *ngIf=\"this.widget.subType === 'fixed_list' && widgetValue !== null && widgetValue?.length !== 0 && widgetValue !== undefined\" \n  class=\"choiceList-container\" \n  [ngClass]=\"{'fixed-list-class': this.widget.subType === 'fixed_list'}\">\n  <mat-list role=\"list\">\n    <mat-list-item *ngFor=\"let item of widgetValue; let i = index\" role=\"listitem\" class=\"axo-font\">\n      <span [ngStyle]=\"{\n        'color': extractLabelAndHexCode(item).hexCode ? getContrastColor(extractLabelAndHexCode(item).hexCode) : '#000000',\n          'background-color': extractLabelAndHexCode(item).hexCode || '#F0F0F0',\n          'border': '1.25px solid ' + (extractLabelAndHexCode(item).hexCode || '#D3D3D3') \n        }\" class=\"choice-list-item\">\n        {{ extractLabelAndHexCode(item).label }}\n      </span>\n      <span *ngIf=\"i !== widgetValue.length - 1\">,</span>&nbsp;\n    </mat-list-item>\n  </mat-list>\n</div>\n\n", styles: ["app-formobject-choicelist-value .choice-list-counter{border-radius:100%;background-color:#6554c0;color:#fff;min-width:1rem;max-width:1rem;min-height:1rem;max-height:1rem;line-height:1rem;margin-left:.5rem;font-size:8px;text-align:center;font-weight:500}app-formobject-choicelist-value .choiceList-container{min-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:100%;line-height:56px;display:flex;align-items:center}app-formobject-choicelist-value .choiceList-container .mat-list-base{padding:0;display:flex;align-items:center}app-formobject-choicelist-value .choiceList-container .mat-list-base .mat-list-item{display:flex;align-items:center;height:3rem;line-height:3rem}app-formobject-choicelist-value .choice-list-sub-title{font-size:10px}app-formobject-choicelist-value .mat-list-item-content{font-size:.8rem;padding:4px!important}app-formobject-choicelist-value .reference_list-icon .thumbnail{width:2rem}app-formobject-choicelist-value .choice-list-item{padding:0 8px;border-radius:6px;height:60%;display:flex;align-items:center;margin-top:9px}\n"] }]
    }], function () { return []; }, { widget: [{
            type: Input
        }], baseUrl: [{
            type: Input
        }], widgetProperties: [{
            type: Input
        }] }); })();
//# sourceMappingURL=data:application/json;base64, 