import {
  ChangeDetectionStrategy,
  Component,
  computed,
  input,
  model,
} from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatSelectModule } from '@angular/material/select';
import {
  EnumMessage,
  ListMessage,
  MapMessage,
  MessageConfiguration,
  MessageTypeEnum,
  NumericMessage,
  ObjectMessage,
  StringMessage,
} from '../../model/proto-message.model';
import { ListFieldComponent } from '../list-field/list-field.component';
import { MapFieldComponent } from '../map-field/map-field.component';
import { ObjectFieldComponent } from '../object-field/object-field.component';
import { StringFieldComponent } from '../string-field/string-field.component';

@Component({
  selector: 'app-proto-field',
  imports: [
    FormsModule,
    ListFieldComponent,
    MapFieldComponent,
    MatCheckboxModule,
    MatFormFieldModule,
    MatSelectModule,
    MatInputModule,
    ObjectFieldComponent,
    StringFieldComponent,
  ],
  template: `@switch (configuration().type) { @case (MessageTypeEnum.String) {
    <app-string-field
      [label]="label()"
      [configuration]="stringConfiguration()"
      [(value)]="value"
    ></app-string-field>
    } @case (MessageTypeEnum.Numeric) {
    <mat-form-field>
      <mat-label>{{ label() }}</mat-label>
      <input
        #number="ngModel"
        matInput
        type="number"
        [(ngModel)]="value"
        [min]="numericConfiguration().min ?? null"
        [max]="numericConfiguration().max ?? null"
      />
      @if(number.hasError('min')) {
      <mat-hint
        >Number should not be less than
        {{ numericConfiguration().min }}</mat-hint
      >
      } @if(number.hasError('max')) {
      <mat-hint
        >Number should not greater than
        {{ numericConfiguration().max }}</mat-hint
      >
      }
    </mat-form-field>
    } @case (MessageTypeEnum.Boolean) {
    <p>
      <mat-checkbox [(ngModel)]="value">{{ label() }}</mat-checkbox>
    </p>
    } @case(MessageTypeEnum.Enum) {
    <mat-form-field>
      <mat-label>{{ label() }}</mat-label>
      <mat-select [(value)]="value">
        <mat-option>None</mat-option>
        @for(option of enumConfiguration().options; track option) {
        <mat-option [value]="option">{{
          option.friendlyName || option.protoName
        }}</mat-option>
        }
      </mat-select>
    </mat-form-field>
    } @case (MessageTypeEnum.List) {
    <app-list-field
      [label]="label()"
      [configuration]="listConfiguration()"
      [(values)]="value"
    ></app-list-field>
    } @case (MessageTypeEnum.Map){
    <app-map-field
      [label]="label()"
      [(values)]="value"
      [configuration]="mapConfiguration()"
    ></app-map-field>
    } @case (MessageTypeEnum.Object) {
    <app-object-field
      [label]="label()"
      [(values)]="value"
      [configuration]="objectConfiguration()"
    ></app-object-field>
    } @case (MessageTypeEnum.Raw) {}}`,
  styleUrl: './proto-field.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ProtoFieldComponent {
  label = input<string>();
  configuration = input.required<MessageConfiguration>();
  value = model<any>();

  protected stringConfiguration = computed(
    () => this.configuration() as StringMessage
  );

  protected numericConfiguration = computed(
    () => this.configuration() as NumericMessage
  );

  protected enumConfiguration = computed(
    () => this.configuration() as EnumMessage
  );

  protected listConfiguration = computed(
    () => this.configuration() as ListMessage
  );

  protected mapConfiguration = computed(
    () => this.configuration() as MapMessage
  );

  protected objectConfiguration = computed(
    () => this.configuration() as ObjectMessage
  );

  protected readonly MessageTypeEnum = MessageTypeEnum;
}