import { Component, OnInit, Inject } from '@angular/core';
import {
  MatDialogRef,
  MatDialog,
  MAT_DIALOG_DATA,
} 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 './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';
import { AddGoalWizardComponent } from '../add-goal-wizard/add-goal-wizard.component';

@Component({
  selector: 'app-add-goal-plan',
  templateUrl: './add-goal-plan.component.html',
  styleUrls: ['./add-goal-plan.component.css'],
})
export class AddGoalPlanComponent implements OnInit {
  data: any = new GoalPlanAdd();
  form: FormGroup;
  createdDate = new Date();
  userEmail: string;
  activeData = [];
  goalCategoryData: any;
  templateData: any;
  startDate: any;
  dueDate: any;
  selectedIds = [];
  isDisabled = false;
  minDate = new Date();
  maxDate: any;
  createNewGoal = false;
  selectedVisibility: any;
  selectedStatus: any;
  statusList = [];
  templateId: number;
  visibilityOptions = [];
  categoriesList = [];
  isEnableSmartWizard = false;

  constructor(
    private goalPlanInventoryService: GoalPlanInventoryService,
    private toastr: ToastrService,
    public dialogRef: MatDialogRef<AddGoalPlanComponent>,
    private dataService: DataService,
    private dialog: MatDialog,
    @Inject(MAT_DIALOG_DATA) public value: any
  ) {
    this.templateId = value.id;
    this.isEnableSmartWizard = value.isEnableSmartWizard;
  }

  ngOnInit(): void {
    this.visibilityOptions = [
      { name: 'Private', value: 1 },
      { name: 'Public', value: 2 },
    ];
    this.selectedVisibility = this.visibilityOptions[0].name;
    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.selectedStatus = this.statusList[0].name;
    this.dataService.email.subscribe((email) => {
      this.userEmail = email;
    });
    this.form = new FormGroup({
      goalPlanTemplateId: new FormControl(this.templateId),
      GoalName: new FormControl('', [
        Validators.maxLength(750),
        Validators.required,
        FieldSpaceValidator.spaceValidator,
      ]),
      VisibilityId: new FormControl(2),
      CategoryId: new FormControl('', Validators.required),
      Metric: new FormControl('', [
        Validators.required,
        Validators.maxLength(500),
      ]),
      StartDate: new FormControl('', Validators.required),
      DueDate: new FormControl('', Validators.required),
      PercentageCompleted: new FormControl('', this.validatePercNumber,
      ),
      StatusId: new FormControl(6),
      IsRelevant: new FormControl(true),
      IsAttainable: new FormControl(true),
      CreatedBy: new FormControl(this.userEmail),
      CreatedDate: new FormControl(this.createdDate),
    });
    this.getGoalCategoryActiveData();
  }
  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){
    return $event.target.value = parseFloat($event.target.value).toFixed(2);
  }

  createNew() {
    this.createNewGoal = true;
  }
  back(value) {
    this.createNewGoal = false;
    value.reset();
  }
  onStartDateChange(value: Date): void {
    this.minDate = new Date(value);
  }
  onDueDateChange(value: Date): void {
    this.maxDate = value;
  }

  addGoalWizard(id: number) {
    const dialogRef = this.dialog.open(AddGoalWizardComponent, {
      width: '70%',
      position: { top: '20px' },
      disableClose: true,
      data: this.templateId,
    });
    dialogRef.afterClosed().subscribe((result) => {
      if (result) {
      }
    });
    this.dialogRef.close();
  }

  getGoalCategoryActiveData() {
    this.goalPlanInventoryService
      .getGoalCategoryActiveData()
      .subscribe((res) => {
        this.goalCategoryData = res;
        this.getCategoriesId();
        this.getTemplateActiveCategories(this.categoriesList);
      });
  }

  getCategoriesId() {
    this.goalPlanInventoryService
      .getGoalPlanTemplateDataById(this.templateId)
      .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;
        }
      }
    }
  }

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

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

  // addNewCategory() {
  //   // this.dialogRef.close();
  //   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.selectedIds = this.selectedIds.concat(id);
  //       this.getGoalCategoryActiveData();
  //     }
  //   });
  // }
  save(form) {
    form.GoalName = form.GoalName.trim();
    form.PercentageCompleted = Math.round(100 * form.PercentageCompleted) / 100;

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