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-cost',
  templateUrl: './add-edit-cost.component.html',
  styleUrls: ['./add-edit-cost.component.css']
})
export class AddEditCostComponent implements OnInit{
  @ViewChild("f", { read: true }) userProfileForm: NgForm;

  model: any = {};
  mode: string;
  public breadcrumb: any;
  projectInfo: FormGroup;
  submitted = false;

  @BlockUI("projectInfo") blockUIProjectInfo: NgBlockUI;

  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: "Cost Management",
        links: [
          {
            name: "Home",
            isLink: false,
          },
          {
            name: "Cost Management",
            isLink: false,
          },
          {
            name: "Add New Cost Management",
            isLink: false,
          },
        ],
      };
    } else if (this.isEditMode()) {
      this.breadcrumb = {
        mainlabel: "Cost Management",
        links: [
          {
            name: "Home",
            isLink: false,
          },
          {
            name: "Cost Management",
            isLink: false,
          },
          {
            name: "Edit New Cost Management",
            isLink: false,
          },
        ],
      };
    } else if (this.isViewMode()) {
      this.breadcrumb = {
        mainlabel: "Cost Management",
        links: [
          {
            name: "Home",
            isLink: false,
          },
          {
            name: "Cost Management",
            isLink: false,
          },
          {
            name: "View New Cost Management",
            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"]);
  }
}
