import { ChangeDetectionStrategy, Component, input, model } from '@angular/core';
import { FieldBase } from './field-base';
import { CheckboxInput, DateInput, NumberInput, SelectInput, type SelectOption, TextInput, TextareaInput } from './controls';
import { SboField } from './sbo-field';

/*
 * Campos con etiqueta de un solo control: atajo de `<sbo-field>` + el control correspondiente.
 * Para filas con varios controles (input + botón, serie + número...) usar `sbo-field` directamente.
 */

@Component({
  selector: 'sbo-text-field',
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [SboField, TextInput],
  template: `
    <sbo-field [label]="label()" [dbName]="dbName()" [required]="required()" [error]="error()">
      <sbo-input
        [(value)]="value"
        [readonly]="readOnly()"
        [disabled]="disabled()"
        [required]="required()"
        [maxlength]="maxlength()"
        [placeholder]="placeholder()"
      />
    </sbo-field>
  `,
  styles: ':host { display: block; }',
})
export class TextField extends FieldBase {
  readonly value = model('');
  readonly maxlength = input<number>();
  readonly placeholder = input('');
}

@Component({
  selector: 'sbo-checkbox-field',
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [SboField, CheckboxInput],
  template: `
    <sbo-field [label]="label()" [dbName]="dbName()" [error]="error()">
      <sbo-checkbox [(value)]="value" [readonly]="readOnly()" [disabled]="disabled()" />
    </sbo-field>
  `,
  styles: ':host { display: block; }',
})
export class CheckboxField extends FieldBase {
  readonly value = model(false);
}

@Component({
  selector: 'sbo-textarea-field',
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [SboField, TextareaInput],
  template: `
    <sbo-field [label]="label()" [dbName]="dbName()" [required]="required()" [error]="error()">
      <sbo-textarea
        [(value)]="value"
        [readonly]="readOnly()"
        [disabled]="disabled()"
        [required]="required()"
        [maxlength]="maxlength()"
        [placeholder]="placeholder()"
        [rows]="rows()"
      />
    </sbo-field>
  `,
  styles: ':host { display: block; }',
})
export class TextareaField extends FieldBase {
  readonly value = model('');
  readonly maxlength = input<number>();
  readonly placeholder = input('');
  readonly rows = input(3);
}

@Component({
  selector: 'sbo-number-field',
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [SboField, NumberInput],
  template: `
    <sbo-field [label]="label()" [dbName]="dbName()" [required]="required()" [error]="error()">
      <sbo-number
        [(value)]="value"
        [decimals]="decimals()"
        [readonly]="readOnly()"
        [disabled]="disabled()"
        [required]="required()"
      />
    </sbo-field>
  `,
  styles: ':host { display: block; }',
})
export class NumberField extends FieldBase {
  readonly value = model<number | null>(null);
  readonly decimals = input<number>();
}

@Component({
  selector: 'sbo-date-field',
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [SboField, DateInput],
  template: `
    <sbo-field [label]="label()" [dbName]="dbName()" [required]="required()" [error]="error()">
      <sbo-date [(value)]="value" [readonly]="readOnly()" [disabled]="disabled()" [required]="required()" />
    </sbo-field>
  `,
  styles: ':host { display: block; }',
})
export class DateField extends FieldBase {
  readonly value = model('');
}

@Component({
  selector: 'sbo-select-field',
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [SboField, SelectInput],
  template: `
    <sbo-field [label]="label()" [dbName]="dbName()" [required]="required()" [error]="error()">
      <sbo-select
        [(value)]="value"
        [options]="options()"
        [placeholder]="placeholder()"
        [readonly]="readOnly()"
        [disabled]="disabled()"
        [required]="required()"
      />
    </sbo-field>
  `,
  styles: ':host { display: block; }',
})
export class SelectField extends FieldBase {
  readonly options = input.required<readonly SelectOption[]>();
  readonly value = model<string | number | null>(null);
  readonly placeholder = input<string>();
}