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 { FormService } from './form.service';
import { FormDialogComponent } from './form-dialog/form-dialog.component';
import { GoalPlanInterface } from 'src/app/common/interfaces/goal-plan-interface';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css'],
})
export class FormComponent 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 formService: FormService,
    private toastr: ToastrService,
    private matDialog: MatDialog,
    private dataService: DataService,
    private commonService: CommonService
  ) {}

  ngOnInit(): void {
    this.dataService.email.subscribe((email) => {
      this.userEmail = email;
    });
    this.forms();
    this.getRowPerPage();
  }
  getRowPerPage() {
    this.commonService
      .getRowPerPageData('FMASTER', 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: 'FMASTER',
      Description: 'Page Size for Form',
      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.forms();
    });
  }

  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.forms();
      });
  }
  forms() {
    this.isLoading = true;
    this.getData = this.formService
      .getFormData()
      .subscribe((res) => {
        this.data = res;
        this.formService.getFormTemplateData().subscribe((data) => {
          this.activeData = data;
        });
        this.isLoading = false;
      });
  }
  ViewForm(data: any) {
    const dialogRef = this.matDialog.open(FormDialogComponent, {
      width: '70%',
      disableClose: true,
      // tslint:disable-next-line:object-literal-shorthand
      data: data,
    });
  }
  updateForm(data: any) {
    const dialogRef = this.matDialog.open(FormDialogComponent, {
      width: '70%',
      disableClose: true,
      // tslint:disable-next-line:object-literal-shorthand
      data: data,
    });
    dialogRef.afterClosed().subscribe((result) => {
      if (result) {
        this.forms();
      }
    });
  }

  deleteForm(id) {
    const confirmDelete = confirm('Are you sure you want to delete ?');
    if (confirmDelete === true) {
      this.formService.deleteForm(id).subscribe((res) => {
        this.forms();
        this.toastr.success('Form Deleted Successfully');
      });
    }
  }

  sort(colName) {
    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') {
      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();
  }
}