import { CommonModule } from '@angular/common';
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: [
        CommonModule,
        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"
      />
      <mat-hint *ngIf="number.hasError('min')"
        >Number should not be less than
        {{ numericConfiguration().min }}</mat-hint
      >
      <mat-hint *ngIf="number.hasError('max')"
        >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">
        @for(option of enumConfiguration().options; track
        enumConfiguration()!.options) {
        <mat-option>None</mat-option>
        <mat-option [value]="option">{{ option }}</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;
}