import { Component, Inject, OnInit } from '@angular/core';
import {
  MAT_DIALOG_DATA,
  MatDialogRef,
  MatDialog,
} from '@angular/material/dialog';
import {
  FormControl,
  FormGroup,
  Validators,
} from '@angular/forms';
import { ToastrService } from 'ngx-toastr';
import { DataService } from 'src/app/common/services/data.service';
import { GoalPlanAdd } from '../add-goal-plan/goal-plan-add.model';
import { FieldSpaceValidator } from 'src/app/common/validators/space-validator';
import { GoalPlanInventoryService } from '../goal-plan-inventory.service';
// import { AddGoalCategoryComponent } from 'src/app/modules/settings/goal-category/add-goal-category/add-goal-category.component';

@Component({
  selector: 'app-edit-goal-plan',
  templateUrl: './edit-goal-plan.component.html',
  styleUrls: ['./edit-goal-plan.component.css'],
})
export class EditGoalPlanComponent implements OnInit {
  data: any = new GoalPlanAdd();
  updatedDate = new Date();
  userEmail: string;
  activeData = [];
  goalCategoryData: any;
  templateData: any;
  startDate: any;
  dueDate: any;
  selectedCategoriesId = [];
  isEdited = false;
  isDisabled = false;
  minDate: any;
  maxDate: any;
  visibilityOptions = [];
  statusList = [];
  categoriesList = [];

  form = new FormGroup({
    GoalName: new FormControl(),
    Metric: new FormControl(),
  });
  constructor(
    private goalPlanInventoryService: GoalPlanInventoryService,
    public dialogRef: MatDialogRef<EditGoalPlanComponent>,
    private toastr: ToastrService,
    private dataService: DataService,
    private dialog: MatDialog,
    @Inject(MAT_DIALOG_DATA) public value: any
  ) {
    this.data = value;
  }

  ngOnInit(): void {
    this.dataService.email.subscribe((email) => {
      this.userEmail = email;
    });
    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, [
        Validators.maxLength(750),
        Validators.required,
        FieldSpaceValidator.spaceValidator,
      ]),
      VisibilityId: new FormControl(this.data.VisibilityId || 2),
      CategoryId: new FormControl(
        JSON.parse('[' + this.data.CategoryId + ']'),
        Validators.required
      ),
      Metric: new FormControl(this.data.Metric, [
        Validators.required,
        Validators.maxLength(500),
      ]),
      StartDate: new FormControl(
        new Date(this.data.StartDate),
        Validators.required
      ),
      DueDate: new FormControl(
        new Date(this.data.DueDate),
        Validators.required
      ),
      PercentageCompleted: new FormControl(
        this.data.PercentageCompleted,
        this.validatePercNumber
      ),
      StatusId: new FormControl(this.data.StatusId || 6),
      UpdatedDate: new FormControl(this.updatedDate),
      UpdatedBy: new FormControl(this.userEmail),
    });
    this.getGoalCategoryActiveData();
  }

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

  getCategoriesId() {
    this.goalPlanInventoryService.getGoalPlanTemplateDataById(this.data.GoalPlanTemplateId).subscribe((data) => {
      this.templateData = data;
      this.templateData.forEach((t) => {
        const categoryIds = JSON.parse('[' + t.CategoryIds + ']');
        for (const row of categoryIds) {
          this.categoriesList.push(row);
        }
      });
      this.getTemplateActiveCategories(this.categoriesList);
    });
  }

  getTemplateActiveCategories(categoriesList) {
    const filteredArray = [...new Set(categoriesList)];
    const array = [];
    for (const a of filteredArray) {
      for (const goal of this.goalCategoryData) {
        if (a === goal.Id) {
          array.push(goal);
          this.activeData = array;
        }
      }
    }
  }

  validatePercNumber(c: FormControl) {
    return c.value >= 0 && c.value <= 100 && c.value !== null && c.value !== '.'
      ? null
      : { valid: false };
  }

  onlyNumberKey(event) {
    const charCode = event.query ? event.query : event.keyCode;
    if (charCode !== 46 && charCode > 31
      && (charCode < 48 || charCode > 57)) {
      return false;
    }
    else {
      return true;
    }
  }
  fixDecimals($event){
    $event.target.value = parseFloat($event.target.value).toFixed(2);
  }

  onStartDateChange(value: Date): void {
    this.minDate = new Date(value);
  }
  onDueDateChange(value: Date): void {
    this.maxDate = value;
  }

  // addNewCategory() {
  //   const dialogRef = this.dialog.open(AddGoalCategoryComponent, {
  //     width: '50%',
  //     height: '360px',
  //     disableClose: true,
  //     data: { param: 'goal-plan-template' },
  //   });
  //   dialogRef.afterClosed().subscribe((result) => {
  //     if (result) {
  //       let id = result.Id;
  //       this.activeData.push(result);
  //       const index = this.activeData.findIndex((x) => x.Id === id);
  //       id = this.activeData[index].Id;
  //       this.selectedCategoriesId = this.selectedCategoriesId.concat(id);
  //       this.data.categoryIds = this.selectedCategoriesId;
  //       this.isEdited = true;
  //       this.getGoalCategoryActiveData();
  //     }
  //   });
  // }

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

  close() {
    this.dialogRef.close();
  }
  update(form) {
    form.GoalName = form.GoalName.trim();
    form.PercentageCompleted = Math.round(100 * form.PercentageCompleted) / 100;
    // stop here if form is invalid
    form.CategoryId = form.CategoryId.toString();

    // stop here if form is invalid
    if (this.form.invalid) {
      return;
    } else {
      this.isDisabled = true;
      this.goalPlanInventoryService
        .updateGoalPlanTemplate(form, this.data.Id)
        .subscribe((data) => {
          this.dialogRef.close(data);
          this.toastr.success('Goal Plan Updated Successfully');
        });
    }
  }
}