import { Component, inject, Input } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { applyDefaultValueToControl } from '../../../shared/utils/form-defaults';
import { IonSelect, IonSelectOption } from '@ionic/angular/standalone';
import { I18nService } from '../../../services/i18n';
import { PresetService } from '../../../services/presets';
import * as i0 from "@angular/core";
import * as i1 from "@angular/forms";
/**
 * val-select-input
 *
 * A select/dropdown input integrated with Angular forms, using Ionic's select component.
 * Supports presets for reusable configurations.
 *
 * @example With preset (recommended):
 * <val-select-input preset="form-field" [props]="{
 *   control: myControl,
 *   label: 'Seleccionar',
 *   options: [{ id: '1', name: 'Opción 1' }]
 * }"></val-select-input>
 *
 * @example Static (backwards compatible):
 * <val-select-input [props]="{
 *   control: myControl,
 *   label: 'Seleccionar',
 *   options: [{ id: '1', name: 'Opción 1' }],
 *   cancelText: 'Cancelar',
 *   okText: 'Aceptar'
 * }"></val-select-input>
 *
 * @input preset: string - Name of preset to apply (e.g., 'form-field')
 * @input props: InputMetadata - Configuration for the select input (overrides preset values)
 */
export class SearchSelectorComponent {
    constructor() {
        this.i18n = inject(I18nService);
        this.presets = inject(PresetService);
        /**
         * Input configuration object. Values here override preset values.
         * @type {InputMetadata}
         * @property control - The Angular FormControl for the select input.
         * @property label - The label for the select.
         * @property options - The available options for the select.
         * @property placeholder - The placeholder text.
         * @property modalHeader - Custom header text for the modal (optional, uses label if not provided).
         * @property cancelText - Custom cancel button text (default: 'Cancelar').
         * @property okText - Custom OK button text (default: 'Aceptar').
         */
        this.props = {};
        /**
         * Resolved props after merging preset + explicit props.
         */
        this.resolvedProps = {};
    }
    ngOnInit() {
        this.resolveProps();
        this.setupComponent();
    }
    ngOnChanges(changes) {
        if (changes['preset'] || changes['props']) {
            this.resolveProps();
            this.setupComponent();
        }
    }
    /**
     * Merge preset configuration with explicit props.
     * Explicit props take precedence over preset values.
     */
    resolveProps() {
        const presetProps = this.preset ? this.presets.get('selectInput', this.preset) : {};
        this.resolvedProps = {
            ...presetProps,
            ...this.props,
        };
    }
    setupComponent() {
        if (this.resolvedProps?.withDefault || this.resolvedProps?.value) {
            applyDefaultValueToControl(this.resolvedProps);
        }
        // Set modal header from props or use label as fallback, then i18n default
        const headerText = this.resolvedProps.modalHeader || this.resolvedProps.label || this.i18n.t('selectOption');
        this.customModalOptions = {
            header: headerText,
            breakpoints: [0, 0.6],
            initialBreakpoint: 0.6,
        };
        this.customPopoverOptions = { cssClass: 'val-select-popover' };
        // Set button texts from props or use i18n defaults.
        // Fallback chain: namespace-less i18n → 'Common' namespace → hardcoded.
        // El namespace-less busca en _global; si no existe (caso typical app),
        // probamos en 'Common' que la mayoría de apps tienen poblado.
        this.cancelText = this.resolvedProps.cancelText || this.resolveI18n('cancel', 'Cancelar');
        this.okText = this.resolvedProps.okText || this.resolveI18n('ok', 'OK');
    }
    /**
     * Busca un key en `_global` primero, luego en `Common`, finalmente cae al
     * default hardcoded. Útil para textos cross-cutting (cancel/ok/close/etc.)
     * sin obligar a cada app a duplicarlos en cada namespace.
     */
    resolveI18n(key, fallback) {
        const tryGlobal = this.i18n.t(key);
        if (tryGlobal && !tryGlobal.startsWith('['))
            return tryGlobal;
        const tryCommon = this.i18n.t(key, 'Common');
        if (tryCommon && !tryCommon.startsWith('['))
            return tryCommon;
        return fallback;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SearchSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SearchSelectorComponent, isStandalone: true, selector: "val-select-input", inputs: { preset: "preset", props: "props" }, usesOnChanges: true, ngImport: i0, template: `
    <ion-select
      [formControl]="resolvedProps.control"
      [label]="resolvedProps.label"
      [interfaceOptions]="customPopoverOptions"
      [interface]="resolvedProps.selectInterface || 'popover'"
      [placeholder]="resolvedProps.placeholder"
      [cancelText]="cancelText"
      [okText]="okText"
    >
      @for (o of resolvedProps.options; track o.id) {
        <ion-select-option [value]="o.id">{{ o.name }}</ion-select-option>
      }
    </ion-select>
  `, isInline: true, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-padding: 16px;--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}ion-select{--padding-top: 0;--padding-bottom: 0;--padding-start: 0;--padding-end: 0;min-height:auto;border:.0625rem solid var(--ion-color-medium);border-radius:1.5rem;margin-top:.375rem;padding-top:.5rem!important;padding-bottom:.5rem!important;padding-inline-start:1rem!important;padding-inline-end:.625rem!important}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "errorText", "expandedIcon", "fill", "helperText", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SearchSelectorComponent, decorators: [{
            type: Component,
            args: [{ selector: 'val-select-input', standalone: true, imports: [ReactiveFormsModule, IonSelect, IonSelectOption], template: `
    <ion-select
      [formControl]="resolvedProps.control"
      [label]="resolvedProps.label"
      [interfaceOptions]="customPopoverOptions"
      [interface]="resolvedProps.selectInterface || 'popover'"
      [placeholder]="resolvedProps.placeholder"
      [cancelText]="cancelText"
      [okText]="okText"
    >
      @for (o of resolvedProps.options; track o.id) {
        <ion-select-option [value]="o.id">{{ o.name }}</ion-select-option>
      }
    </ion-select>
  `, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-padding: 16px;--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}ion-select{--padding-top: 0;--padding-bottom: 0;--padding-start: 0;--padding-end: 0;min-height:auto;border:.0625rem solid var(--ion-color-medium);border-radius:1.5rem;margin-top:.375rem;padding-top:.5rem!important;padding-bottom:.5rem!important;padding-inline-start:1rem!important;padding-inline-end:.625rem!important}\n"] }]
        }], propDecorators: { preset: [{
                type: Input
            }], props: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 