Select

import { NeuSelectComponent, NeuSelectItemDirective, NeuSelectSelectedDirective } from '@neural-ui/core/select';
import type { NeuSelectOption } from '@neural-ui/core/select';

import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { NeuSelectComponent, NeuSelectItemDirective, NeuSelectSelectedDirective } from '@neural-ui/core/select';
import { NeuSelectOption } from '@neural-ui/core/select';

const options: NeuSelectOption[] = [
  { value: 'es', label: 'España' },
  { value: 'mx', label: 'México' },
  { value: 'uk', label: 'Reino Unido', disabled: true },
];

// Con campo data — adjunta el objeto de origen sin transformación / With data field — attaches source object without transformation
const users: NeuSelectOption[] = [
  { value: '1', label: 'Ana García', data: { id: 1, role: 'admin' } },
  { value: '2', label: 'Pablo Martín', data: { id: 2, role: 'editor' } },
];

@Component({
  imports: [NeuSelectComponent, NeuSelectItemDirective, NeuSelectSelectedDirective, ReactiveFormsModule],
  template: `
    <neu-select label="País" [options]="options" [formControl]="countryCtrl" />

    <!-- Con URL State — persiste en ?country= y se restaura al recargar / With URL State — persists in ?country= and restores on reload -->
    <neu-select label="País" [options]="options" urlParam="country" />

    <!-- selectionChange: emite el NeuSelectOption completo (con data) / selectionChange: emits the full NeuSelectOption (with data) -->
    <!-- formControl sigue almacenando string; selectionChange da acceso al objeto de origen / formControl still stores a string; selectionChange gives access to the source object -->
    <neu-select
      label="Usuario"
      [options]="users"
      [formControl]="userIdCtrl"
      [clearable]="true"
      (selectionChange)="onUserSelect($event)"
    />

    <!-- Template personalizado para ítems del panel / Custom template for panel items -->
    <neu-select label="Estado" [options]="statuses" [formControl]="statusCtrl">
      <ng-template neuSelectItem let-item>
        <span style="display: inline-flex; align-items: center; gap: 8px">
          <span [style.background]="item.value === 'online' ? 'green' : 'red'"
                style="width: 8px; height: 8px; border-radius: 50%"></span>
          {{ item.label }}
        </span>
      </ng-template>
    </neu-select>

    <!-- Template personalizado para el trigger (valor seleccionado) / Custom template for the trigger (selected value) -->
    <neu-select label="Rol" [options]="roles" [formControl]="roleCtrl">
      <ng-template neuSelectSelected let-item>
        <strong>{{ item?.label }}</strong>
      </ng-template>
    </neu-select>
  `
})
export class MyComponent {
  readonly countryCtrl = new FormControl('', { nonNullable: true });
  readonly userIdCtrl = new FormControl('', { nonNullable: true }); // sigue siendo string
  readonly statusCtrl = new FormControl('online', { nonNullable: true });
  readonly roleCtrl = new FormControl('', { nonNullable: true });

  selectedUser: { id: number; role: string } | null = null;

  onUserSelect(opt: NeuSelectOption | null): void {
    // opt incluye el campo data con el objeto de origen / opt includes the data field with the source object
    this.selectedUser = opt ? (opt.data as { id: number; role: string }) : null;
  }
}