import { Component, ElementRef, HostListener, QueryList, ViewChildren } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
import { Router, ActivatedRoute, RouterModule } from '@angular/router';
import { Title } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
import { Authentication } from 'app/services/Authentication';
import { Company } from 'app/models/Company';

@Component({
  selector: 'main-company-connect',
  templateUrl: './companyconnect.component.html',
  styleUrls: [ './companyconnect.component.css' ],
  imports: [ FormsModule, CommonModule, RouterModule ]
})
export class CompanyConnectComponent {

  @ViewChildren('step') formSteps!: QueryList<ElementRef<HTMLDivElement>>;
  currentStep: number = 0;

  public newListing: Company = new Company();
  public ErrorMsg: string = "";

  constructor( private http: HttpClient, private router: Router, private route: ActivatedRoute, private title: Title, public auth: Authentication ) {
    this.title.setTitle("Company - Connect | BoredCareers");
  };

  ngAfterViewInit(){
    this.formSteps.changes.subscribe(() => {
      this.updateUI(0);
    });
    this.updateUI(0);
  }

  @HostListener('window:keydown', ['$event'])
  handleGlobalKeyDown(event: KeyboardEvent){
    if (event.key === 'Tab'){
      event.preventDefault();
    }
  }

  updateUI(subItem: number){
    this.formSteps.forEach((step: ElementRef<HTMLDivElement>, i: number) => {
      if (i === this.currentStep) {
        step.nativeElement.style.left = '0%';
      } else if (i < this.currentStep) {
        step.nativeElement.style.left = '-100%';
      } else {
        step.nativeElement.style.left = '100%';
      }
    });
    setTimeout(() => {
      (this.formSteps.get(this.currentStep)?.nativeElement.querySelectorAll('.input-field')[subItem] as HTMLElement)?.focus();
    }, 500);
  }

  nextStep(){
    this.currentStep += 1;
    this.updateUI(0);
  }

  prevStep(){
    this.currentStep -= 1;
    this.updateUI(0);
  }

  isNullOrEmpty(str: string | null | undefined): boolean {
    return !str || str.trim().length === 0;
  }

  focusFrame(frameNum: number, subItem: number): void {
    this.currentStep = frameNum;
    this.updateUI(subItem);
  }

  PostNewCompany(company: Company){

    if (this.isNullOrEmpty(company.name)){
      this.focusFrame(0, 0);
      return;
    }

    if (this.isNullOrEmpty(company.websiteURL)){
      this.focusFrame(1, 0);
      return;
    }

    if (this.isNullOrEmpty(company.logoURL)){
      this.focusFrame(2, 0);
      return;
    }

    if (this.isNullOrEmpty(company.email)){
      this.focusFrame(3, 0);
      return;
    }

    if (this.isNullOrEmpty(company.phone)){
      this.focusFrame(3, 1);
      return;
    }

    if (this.isNullOrEmpty(company.city)){
      this.focusFrame(4, 0);
      return;
    }

    if (this.isNullOrEmpty(company.country)){
      this.focusFrame(4, 1);
      return;
    }

    if (this.isNullOrEmpty(company.stateOrRegion)){
      this.focusFrame(4, 2);
      return;
    }

    if (this.isNullOrEmpty(company.postalCode)){
      this.focusFrame(4, 3);
      return;
    }

    if (this.isNullOrEmpty(company.description)){
      this.focusFrame(5, 0);
      return;
    }

    this.http.post("api/company?newCompany=true", company).subscribe({
      next: data => {
        this.router.navigate([""]);
      },
      error: err => {
        this.ErrorMsg = err.error;
      }
    });
  }

}