import { Component, OnInit, ViewChildren, OnDestroy } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { ToastrService } from 'ngx-toastr';
import { DataService } from 'src/app/common/services/data.service';
import { FormGroup } from '@angular/forms';
import { CommonService } from 'src/app/common/services/common.service';
import { GoalPlanInventoryService } from './goal-plan-inventory.service';
import { EditGoalPlanComponent } from './edit-goal-plan/edit-goal-plan.component';
import { AddGoalPlanComponent } from './add-goal-plan/add-goal-plan.component';
import { GoalPlanInterface } from 'src/app/common/interfaces/goal-plan-interface';
import { ViewGoalPlanComponent } from './view-goal-plan/view-goal-plan.component';

@Component({
  selector: 'app-goal-plan-inventory',
  templateUrl: './goal-plan-inventory.component.html',
  styleUrls: ['./goal-plan-inventory.component.css'],
})
export class GoalPlanInventoryComponent implements OnInit, OnDestroy {
  isLoading = false;
  data: any = new GoalPlanInterface();
  page = 1;
  pageSize = 10;
  search: string;
  UpdatedDate = new Date();
  userEmail: string;
  getData: any;
  form: FormGroup;
  isDesc = false;
  column = 'StartDate';
  direction: number;
  rowValueFound: boolean;
  rowPerPageData: any;
  default = '';
  defaultSelectedTemplate: any;
  templateData: any;
  selectedCategoriesId = [];
  activeData = [];
  isEnableSmartWizard: boolean;
  sortingEnabled = false;

  @ViewChildren('filterRef') filtedItems;

  constructor(
    private goalPlanInventoryService: GoalPlanInventoryService,
    private toastr: ToastrService,
    private matDialog: MatDialog,
    private dataService: DataService,
    private commonService: CommonService
  ) {}

  ngOnInit(): void {
    this.dataService.email.subscribe((email) => {
      this.userEmail = email;
    });
    this.dataService.goalWizardAdd.subscribe((value) => {
      if (value) {
        this.getGoalPlanInventory();
      }
    });
    this.getGoalCategoryActiveData();
    this.getGoalPlanTemplates();
    this.getRowPerPage();
  }
  validatePercNumber(c, item) {
    if (
      c.value >= 0 &&
      c.value <= 100 &&
      item.PercentageCompleted !== null &&
      c.value !== '.'
    ) {
      this.updatePecentage(item);
    } else if (item.PercentageCompleted === null) {
      this.toastr.warning('Percentage can not be null.');
    } else {
      this.toastr.warning('Percentage Range should be between 0-100.');
    }
  }

  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);
  }

  getGoalCategoryActiveData() {
    this.goalPlanInventoryService
      .getGoalCategoryActiveData()
      .subscribe((res) => {
        this.activeData = res;
      });
  }
  getRowPerPage() {
    this.commonService
      .getRowPerPageData('GPMASTER', this.userEmail)
      .subscribe((res) => {
        let rowPerPage: string;
        for (const key in res) {
          if (key) {
            rowPerPage = res[key]['Value'];
            this.pageSize = parseInt(rowPerPage, 10);
            this.rowPerPageData = res[key];
            this.rowValueFound = true;
          } else {
            this.rowValueFound = false;
          }
        }
      });
  }
  savePerPage() {
    const form = {
      ConfigCode: 'GPMASTER',
      Description: 'Page Size for Goal Plan',
      TypeIndicator: 1,
      UserId: this.userEmail,
      Value: this.pageSize.toString(),
      show: false,
    };
    this.commonService.saveRowPerPage(form).subscribe((res) => {
      this.toastr.success(
        'Your preference for rows per page updated successfully.'
      );
      this.rowValueFound = true;
      this.getRowPerPage();
      this.getGoalPlanTemplates();
    });
  }

  updatePerPage() {
    const form = {
      ConfigCode: this.rowPerPageData.ConfigCode,
      Description: this.rowPerPageData.Description,
      TypeIndicator: 1,
      UserId: this.userEmail,
      Value: this.pageSize.toString(),
      show: false,
    };
    this.commonService
      .updateRowPerPage(form, this.rowPerPageData.Id)
      .subscribe((res) => {
        this.toastr.success(
          'Your preference for rows per page updated successfully.'
        );
        this.getGoalPlanTemplates();
      });
  }
  templateChanged(tempId) {
    this.getData = this.goalPlanInventoryService
      .getGoalPlanTemplateData()
      .subscribe((res) => {
        for (const key in this.templateData) {
          if (this.templateData[key].Id === tempId) {
            return (this.isEnableSmartWizard = this.templateData[
              key
            ].EnableSmartWizard);
          }
        }
      });
  }

  getGoalPlanInventory() {
    this.isLoading = true;
    this.getData = this.goalPlanInventoryService
      .getGoalPlanInventoryData(this.default, this.userEmail)
      .subscribe((res) => {
        this.data = res;
        this.isLoading = false;
      });
  }

  getGoalPlanTemplates() {
    this.column = 'StartDate';
    this.isDesc = false;
    this.getData = this.goalPlanInventoryService
      .getGoalPlanTemplateData()
      .subscribe((res) => {
        this.templateData = res;
        for (const key in this.templateData) {
          if (this.templateData[key].IsDefault === true) {
            this.defaultSelectedTemplate = this.templateData[key];
            this.default = this.defaultSelectedTemplate.Id;
            this.isEnableSmartWizard = this.defaultSelectedTemplate.EnableSmartWizard;
          }
        }
        this.getData = this.goalPlanInventoryService
          .getGoalPlanInventoryData(this.default, this.userEmail)
          .subscribe((data) => {
            this.data = data;
          });
      });
  }
  updatePecentage(item) {
    const form = {
      CategoryId: item.CategoryId,
      StartDate: new Date(item.StartDate),
      DueDate: new Date(item.DueDate),
      UpdatedDate: this.UpdatedDate,
      UpdatedBy: this.userEmail,
      GoalName: item.GoalName,
      PercentageCompleted: item.PercentageCompleted,
      VisibilityId: item.VisibilityId,
      StatusId: item.StatusId,
    };
    this.goalPlanInventoryService
      .updateGoalPlanTemplate(form, item.Id)
      .subscribe((data) => {
        this.toastr.success('Percentage Updated Successfully');
        this.getGoalPlanInventory();
      });
  }

  addGoalPlan(id: any, isEnableSmartWizard: boolean) {
    const dialogRef = this.matDialog.open(AddGoalPlanComponent, {
      width: '70%',
      disableClose: true,
      data: { id, isEnableSmartWizard },
    });
    dialogRef.afterClosed().subscribe((result) => {
      if (result) {
        this.getGoalPlanInventory();
        this.getGoalPlanTemplates();
      }
    });
  }
  ViewGoalPlan(data: any) {
    const dialogRef = this.matDialog.open(ViewGoalPlanComponent, {
      width: '70%',
      disableClose: true,
      // tslint:disable-next-line:object-literal-shorthand
      data: data,
    });
  }
  updateGoalPlan(data: any) {
    const dialogRef = this.matDialog.open(EditGoalPlanComponent, {
      width: '70%',
      disableClose: true,
      // tslint:disable-next-line:object-literal-shorthand
      data: data,
    });
    dialogRef.afterClosed().subscribe((result) => {
      if (result) {
        this.getGoalPlanInventory();
      }
    });
  }

  deleteGoalPlan(id) {
    const confirmDelete = confirm('Are you sure you want to delete ?');
    if (confirmDelete === true) {
      this.goalPlanInventoryService.deleteGoalPlan(id).subscribe((res) => {
        this.getGoalPlanInventory();
        this.toastr.success('Goal Plan Deleted Successfully');
      });
    }
  }

  sort(colName) {
    if (colName === 'CategoryId') {
      this.sortingEnabled = true;
      this.data.forEach((element) => {
        this.activeData.filter((element1) => {
          if (element1.Id === element.CategoryId) {
            element.CategoryId = element1.Name;
          }
        });
      });

    }
    this.isDesc = !this.isDesc; // change the direction
    this.column = colName;
    this.direction = this.isDesc ? 1 : -1;
    // default to ascending
    this.data.sort((a, b) => {
      if (a[colName] === null) {
        return 1;
      } else if (b[colName] === null) {
        return -1;
      } else if (a[colName] === b[colName]) {
        return 0;
      }
    });
    if (colName === 'name' || colName === 'Metric') {
      if (this.isDesc) {
        this.data.sort((a, b) =>
          a[colName].toLowerCase() > b[colName].toLowerCase()
            ? 1
            : a[colName].toLowerCase() < b[colName].toLowerCase()
            ? -1
            : 0
        );
      } else {
        this.data.sort((a, b) =>
          a[colName].toLowerCase() > b[colName].toLowerCase()
            ? -1
            : a[colName].toLowerCase() < b[colName].toLowerCase()
            ? 1
            : 0
        );
      }
    } else {
      if (this.isDesc) {
        this.data.sort((a, b) =>
          a[colName] > b[colName] ? 1 : a[colName] < b[colName] ? -1 : 0
        );
      } else {
        this.data.sort((a, b) =>
          a[colName] > b[colName] ? -1 : a[colName] < b[colName] ? 1 : 0
        );
      }
    }
  }
  ngOnDestroy() {
    this.getData.unsubscribe();
  }
}