import { Component, OnInit } from "@angular/core";
import { FormArray, FormBuilder, FormGroup, Validators } from "@angular/forms";
import { ActivatedRoute, Router } from "@angular/router";
import { BlockUI, NgBlockUI } from "ng-block-ui";

@Component({
  selector: "app-add-new-building-room",
  templateUrl: "./add-new-building-room.component.html",
  styleUrls: ["./add-new-building-room.component.css"],
})
export class AddNewBuildingRoomComponent implements OnInit {
  public breadcrumb: any;
  mode: string;
  numberTab: FormGroup;
  stepOneForm: FormGroup;
  stepTwoForm: FormGroup;
  stepThreeForm: FormGroup;
  stepFourForm: FormGroup;
  isStepFourReached = false;

  repeatForm: FormGroup;
  public repeatList: FormArray;

  get repeatFormGroup() {
    return this.repeatForm.get("repeatArray") as FormArray;
  }

  @BlockUI("numberTabs") blockUINumberTabs: NgBlockUI;
  @BlockUI("iconTabs") blockUIIconTabs: NgBlockUI;

  countries = ["Amsterdam", "Berlin", "Frankfurt"];
  eventType = ["Banquet", "Fund Raiser", "Dinner Party", "Wedding"];
  eventLocation = ["Amsterdam", "Berlin", "Frankfurt"];
  eventStatus = ["Planning", "In Progress", "Finished"];
  requirements1 = [
    { id: 1, name: "Staffing" },
    { id: 2, name: "Catering" },
  ];
  agendaItems1 = [
    { id: 1, name: "1st item", idName: "item1" },
    { id: 2, name: "2st item", idName: "item2" },
    { id: 3, name: "3st item", idName: "item3" },
    { id: 4, name: "4st item", idName: "item4" },
    { id: 5, name: "5st item", idName: "item5" },
  ];

  constructor(
    private formBuilder: FormBuilder,
    private router: Router,
    private route: ActivatedRoute
  ) {}

  ngOnInit() {
    this.numberTab = this.formBuilder.group({
      buildName: ["", Validators.required],
      phone: ["", Validators.required],
      phoneNumber: ["", [Validators.required]],
      email: ["", [Validators.required, Validators.email]],
      address: ["", [Validators.required]],
      owned: ["", [Validators.required]],
    });

    this.repeatForm = this.formBuilder.group({
      repeatArray: this.formBuilder.array([this.createRepeat()]),
    });

    this.repeatList = this.repeatForm.get("repeatArray") as FormArray;

    this.route.data.subscribe((data) => {
      this.mode = data.mode;
    });
  }

  createRepeat(): FormGroup {
    return this.formBuilder.group({
      roomName: ["", Validators.required],
      room: ["", Validators.required],
      floor: ["", Validators.required],
      status: ["", Validators.required],
    });
  }

  addRepeat() {
    this.repeatList.push(this.createRepeat());
  }

  removeRepeat(index) {
    this.repeatList.removeAt(index);
  }

  getRepeatFormGroup(index): FormGroup {
    const formGroup = this.repeatList.controls[index] as FormGroup;
    return formGroup;
  }

  public previousFourthStep() {
    this.isStepFourReached = true;
  }
  get f() {
    return this.stepOneForm.controls;
  }
  get i() {
    return this.stepTwoForm.controls;
  }
  get j() {
    return this.stepThreeForm.controls;
  }
  get k() {
    return this.stepFourForm.controls;
  }

  submit() {
    window.alert("Form submitted.");
  }

  cancel() {
    if (this.mode === "room") {
      this.router.navigate(["/monitoring/monitoring-room"]);
    } else {
      this.router.navigate(["/monitoring"]);
    }
    
  }

  reloadNumberTabs() {
    this.blockUINumberTabs.start("Loading..");

    setTimeout(() => {
      this.blockUINumberTabs.stop();
    }, 2500);
  }

  reloadIconTabs() {
    this.blockUIIconTabs.start("Loading..");

    setTimeout(() => {
      this.blockUIIconTabs.stop();
    }, 2500);
  }
}
