import { Component, Input, OnInit } from "@angular/core";
import { FormControl } from "@angular/forms";
import { Subject } from "rxjs/Subject";

import { QueryService } from "../../service/query.service";
import { Defaults } from "../../constant/defaults.constant";

const invokeChangeDetection = Promise.resolve(null);

@Component({
  selector: "rss-location-select",
  templateUrl: "./location-select.component.html",
  styleUrls: ["./location-select.component.scss"],
})
export class LocationSelectComponent implements OnInit {
  @Input() config: any;
  @Input("control") mainControl: FormControl;
  @Input() readonly: Boolean;

  @Input() label: any;
  @Input() required: boolean = Defaults.REQUIRED;
  @Input() requiredError: string = Defaults.REQUIRED_ERROR_MESSAGE;

  @Input() buildingUrl: string;
  @Input() roomUrl: string;

  roomSubject: Subject<any> = new Subject();

  buildingControl: FormControl = new FormControl();
  roomControl: FormControl = new FormControl();

  buildings: any[];
  rooms: any[];

  placeholderBuilding: string = "Building";
  placeholderRooms: string = "Rooms";

  emptyResponseMsg = Defaults.EMPTY_RESPONSE_MSG;

  constructor(private queryService: QueryService) {}

  ngOnInit() {
    this.roomSubject.subscribe((rooms) => {
      this.rooms = rooms && rooms.length ? rooms : null;

      if (
        this.rooms &&
        this.mainControl.value &&
        this.mainControl.value.rooms
      ) {
        this.roomControl.setValue(
          this.mainControl.value.rooms.map((r) => r.roomId)
        );
      } else {
        this.roomControl.setValue(null);
      }
    });

    if (this.mainControl.value && this.mainControl.value.building) {
      this.buildingControl.setValue(
        this.mainControl.value.building.primaryName
      );
      this.queryService
        .query(this.roomUrl, {
          buildingId: this.mainControl.value.building.buildingId,
        })
        .subscribe((rooms) => this.roomSubject.next(rooms));
    }

    this.placeholderBuilding = this.required
      ? "* " + this.placeholderBuilding
      : this.placeholderBuilding;
    this.placeholderRooms = this.required
      ? "* " + this.placeholderRooms
      : this.placeholderRooms;

    this.buildingControl.valueChanges
      .filter((val) => val && val.length > 1)
      .switchMap((val) =>
        this.queryService.query(this.buildingUrl, { searchTerms: val })
      )
      .subscribe((buildings) => (this.buildings = buildings));

    this.roomControl.valueChanges.subscribe(() => {
      const rooms =
        this.rooms && this.roomControl.value
          ? this.rooms.filter((room) =>
              this.roomControl.value.includes(room.roomId)
            )
          : null;
      this.mainControl.setValue(
        Object.assign({}, this.mainControl.value, { rooms: rooms })
      );
    });

    this.clearValue();
  }

  ngOnChanges() {
    if (this.mainControl && !this.mainControl.value) {
      this.buildingControl.reset();
      this.roomControl.reset();
      this.buildings = undefined;
      this.rooms = undefined;
    }
  }

  clearValue() {
    this.buildingControl.valueChanges.subscribe((val) => {
      this.roomControl.reset();
      this.buildings = [];
      this.rooms = [];
    });
  }

  displayRequiredError() {
    const missingBuildingError =
      this.required &&
      this.mainControl &&
      this.mainControl.touched &&
      !this.mainControl.value["building"];

    if (missingBuildingError && this.mainControl.valid) {
      invokeChangeDetection.then(() => {
        this.mainControl.setErrors({ missingBuilding: true });
      });
    }

    return missingBuildingError;
  }

  displayRequiredErrorForRoom() {
    let missingRoomError = false;

    if (
      this.required &&
      this.mainControl &&
      this.mainControl.touched &&
      this.mainControl.value &&
      this.mainControl.value["building"]
    ) {
      missingRoomError =
        !this.mainControl.value["rooms"] ||
        !this.mainControl.value["rooms"].length;
    }

    if (missingRoomError && this.mainControl.valid) {
      invokeChangeDetection.then(() => {
        this.mainControl.setErrors({ missingRoom: true });
      });
    }

    return missingRoomError;
  }

  onSelectOption(building) {
    this.buildingControl.patchValue(building.primaryName);
    this.mainControl.setValue(
      Object.assign({}, this.mainControl.value, { building, rooms: [] })
    );

    if (
      this.mainControl.value &&
      this.mainControl.value.building &&
      this.mainControl.value.building.buildingId
    ) {
      this.queryService
        .query(this.roomUrl, {
          buildingId: this.mainControl.value.building.buildingId,
        })
        .subscribe((rooms) => this.roomSubject.next(rooms));
    }
  }
}