import { Component, Inject, OnInit } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { FormControl, FormGroup } from '@angular/forms';
import { GoalPlanAdd } from '../add-goal-plan/goal-plan-add.model';
import { GoalPlanInventoryService } from '../goal-plan-inventory.service';

@Component({
  selector: 'app-view-goal-plan',
  templateUrl: './view-goal-plan.component.html',
  styleUrls: ['./view-goal-plan.component.css'],
})
export class ViewGoalPlanComponent implements OnInit {
  data: any = new GoalPlanAdd();
  activeData: any;
  selected: any;
  startDate: any;
  dueDate: any;
  selectedCategoriesId = [];
  visibilityOptions = [];
  statusList = [];
  form = new FormGroup({
    GoalName: new FormControl(),
    Metric: new FormControl(),
  });

  constructor(
    private goalPlanInventoryService: GoalPlanInventoryService,
    public dialogRef: MatDialogRef<ViewGoalPlanComponent>,
    @Inject(MAT_DIALOG_DATA) public value: any
  ) {
    this.data = value;
  }

  ngOnInit(): void {
    this.visibilityOptions = [
      { name: 'Private', value: 1 },
      { name: 'Public', value: 2 },
    ];
    this.statusList = [
      { name: 'On Track', value: 1 },
      { name: 'Behind', value: 2 },
      { name: 'Completed', value: 3 },
      { name: 'Postponed', value: 4 },
      { name: 'Cancelled', value: 5 },
      { name: 'Not Started', value: 6 },
    ];
    this.form = new FormGroup({
      GoalName: new FormControl(this.data.GoalName, []),
      VisibilityId: new FormControl(this.data.VisibilityId),
      CategoryId: new FormControl(JSON.parse('[' + this.data.CategoryId + ']')),
      Metric: new FormControl(this.data.Metric, []),
      StartDate: new FormControl(new Date(this.data.StartDate)),
      DueDate: new FormControl(new Date(this.data.DueDate)),
      PercentageCompleted: new FormControl(this.data.PercentageCompleted),
      StatusId: new FormControl(this.data.StatusId),
    });
    this.getGoalCategoryActiveData();
  }

  getGoalCategoryActiveData() {
    this.goalPlanInventoryService
      .getGoalCategoryActiveData()
      .subscribe((res) => {
        this.activeData = res;
        // const array = JSON.parse('[' + this.data.CategoryId + ']');
        this.selectedCategoriesId = this.data.CategoryId;
      });
  }

  // convenience getter for easy access to form fields
  get f() {
    return this.form.controls;
  }

  close() {
    this.dialogRef.close();
  }
}