import { Component, OnInit } from '@angular/core';
import { DialogService, SelectItem, Message } from 'primeng/primeng';
import { AddClientComponent } from '../popups/add-client/add-client.component';
import * as moment_ from 'moment';

const moment = moment_;
import { Router } from '@angular/router';
import { CookieService } from 'ngx-cookie-service';
import { DatePipe } from '@angular/common';
import { IFilterType } from '../../shared/core/IFilterType';
import { DashboardServicesService } from '../../shared/services/dashboard-services.service';
import { AddJobPlanComponent } from '../popups/add-job-plan/add-job-plan.component';
import { IFilterKey } from '../../shared/core/IFilterKey';


@Component({
  selector: 'app-clients',
  templateUrl: './clients.component.html',
  styleUrls: ['./clients.component.scss'],
  providers: [DatePipe]
})
export class ClientsComponent implements OnInit {
  columns: { field: string; header: string; width: string }[];
  popupColumns: { field: string; header: string; width: string }[];
  cols: { field: string; header: string }[];
  documents: any;
  brands: any;
  displayDialog: boolean;

  staffList: SelectItem[];

  linkedStaffArray: string[] = [];
  itemList: SelectItem[];
  item: string;
  // tslint:disable-next-line:max-line-length
  items: ({ label: string; icon: string; command: () => void; url?: undefined; routerLink?: undefined; } | { label: string; icon: string; url: string; command?: undefined; routerLink?: undefined; } | { label: string; icon: string; routerLink: string[]; command?: undefined; url?: undefined; })[];
  status: { label: string; value: number; }[];
  actions: { label: string; value: number; }[];
  itemslist: SelectItem[];
  Clients: any = [];
  ActiveCount = 0;
  CompletedCount = 0;
  ArchiveCount = 0;
  dateOut1: Date;
  timeDiff: number;
  diffDays: number;
  currentDate: Date;
  dueDateArray: any = [];
  minDate: number;
  max: any;
  LinkedStaff: any = [];
  value: any;
  Status: any = [];
  label: any;
  StatusList: any = [];
  pageSizes: { label: string; value: number; }[];


  staffId: any;
  recordCount = 20;
  currentPage = 1;
  statusChange = 0;

  // Get All Records from database
  allRecords: number;

  // Filter variables
  filterTypes: IFilterType[] = [];

  searchText: any;
  // show filteration
  showbar: boolean = true;
  // Disable filter variables
  disableWithTasks: boolean = false;
  disableWithOutTasks: boolean = false;
  disableWithNotes: boolean = false;
  disableWithOutNotes: boolean = false;

  // Filter variabels
  daysWeeksMonthsList: { label: string; value: string; }[];
  dwmSelection: { label: string; value: string; };
  dwmEnteredText: string;
  dateRangeSelection: any;

  // No data Message
  noDataMessage: Message[] = [];
  // No data flag
  nodataFlag = false;

  // saving icon
  showLoading: boolean = false;

  constructor(public dialogService: DialogService,
    private dashboardService: DashboardServicesService,
    private router: Router,
    private cookieService: CookieService,
    private datePipe: DatePipe
  ) {

    // Assing logged userId
    this.staffId = this.cookieService.get('LoggedUserId');



    this.itemList = [];
    for (let i = 0; i < 10000; i++) {
      this.itemList.push({ label: 'Item ' + i, value: 'Item ' + i });
    }

    this.popupColumns = [
      { field: 'ClientName', header: 'Job Name', width: '10%' },
      { field: 'ClientCode', header: 'Job Status', width: '10%' },
      { field: 'cPlan', header: 'Due Date', width: '15%' },
      { field: 'Email', header: 'Messages', width: '10%' },
      { field: 'Contact', header: 'Documents', width: '10%' }
    ];

    this.columns = [
      { field: 'ClientName', header: 'Client Name', width: '10%' },
      { field: 'ClientCode', header: 'Client Code', width: '10%' },
      { field: 'cPlan', header: 'Recent Job Plan Due', width: '15%' },
      { field: 'Email', header: 'Email', width: '10%' },
      { field: 'Contact', header: 'Contact', width: '10%' },
      { field: 'cTotalPlan', header: 'Total Job Plans', width: '10%' },
      { field: 'cActive', header: 'Active', width: '10%' },
      { field: 'cComplete', header: 'Completed', width: '8%' },
      { field: 'cArchive', header: 'Archived', width: '8%' },
    ];
    this.cols = [
      { field: 'cName', header: 'Job Name' },
      { field: 'cCode', header: 'Job Status' },
      { field: 'cPlan', header: 'Due Date' },
      { field: 'cEmail', header: 'Message' },
      { field: 'cEmail', header: 'Douments' },

    ];

    this.pageSizes = [
      // {
      //   label: '5 record per page',
      //   value: 5
      // },
      {
        label: '20 record per page',
        value: 20
      },
      {
        label: '40 record per page',
        value: 40
      },
      {
        label: '100 record per page',
        value: 100
      }];

    // Getting all the filter options
    this.dashboardService.getFilterTypes('DASHBOARD', +this.cookieService.get('CompanyId')).subscribe(
      data => {
        this.filterTypes = data;
        // console.log(this.filterTypes);
      }
    );
  }

  ngOnInit() {

    // Set Default Records
    this.allRecords = 20;
    // No record message
    this.noDataMessage = [];
    this.noDataMessage.push({ severity: 'info', summary: 'No Records Found', detail: '' });

    this.getAllClients(this.staffId, this.recordCount, this.currentPage, +this.cookieService.get('CompanyId'));
    this.getAllLinkedStaff();
    this.getStatus();
    // this.filterByLinkStaffandStatus(14, this.recordCount, this.currentPage, this.statusChange, this.linkedStaffArray);
    this.items = [
      {
        label: 'Update', icon: 'pi pi-refresh', command: () => {
          // this.update();
        }
      },
      {
        label: 'Delete', icon: 'pi pi-times', command: () => {
          // this.delete();
        }
      },
      { label: 'Angular.io', icon: 'pi pi-info', url: 'http://angular.io' },
      { label: 'Setup', icon: 'pi pi-cog', routerLink: ['/setup'] }
    ];


    this.actions = [
      { label: 'Select action', value: null },
      { label: 'Archive', value: null },
      { label: 'Delete', value: 1 },
    ];

    /** Filter option - days, weeks, months  */
    this.daysWeeksMonthsList = [
      { label: '#days', value: 'DAYS' },
      { label: '#weeks', value: 'WEEKS' },
      { label: '#months', value: 'MONTHS' }
    ];

    this.dwmSelection = this.daysWeeksMonthsList[0];
  }
  showAddClients() {
    const ref = this.dialogService.open(AddClientComponent, {
      header: 'Add New Client',
      width: '40%'
    });


    ref.onClose.subscribe(() => {
      // Refresh the clients list
      this.getAllClients(this.staffId, this.recordCount, this.currentPage, +this.cookieService.get('CompanyId'));
    });
  }

  showAddJobPlans() {
    const ref = this.dialogService.open(AddJobPlanComponent, {
      data: {
        activityFlag: false
      },
      header: 'Add New Job Plan',
      width: '40%'
    });
    ref.onClose.subscribe(() => {
      // Refresh the clients list
      this.getAllClients(this.staffId, this.recordCount, this.currentPage, +this.cookieService.get('CompanyId'));
    });

  }

  showDialogToAdd() {
    this.displayDialog = true;
  }

  getAllClients(staffId, recordCount, currentPage, companyID) {
    this.showLoading = true;
    this.dashboardService.getAllClients(staffId, recordCount, currentPage, companyID)
      .subscribe(res => {
        this.showLoading = false;
        this.Clients = res;
        if (this.Clients.length > 0) {
          this.allRecords = this.Clients[0].AllRecords;
        }
        this.checkClientForGridBinding(this.Clients);
        // tslint:disable-next-line:prefer-for-of
        // console.log('Client', this.allRecords);
        // console.log('Client', this.Clients);
        if (this.Clients.length === 0) {
          this.nodataFlag = true;
        } else {
          this.nodataFlag = false;
        }
      }, error => { console.log('Error', error); });
  }

  min() {

    // tslint:disable-next-line:only-arrow-functions
    return this.minDate = this.dueDateArray.reduce(function (prev, current) {
      return (prev.DateDiff < current.DateDiff) ? prev : current;
    });
  }

  getAllLinkedStaff() {
    this.dashboardService.getAllLinkedStaff()
      .subscribe(res => {
        // console.log('Linked', res);
        this.LinkedStaff = res;
        // tslint:disable-next-line:prefer-for-of
        for (let i = 0; i < this.LinkedStaff.length; i++) {
          this.value = this.LinkedStaff[i].StaffId;
          this.LinkedStaff[i].value = this.value;
        }
        this.staffList = this.LinkedStaff;
        // console.log('Linked Staff 0');
        // console.log(this.staffList[0].label);
      }, error => { console.log('Error', error); }
      );
  }

  getStatus() {
    this.dashboardService.getStatus()
      .subscribe(res => {
        this.Status = res;

        const defaultStatus = {
          StatusId: 0,
          Description: 'Any',
          label: 'Any',
          value: 0
        };

        this.Status.push(defaultStatus);
        // console.log('Status', this.Status);

        // tslint:disable-next-line:prefer-for-of
        for (let i = 0; i < this.Status.length; i++) {
          this.value = this.Status[i].StatusId;
          this.Status[i].value = this.value;
          this.label = this.Status[i].Description;
          this.Status[i].label = this.label;
        }
        this.StatusList = this.Status;

      },
        error => { console.log('Error', error); });
  }

  filterByLinkStaffandStatus(staffId, recordCount, currentPage, status, linkedStaffArray) {
    this.dashboardService.filterByLinkStaf(staffId, recordCount, currentPage, status, linkedStaffArray)
      .subscribe(res => {
        // console.log('Test', res);
        this.Clients = res;
        this.checkClientForGridBinding(this.Clients);
        // tslint:disable-next-line:prefer-for-of
        if (this.Clients.length === 0) {
          this.nodataFlag = true;
        } else {
          this.nodataFlag = false;
        }

      },
        error => { console.log('Error', error); });
  }

  selectlinkStaff() {
    // console.log('On input', this.linkedStaffArray);
    if (0 < this.linkedStaffArray.length) {
      this.filterByLinkStaffandStatus(14, this.recordCount, this.currentPage, this.statusChange, this.linkedStaffArray);
    } else {
      this.getAllClients(this.staffId, this.recordCount, this.currentPage, +this.cookieService.get('CompanyId'));
    }
  }


  pageSizesChange(e) {
    this.recordCount = e.value;

    if (0 < this.linkedStaffArray.length && this.statusChange !== 0) {
      this.getAllClients(this.staffId, this.recordCount, this.currentPage, +this.cookieService.get('CompanyId'));
    } else {
      this.filterByLinkStaffandStatus(14, this.recordCount, this.currentPage, this.statusChange, this.linkedStaffArray);
    }
  }

  onStatusChange(e) {
    // console.log('On input', e);
    if (e.value === 0) {
      this.getAllClients(this.staffId, this.recordCount, this.currentPage, +this.cookieService.get('CompanyId'));
    } else {
      this.filterByLinkStaffandStatus(this.staffId, this.recordCount, this.currentPage, this.statusChange, this.linkedStaffArray);
    }
  }

  checkClientForGridBinding(Clients) {

    // tslint:disable-next-line:prefer-for-of
    for (let a = 0; a < Clients.length; a++) {
      this.ActiveCount = 0;
      this.CompletedCount = 0;
      this.ArchiveCount = 0;
      if (0 < Clients[a].JobPlans.length) {
        // tslint:disable-next-line:prefer-for-of
        for (let i = 0; i < Clients[a].JobPlans.length; i++) {


          this.currentDate = new Date();

          this.diffDays = moment(Clients[a].JobPlans[i].EndDate).diff(moment(this.currentDate), 'days');

          if (this.diffDays < 0) {
            // tslint:disable-next-line:object-literal-key-quotes
            this.dueDateArray.push({ 'DueDate': Clients[a].JobPlans[i].EndDate, 'DateDiff': this.diffDays, 'OverDue': true });
          } else {
            // tslint:disable-next-line:object-literal-key-quotes
            this.dueDateArray.push({ 'DueDate': Clients[a].JobPlans[i].EndDate, 'DateDiff': this.diffDays, 'OverDue': false });
          }
          if (Clients[a].JobPlans[i].JobPlanStatusId === 1) {
            this.ActiveCount = this.ActiveCount + 1;
          } else if (Clients[a].JobPlans[i].JobPlanStatusId === 2) {
            this.CompletedCount = this.CompletedCount + 1;
          } else {
            this.ArchiveCount = this.ArchiveCount + 1;
          }
          Clients[a].Active = this.ActiveCount;
          Clients[a].Completed = this.CompletedCount;
          Clients[a].Archive = this.ArchiveCount;
          this.minDate = this.min();

          Clients[a].RecentDate = this.minDate;

        }
      } else {
        // tslint:disable-next-line:object-literal-key-quotes
        Clients[a].RecentDate = { 'DueDate': '', 'DateDiff': 0, 'OverDue': false };
      }
      this.dueDateArray = [];
      // console.log('check client', this.Clients);
    }
  }

  Search() {
    // console.log('On input', this.searchText);

    this.dashboardService.searchClient(14, this.searchText, this.recordCount, this.currentPage)
      .subscribe(res => {
        this.Status = res;
        // tslint:disable-next-line:prefer-for-of
        this.Clients = res;
        this.checkClientForGridBinding(this.Clients);
        if (this.Clients.length === 0) {
          this.nodataFlag = true;
        } else {
          this.nodataFlag = false;
        }

      },
        error => { console.log('Error', error); });

  }

  // Pagination function
  paginate(event) {
    // console.log(event.page);

    this.filterByLinkStaffandStatus(14, this.recordCount, (event.page + 1), this.statusChange, this.linkedStaffArray);
  }

  // Navigate to Activity Detatils Page
  GotoActivityPage(clientId) {
    this.router.navigate(['app-client-detail', clientId, this.staffId]);
  }


  onSinenavToggle() {
    this.showbar = !this.showbar;
  }

  onSinenavToggled() {
    this.showbar = !this.showbar;
    // $(".card").removeClass("width1785");
  }

  // Call wehen check the filter type checkboxes
  onChangeFilterType(filter: IFilterType) {
    filter.IsChecked = !filter.IsChecked;
    filter.selectedFilterOption = filter.FilterOptions[0];
    let allFilterValues = [];

    // console.log('Filter Code');
    // console.log(filter.Code);
    switch (filter.Code) {

      case 'CLIENT':
      case 'CLIENTCODE':
      case 'MOBILE':

        this.dashboardService.GetFilterValues(filter.Code).subscribe(
          allValues => {
            allFilterValues = allValues;
            filter.multiSelectList = allFilterValues.map(x => ({ label: x.Value, value: x.Id }));
            // remove empty
            filter.multiSelectList = filter.multiSelectList.filter(x => x.label !== '');
            // remove duplicates
            filter.multiSelectList = filter.multiSelectList.filter((test, index, array) =>
              index === array.findIndex((findTest) =>
                findTest.label === test.label
              ));
          }
        );
        this.onChangeFilterOption(filter);
        break;
      case 'EMAIL':
      case 'PHONE':
      case 'ONUMBER':

        this.dashboardService.GetFilterValues(filter.Code).subscribe(
          allValues => {
            allFilterValues = allValues;
            filter.multiSelectList = allFilterValues.map(x => ({ label: x.Value, value: x.Value }));
            // remove empty
            filter.multiSelectList = filter.multiSelectList.filter(x => x.label !== '');
            // remove duplicates
            filter.multiSelectList = filter.multiSelectList.filter((test, index, array) =>
              index === array.findIndex((findTest) =>
                findTest.label === test.label
              ));
          }
        );
        this.onChangeFilterOption(filter);
        break;

      case 'WOACTIVITIES':
      case 'AOVERDUE':
      case 'ADUE':
      case 'ACOMPLETED':
        // Remove disable values
        this.disableWithTasks = false;
        this.disableWithOutTasks = false;
        break;
    }

  }

  // Call when select a filter option
  onChangeFilterOption(filter: IFilterType) {
    if (filter.selectedFilterOption.Code === 'IS' || filter.selectedFilterOption.Code === 'IS$NOT') {
      filter.textFieldValue = '';
    } else if (filter.selectedFilterOption.Code === 'CONTAINS' || filter.selectedFilterOption.Code === 'NOT$CONTAINS' ||
      filter.selectedFilterOption.Code === 'START' || filter.selectedFilterOption.Code === 'END') {
      filter.selectedMultiSelectList = [];
    } else if (filter.selectedFilterOption.Code === 'EMPTY' || filter.selectedFilterOption.Code === 'NOT$EMPTY') {
      filter.selectedMultiSelectList = [];
      filter.textFieldValue = 'null';
    }
  }

  dwmFocusOutEvent(filterType: IFilterType) {
    // tslint:disable-next-line: prefer-for-of
    for (let i = 0; i < this.filterTypes.length; i++) {
      if (this.filterTypes[i].Id === filterType.Id) {
        this.filterTypes[i].textFieldValue = this.dwmSelection.value + '&' + this.dwmEnteredText;
        break;
      }
    }
  }


  onSelectFollowUpDate(filterType: IFilterType) {
    // console.log(this.dateRangeSelection);

    let date1 = this.datePipe.transform((this.dateRangeSelection[0] == null) ?
      Date() : this.dateRangeSelection[0].toString(), 'MM-dd-yyyy');

    let date2 = this.datePipe.transform((this.dateRangeSelection[1] == null) ?
      Date() : this.dateRangeSelection[1].toString(), 'MM-dd-yyyy');

    // tslint:disable-next-line: prefer-for-of
    for (let i = 0; i < this.filterTypes.length; i++) {
      if (this.filterTypes[i].Id === filterType.Id) {
        this.filterTypes[i].textFieldValue = date1 + '&' + date2;
        break;
      }
    }
  }

  // filter button click
  filterList() {
    var filterKeys: IFilterKey[] = [];

    // set filter keys
    this.filterTypes.forEach(filterType => {

      if (filterType.IsChecked) {
        var filterKey: IFilterKey = {
          Code: '', Option: '', Values: []
        };


        // for multi select conditions
        if (filterType.selectedFilterOption && (
          filterType.selectedFilterOption.Code === 'IS' ||
          filterType.selectedFilterOption.Code === 'IS$NOT')) {
          if (filterType.selectedMultiSelectList !== undefined &&
            filterType.selectedMultiSelectList != null &&
            filterType.selectedMultiSelectList.length > 0) {
            filterKey.Code = filterType.Code;
            filterKey.Option = filterType.selectedFilterOption.Code;

            // bind selected values to the 'Values' array list
            filterType.selectedMultiSelectList.forEach(element => {
              var value = encodeURIComponent(element.value)
              filterKey.Values.push(value)
            });

            filterKeys.push(filterKey);
          }
        } else {  // for single value conditions
          if (filterType.selectedFilterOption) {
            filterKey.Code = filterType.Code;
            filterKey.Option = filterType.selectedFilterOption.Code;
            filterKey.Values.push(filterType.textFieldValue);
          } else {
            filterKey.Code = filterType.Code;
            filterKey.Option = '';
            filterKey.Values.push('');
          }


          filterKeys.push(filterKey);
        }

      }
    });

    // Filter
    this.filterClientListByParent(filterKeys);
  }

  // Filter by recores
  filterClientListByParent(filterKeys: IFilterKey[]) {
    // console.log('Filter Keys');
    // console.log(filterKeys);
    if (filterKeys.length > 0) {
      this.dashboardService.getAllFilterClientLists({
        staffId: this.staffId, recordCount: this.recordCount,
        currentPage: this.currentPage, filterKeys
      })
        .subscribe(res => {
          this.Clients = res;
          this.checkClientForGridBinding(this.Clients);
          // tslint:disable-next-line:prefer-for-of
          // console.log('Client', this.allRecords);
          // console.log('Client', this.Clients);
          if (this.Clients.length === 0) {
            this.nodataFlag = true;
          } else {
            this.nodataFlag = false;
            this.allRecords = this.Clients[0].AllRecords;
          }
        }, error => { console.log('Error', error); });
    } else {
      this.getAllClients(this.staffId, this.recordCount, this.currentPage, +this.cookieService.get('CompanyId'));
    }
  }

  clearFilter() {
    this.getGlobalFilters();
    this.getAllClients(this.staffId, this.recordCount, this.currentPage, +this.cookieService.get('CompanyId'));
  }

  getGlobalFilters() {
    // Getting all the filter options
    this.dashboardService.getFilterTypes('DASHBOARD', +this.cookieService.get('CompanyId')).subscribe(
      data => {
        this.filterTypes = data;
        // console.log(this.filterTypes);
      }
    );
  }

  // Copy job plan
  CopyJobPlan(JobPlanId, ClientDetailsId) {
    // console.log(JobPlanId);  
    this.showLoading = true;
    this.dashboardService.CopyJobPlan(+this.cookieService.get('CompanyId'), JobPlanId, ClientDetailsId, 'COPY').subscribe(
      data => {
        if (data !== null && data !== undefined) {
          this.getAllClients(this.staffId, this.recordCount, this.currentPage, +this.cookieService.get('CompanyId'));
          // this.showLoading = false; 
        }
      }
    );
  }

  // Edit job plan
  EditJobPlan(JobPlanId, ClientDetailsId) {
    // console.log(JobPlanId);
    const ref = this.dialogService.open(AddJobPlanComponent, {
      data: {
        activityFlag: false,
        editJobPlanFlag: true,
        selectedJobPlanId: JobPlanId,
        selectedClientDetailsId: ClientDetailsId
      },
      header: 'Edit Job Plan',
      width: '40%'
    });
    ref.onClose.subscribe(() => {
      // Refresh the clients list
      this.getAllClients(this.staffId, this.recordCount, this.currentPage, +this.cookieService.get('CompanyId'));
    });
  }

  // Delete job plan
  DeleteJobPlan(JobPlanId, ClientDetailsId) {
    // console.log(JobPlanId);
    this.showLoading = true;
    this.dashboardService.CopyJobPlan(+this.cookieService.get('CompanyId'), JobPlanId, ClientDetailsId, 'DEL').subscribe(
      data => {
        if (data !== null && data !== undefined) {
          this.getAllClients(this.staffId, this.recordCount, this.currentPage, +this.cookieService.get('CompanyId'));
          // this.showLoading = false; 
        }
      }
    );
  }

}