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

@Component({
  selector: "app-add-edit-device",
  templateUrl: "./add-edit-device.component.html",
  styleUrls: ["./add-edit-device.component.css"],
})
export class AddEditDeviceComponent implements OnInit{
  @ViewChild("f", { read: true }) userProfileForm: NgForm;

  model: any = {};
  mode: string;

  @BlockUI("projectInfo") blockUIProjectInfo: NgBlockUI;
  @BlockUI("userProfile") blockUIUserProfile: NgBlockUI;

  options = {
    minimize: true,
    reload: true,
    expand: true,
    close: true,
  };
  public breadcrumb: any;

  projectInfo: FormGroup;

  submitted = false;

  interestedIn = [
    "design",
    "development",
    "illustration",
    "branding",
    "video",
    "design",
    "development",
    "illustration",
    "branding",
    "video",
  ];
  budget = [
    "less than 5000$",
    "5000$ - 10000$",
    "10000$ - 20000$",
    "more than 20000$",
  ];
  priority = ["Low", "Medium", "High"];
  status = ["Not Started", "Started", "Fixed"];

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

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

    this.projectInfo = this.formBuilder.group({
      firstName: ["", Validators.required],
      lastName: ["", Validators.required],
      email: ["", [Validators.required, Validators.email]],
      phone: ["", Validators.required],
      company: ["", Validators.required],
      interestedIn: ["", Validators.required],
      budget: ["", Validators.required],
      selectFile: [, Validators.required],
      aboutProject: ["", Validators.required],
    });
  }

  setBreadcrumb() {
    if (this.isAddMode()) {
      this.breadcrumb = {
        mainlabel: "Device",
        links: [
          {
            name: "Home",
            isLink: false,
          },
          {
            name: "Device",
            isLink: false,
          },
          {
            name: "Add new device",
            isLink: false,
          },
        ],
      };
    } else if (this.isEditMode()) {
      this.breadcrumb = {
        mainlabel: "Device",
        links: [
          {
            name: "Home",
            isLink: false,
          },
          {
            name: "Device",
            isLink: false,
          },
          {
            name: "Edit new device",
            isLink: false,
          },
        ],
      };
    } else if (this.isViewMode()) {
      this.breadcrumb = {
        mainlabel: "Device",
        links: [
          {
            name: "Home",
            isLink: false,
          },
          {
            name: "Device",
            isLink: false,
          },
          {
            name: "View new device",
            isLink: false,
          },
        ],
      };
    }
  }

  isEditMode() {
    return this.mode === "edit";
  }

  isViewMode() {
    return this.mode === "view";
  }

  isAddMode() {
    return this.mode === "add";
  }

  get f() {
    return this.projectInfo.controls;
  }

  onProjectInfoSubmit() {
    this.submitted = true;
    if (this.projectInfo.invalid) {
      return;
    }
  }

  keyPress(event: any) {
    const pattern = /[0-9\+\-\ ]/;
    const inputChar = String.fromCharCode(event.charCode);
    if (event.keyCode !== 8 && !pattern.test(inputChar)) {
      event.preventDefault();
    }
  }

  addData() {}

  cancel() {
    this.router.navigate(["/device"]);
  }
}