import { Component, inject } from '@angular/core';
import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MAT_DIALOG_DATA, MatDialog, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
import { ApiService } from '../../../shared/api.service';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { map, Observable, startWith } from 'rxjs';
import { MatSelectModule } from '@angular/material/select';
import { HotToastService } from '@ngxpert/hot-toast';
import { SelectKeyCylinderComponent } from './select-key-cylinder/select-key-cylinder.component';
import { MatIconModule } from '@angular/material/icon';
import {MatCheckboxModule} from '@angular/material/checkbox';
import { IKey } from '../../../model/interface/key.interface';
import { ICylinder } from '../../../model/interface/cylinder.interface';
import { MatTooltipModule } from '@angular/material/tooltip';

@Component({
    selector: 'app-create',
    imports: [MatDialogModule, MatButtonModule, ReactiveFormsModule, FormsModule, MatFormFieldModule, MatInputModule, MatSelectModule, MatDialogModule, MatIconModule, MatCheckboxModule, MatTooltipModule],
    templateUrl: './create.component.html',
    styleUrl: './create.component.scss'
})
export class CreateKeyComponent {

  private api: ApiService = inject(ApiService);
  private toast: HotToastService = inject(HotToastService);
  readonly dialogRef = inject(MatDialogRef<CreateKeyComponent>);
  private readonly dialog = inject(MatDialog);
  readonly key = inject<IKey>(MAT_DIALOG_DATA);

  createForm = new FormGroup({
    name: new FormControl<string | null>(null, Validators.required),
    nr: new FormControl<number | null>(null, Validators.required),
    digital: new FormControl(false, Validators.required),
    cylinder: new FormControl<any>(null, Validators.required),
  })

  cylinders: any[] = [];
  filteredCylinders!: Observable<any[]>;

  ngOnInit(): void {
    this.doSetup();
  }

  async doSetup() {
    this.api.cylinders.subscribe({
      next: data => {
        this.cylinders = data;
        this.createForm.controls.cylinder.patchValue(null);
      }
    })
    await this.loadCylinders();

    this.filteredCylinders = this.createForm.controls.cylinder.valueChanges.pipe(
      startWith(''),
      map(value => this._filter(value || '')),
    );

    if (this.key) {
      this.setEditKey(this.key)
    }
  }

  private _filter(value: string): string[] {
    const filterValue = value.toLowerCase();

    return this.cylinders.filter(option => option.name.toLowerCase().includes(filterValue));
  }

  loadCylinders() {
    return this.api.refreshCylinders();
    
  }

  save() {
    this.api.createKey(this.createForm.value as any)
    .pipe(
      this.toast.observe({
        error: 'Konnte nicht angelegt werden...',
        loading: 'Speichern...',
        success: 'Gespeichert'
      })
    )
    .subscribe({
      next: key => {
        this.createForm.reset();
        this.dialogRef.close(key);
      }
    })
  }

  openSelectMultipleCylinders() {
    this.dialog.open(SelectKeyCylinderComponent, {
      maxHeight: "calc(100vh - 48px)",
      maxWidth: "calc(100vw - 48px)",
      width: "800px",
      minWidth: "300px",
      height: "70vh",
      disableClose: true,
      data: this.cylinders
    }).afterClosed().subscribe({
      next: c => {
        if (c) {
          this.createForm.controls.cylinder.patchValue(c);
        }
      }
    })
  }

  async setEditKey(key: IKey) {
    this.createForm.patchValue(key as any);
    this.createForm.controls.cylinder.patchValue(this.cylinders.filter(c => key.cylinder.some(v => v.id == c.id)));
  }
}