import { provideHttpClient } from '@angular/common/http';
import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing';
import { Component, signal } from '@angular/core';
import { type ComponentFixture, TestBed } from '@angular/core/testing';
import { beforeEach, describe, expect, it } from 'vitest';
import { ACCOUNT_CODES, AccountCodesService } from '../../core/sl/account-codes';
import { ACCOUNT_LOOKUP } from '../../features/documents/dimension-lookups';
import { LookupField } from './lookup-field';

@Component({
  imports: [LookupField],
  template: `<sbo-lookup-field label="Cuenta" resolveOnLeave [lookup]="lookup" [(value)]="value" />`,
})
class Host {
  lookup = ACCOUNT_LOOKUP;
  value = signal('');
}

describe('LookupField: lista con texto propio para el código (la cuenta)', () => {
  let fixture: ComponentFixture<Host>;
  let ctrl: HttpTestingController;
  const input = () => (fixture.nativeElement as HTMLElement).querySelector('input') as HTMLInputElement;
  const tick = async () => {
    fixture.detectChanges();
    await new Promise((r) => setTimeout(r));
    fixture.detectChanges();
  };

  beforeEach(async () => {
    await TestBed.configureTestingModule({ imports: [Host], providers: [provideHttpClient(), provideHttpClientTesting()] }).compileComponents();
    ctrl = TestBed.inject(HttpTestingController);
    TestBed.inject(AccountCodesService);
    fixture = TestBed.createComponent(Host);
    await tick();
  });

  it('muestra el código con formato en lugar del interno que está guardado', async () => {
    ACCOUNT_CODES.remember({ Code: '_SYS77', FormatCode: '1212111010', Name: 'Cuentas por cobrar' });
    fixture.componentInstance.value.set('_SYS77');
    await tick();
    expect(input().value).toBe('1212111010');
    expect(fixture.componentInstance.value()).toBe('_SYS77'); // lo guardado sigue siendo el interno
  });

  it('pide el código con formato de un valor que llega sin conocerse', async () => {
    fixture.componentInstance.value.set('_SYS88');
    await tick();
    const req = ctrl.expectOne((r) => r.url === '/api/sl/ChartOfAccounts' && r.params.get('$filter') === "Code eq '_SYS88'");
    req.flush({ value: [{ Code: '_SYS88', FormatCode: '4012111010', Name: 'Proveedores' }] });
    await tick();
    expect(input().value).toBe('4012111010');
  });

  it('escribir el código con formato guarda el interno al salir del campo', async () => {
    input().value = '1071111010';
    input().dispatchEvent(new Event('input'));
    await tick();
    input().dispatchEvent(new Event('focusout', { bubbles: true }));
    await tick();
    const req = ctrl.expectOne((r) => r.url === '/api/sl/ChartOfAccounts' && (r.params.get('$filter') ?? '').includes("FormatCode eq '1071111010'"));
    req.flush({ value: [{ Code: '_SYS99', FormatCode: '1071111010', Name: 'Banco' }] });
    await tick();
    expect(fixture.componentInstance.value()).toBe('_SYS99');
    expect(input().value).toBe('1071111010');
  });
});