import {Component, EventEmitter, Input, OnInit, Output} from "@angular/core";
import {MatFormField, MatInput} from "@angular/material/input";
import {FormControl, ReactiveFormsModule} from "@angular/forms";
import {MatAutocompleteModule, MatAutocompleteSelectedEvent} from "@angular/material/autocomplete";
import {AsyncPipe} from "@angular/common";
import {DataSpinnerComponent} from "@component/data-spinner/data-spinner.component";
import {map, Observable, startWith} from "rxjs";
import {ProfessorResponse} from "@model/professorResponse";

@Component({
  selector: 'app-schedule-tabs-professor',
  standalone: true,
  imports: [
    MatAutocompleteModule,
    MatFormField,
    DataSpinnerComponent,
    AsyncPipe,
    ReactiveFormsModule,
    MatInput
  ],
  templateUrl: './schedule-tabs-professor.component.html',
  styleUrl: './schedule-tabs-professor.component.css'
})
export class ScheduleTabsProfessorComponent implements OnInit {
  protected teacherControl = new FormControl();
  protected filteredTeachers!: Observable<ProfessorResponse[]>;

  @Input() teachers: ProfessorResponse[] = [];
  @Output() professorSelected = new EventEmitter<number>();

  ngOnInit(): void {
    this.filteredTeachers = this.teacherControl.valueChanges.pipe(
      startWith(''),
      map(value => this._filterTeachers(value))
    );
  }

  private _filterTeachers(value: string | number): ProfessorResponse[] {
    if (typeof value === 'string') {
      if (value === '') return [];
      const filterValue = value.toLowerCase();
      return this.teachers.filter(teacher => teacher.name.toLowerCase().includes(filterValue));
    } else {
      const selectedTeacher = this.teachers.find(teacher => teacher.id === value);
      return selectedTeacher ? [selectedTeacher] : [];
    }
  }

  protected onOptionSelected(event: MatAutocompleteSelectedEvent) {
    const selectedOption = this.teachers.find(teacher => teacher.id === event.option.value);
    if (selectedOption) {
      this.teacherControl.setValue(selectedOption.name);
      this.professorSelected.emit(selectedOption.id);
    }
  }
}