import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import {MatButton} from '@angular/material/button';
import {PatientContextService} from '../services/patient-context.service';
import {CprSearchEventService} from '../services/cpr-search-event.service';
import {UserContextService} from '../services/user-context.service';

@Component({
  selector: 'app-cpr-search',
  templateUrl: './cpr-search.component.html',
  styleUrls: ['./cpr-search.component.scss']
})
export class CprSearchComponent implements OnInit {
  @ViewChild('wrapper') wrapper?: ElementRef<HTMLElement>;
  @ViewChild('textInputField') textInputField?: ElementRef<HTMLElement>;
  @ViewChild('submitButton') submitButton?: MatButton;

  public cpr = '';

  constructor(
    private patientContext: PatientContextService,
    private userContext: UserContextService,
    private cprSearchEventService: CprSearchEventService
  ) {
  }

  ngOnInit(): void {
    this.patientContext.cpr$.subscribe(() => {
      this.cpr = '';
    });

    this.cprSearchEventService.cprSearchFabClick$.subscribe(() => {
      this.focus();
    });

    this.patientContext.patientExists$.subscribe((exists) => {
      if (!exists) {
        this.focus();
      }
    });
  }

  public async search(cpr: string): Promise<void> {
    if (cpr === '') {
      return;
    }
    await this.userContext.openPatientAndReloadPage(cpr);
  }

  public handleInputFocus(): void {
    this.wrapper?.nativeElement.classList.add('focused');
    this.cprSearchEventService.emitCprSearchFocusedEvent(true);
  }

  public handleInputBlur(): void {
    this.wrapper?.nativeElement.classList.remove('focused');
    this.cprSearchEventService.emitCprSearchFocusedEvent(false);
  }

  public handleEnterPressed(): { andSearch: (cpr: string) => void } {
    this.submitButton?.ripple.launch({centered: true});
    return {
      andSearch: (cpr) => this.search(cpr)
    };
  }

  public focus(): void {
    this.textInputField?.nativeElement.focus();
  }
}