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 { 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 { GoalWizardAdd } from './goal-wizard-add.model';

@Component({
  selector: 'app-add-goal-wizard',
  templateUrl: './add-goal-wizard.component.html',
  styleUrls: ['./add-goal-wizard.component.css'],
})
export class AddGoalWizardComponent implements OnInit {
  data: any = new GoalWizardAdd();
  goalForm: FormGroup;
  metricForm: FormGroup;
  attainableForm: FormGroup;
  relevantForm: FormGroup;
  timeLineForm: FormGroup;
  createdDate = new Date();
  userEmail: string;
  activeData = [];
  goalCategoryData: any;
  templateData: any;
  startDate: any;
  dueDate: any;
  selectedIds = [];
  isDisabled = false;
  minDate = new Date();
  maxDate: any;
  selectedVisibility: any;
  selectedStatus: any;
  statusList = [];
  templateId: number;
  visibilityOptions = [];
  categoriesList = [];
  progress = 0;
  diffDate = 0;
  isAddPreview = false;
  categoryName: string;
  isEditGoalDetails = false;
  selectedCategoriesId = [];
  formData: any;
  addMoreDetailForm: FormGroup;
  visibilityId = 2;
  statusId = 6;
  percentageCompleted = 0;

  public tabOpt: any[] = [
    { id: 1, name: 'Specific', isActive: true },
    { id: 2, name: 'Measurable', isActive: false },
    { id: 3, name: 'Attainable', isActive: false },
    { id: 4, name: 'Relevant', isActive: false },
    { id: 5, name: 'Time-Bound', isActive: false },
  ];
  selectedTabOpt = { id: 1, name: 'Specific', isActive: true };

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

  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, color: 'yellow' },
      { name: 'Behind', value: 2, color: '#42a1cd' },
      { name: 'Completed', value: 3, color: 'red' },
      { name: 'Postponed', value: 4, color: 'red' },
      { name: 'Cancelled', value: 5, color: 'red' },
      { name: 'Not Started', value: 6, color: '#42a1cd' },
    ];
    this.selectedStatus = this.statusList[0].name;
    this.dataService.email.subscribe((email) => {
      this.userEmail = email;
    });
    (this.goalForm = new FormGroup({
      GoalName: new FormControl('', [
        Validators.maxLength(750),
        Validators.required,
        FieldSpaceValidator.spaceValidator,
      ]),
      CategoryId: new FormControl('', Validators.required),
    })),
      (this.metricForm = new FormGroup({
        Metric: new FormControl('', [
          Validators.required,
          Validators.maxLength(500),
        ]),
      })),
      (this.attainableForm = new FormGroup({
        IsAttainable: new FormControl('', Validators.required),
      })),
      (this.relevantForm = new FormGroup({
        IsRelevant: new FormControl('', Validators.required),
      })),
      (this.timeLineForm = new FormGroup({
        StartDate: new FormControl('', Validators.required),
        DueDate: new FormControl('', Validators.required),
      })),
      this.getGoalCategoryActiveData();
  }

  getProgress() {
    if (this.selectedTabOpt.id === 1) {
      this.progress = 20;
    } else if (this.selectedTabOpt.id === 2) {
      this.progress = 40;
    } else if (this.selectedTabOpt.id === 3) {
      this.progress = 60;
    } else if (this.selectedTabOpt.id === 4) {
      this.progress = 80;
    } else if (this.selectedTabOpt.id === 5) {
      this.progress = 100;
    }
  }
  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);
  }
  onStartDateChange(value: Date): void {
    this.minDate = new Date(value);
    this.calculateDateDiff();
  }
  onDueDateChange(value: Date): void {
    this.maxDate = value;
    this.calculateDateDiff();
  }
  calculateDateDiff() {
    if (this.minDate === this.maxDate) {
      this.diffDate = 0;
      return this.diffDate;
    }
    if (this.timeLineForm.valid && this.minDate && this.maxDate) {
      const start: any = new Date(this.minDate);
      const end: any = new Date(this.maxDate);
      const diffTime = Math.abs(end - start);
      this.diffDate = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
    }
  }
  addPreview() {
    for (const goal of this.goalCategoryData) {
      if (goal.Id === this.goalForm.value.CategoryId) {
        this.categoryName = goal.Name;
      }
    }
    this.isAddPreview = true;
  }
  addMoreDetails() {
    this.isEditGoalDetails = true;
    (this.addMoreDetailForm = new FormGroup({
      GoalName: new FormControl(this.goalForm.value.GoalName, [
        Validators.maxLength(750),
        Validators.required,
        FieldSpaceValidator.spaceValidator,
      ]),
      VisibilityId: new FormControl(this.visibilityId),
      CategoryId: new FormControl(
        JSON.parse('[' + this.goalForm.value.CategoryId + ']'),
        Validators.required
      ),
      Metric: new FormControl(this.metricForm.value.Metric, [
        Validators.required,
        Validators.maxLength(500),
      ]),
      StartDate: new FormControl(
        new Date(this.timeLineForm.value.StartDate),
        Validators.required
      ),
      DueDate: new FormControl(
        new Date(this.timeLineForm.value.DueDate),
        Validators.required
      ),
      PercentageCompleted: new FormControl(this.percentageCompleted, this.validatePercNumber),
      StatusId: new FormControl(this.statusId),
      CreatedDate: new FormControl(this.createdDate),
      CreatedBy: new FormControl(this.userEmail),
      IsAttainable: new FormControl(this.attainableForm.value.IsAttainable),
      IsRelevant: new FormControl(this.relevantForm.value.IsRelevant),
      GoalPlanTemplateId: new FormControl(this.templateId),
    })),
      this.getGoalCategoryActiveData();
  }
  getGoalCategoryActiveData() {
    this.goalPlanInventoryService
      .getGoalCategoryActiveData()
      .subscribe((res) => {
        this.goalCategoryData = res;
        this.selectedCategoriesId = this.goalForm.value.CategoryId;
        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;
        }
      }
    }
  }
  back(form) {
    form.reset();
    this.diffDate = 0;
  }
  backToTimeline() {
    this.isAddPreview = false;
  }
  backToMain() {
    this.isEditGoalDetails = false;
  }
  // convenience getter for easy access to form fields
  get gform() {
    return this.goalForm.controls;
  }
  get mform() {
    return this.metricForm.controls;
  }
  get aform() {
    return this.attainableForm.controls;
  }
  get rform() {
    return this.relevantForm.controls;
  }
  get tform() {
    return this.timeLineForm.controls;
  }
  get moreDetailF() {
    return this.addMoreDetailForm.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() {
    if (this.addMoreDetailForm && this.addMoreDetailForm.value){
      this.visibilityId = this.addMoreDetailForm.value.VisibilityId;
      this.statusId = this.addMoreDetailForm.value.StatusId;
      this.percentageCompleted = this.addMoreDetailForm.value.PercentageCompleted;
    }
    else{
      this.visibilityId  = 2;
      this.statusId = 6;
      this.percentageCompleted = 0;
    }
    this.goalForm.value.GoalName = this.goalForm.value.GoalName.trim();
    this.formData = {
      goalPlanTemplateId: this.templateId,
      GoalName: this.goalForm.value.GoalName,
      CategoryId: this.goalForm.value.CategoryId,
      Metric: this.metricForm.value.Metric,
      IsAttainable: JSON.parse(this.attainableForm.value.IsAttainable),
      IsRelevant: JSON.parse(this.relevantForm.value.IsRelevant),
      StartDate: this.timeLineForm.value.StartDate,
      DueDate: this.timeLineForm.value.DueDate,
      CreatedDate: this.createdDate,
      CreatedBy: this.userEmail,
      VisibilityId: this.visibilityId,
      StatusId: this.statusId,
      PercentageCompleted: this.percentageCompleted,
    };
    this.formData.PercentageCompleted = Math.round(100 * this.formData.PercentageCompleted) / 100;

    // stop here if form is invalid
    if (this.timeLineForm.invalid) {
      return;
    }
    this.isDisabled = true;
    // stop here if form is invalid

    this.goalPlanInventoryService
      .addGoalPlanTemplate(this.formData, this.templateId)
      .subscribe((data) => {
        this.dialogRef.close(data);
        this.toastr.success('Goal Plan Created Successfully');
        this.dataService.addGoalWizard(true);
      });
  }

  saveMoreDetails(form) {
    this.goalForm.value.GoalName = form.GoalName;
    this.goalForm.value.CategoryId = form.CategoryId;
    this.metricForm.value.Metric = form.Metric;
    this.timeLineForm.value.StartDate = form.StartDate;
    this.timeLineForm.value.DueDate = form.DueDate;
    this.attainableForm.value.IsAttainable = form.IsAttainable;
    this.relevantForm.value.IsRelevant = form.IsRelevant;
    this.isEditGoalDetails = false;
    this.visibilityId = form.VisibilityId;
    this.statusId = form.StatusId;
    this.percentageCompleted = form.PercentageCompleted;
  }
  public setActive(index) {
    for (let i = 0; i < this.tabOpt.length; i++) {
      if (index === i) {
        this.tabOpt[i].isActive = true;
      } else {
        this.tabOpt[i].isActive = false;
      }
    }
    this.selectedTabOpt = this.tabOpt[index];
    this.getProgress();
  }
  public setBack(index) {
    const ind = index - 1;
    for (let i = this.tabOpt.length - 1; i >= 0; i--) {
      if (ind === i) {
        this.tabOpt[i].isActive = true;
      } else {
        this.tabOpt[i].isActive = false;
      }
    }
    this.selectedTabOpt = this.tabOpt[ind];
    this.getProgress();
  }
}