/*
 * ============LICENSE_START==========================================
 * ONAP Portal SDK
 * ===================================================================
 * Copyright © 2019 AT&T Intellectual Property. All rights reserved.
 * ===================================================================
 *
 * Unless otherwise specified, all software contained herein is licensed
 * under the Apache License, Version 2.0 (the "License");
 * you may not use this software except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *             http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 * Unless otherwise specified, all documentation contained herein is licensed
 * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
 * you may not use this documentation except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *             https://creativecommons.org/licenses/by/4.0/
 *
 * Unless required by applicable law or agreed to in writing, documentation
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 * ============LICENSE_END============================================
 *
 * 
 */

import { Component, Input, OnInit, OnChanges, ViewChild, AfterViewInit, ElementRef} from '@angular/core';
import { MatPaginator, MatSort, MatTable, MatTableDataSource } from '@angular/material';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { RdpDataTableService } from '../shared/rdp-data-table.service';
import { RdpDataTableEditComponent } from './rdp-data-table-edit/rdp-data-table-edit.component';
import { noop as _noop, update } from 'lodash-es';
import { RDPDataSource } from '../datasouce/RDPDataSource';
import { debounceTime, distinctUntilChanged, tap } from 'rxjs/operators';
import { merge, fromEvent } from "rxjs";
import { RdpModalService } from '../services/rdp-modal.service';


@Component({
  selector: 'rdp-data-table',
  templateUrl: './rdp-data-table.component.html',
  styleUrls: ['./rdp-data-table.component.scss']
})
export class RdpDataTableComponent<T> implements OnChanges, AfterViewInit, OnInit {
 
  @Input() data: any;
  @Input() settings: any;
  
  @ViewChild(MatSort) sort: MatSort;
  //@ViewChild(MatPaginator) paginator: MatPaginator;
  private paginator: MatPaginator;
  
  @ViewChild(MatPaginator) set matPaginator(mp: MatPaginator) {
    this.paginator = mp;
    this.setData(this.data);
  }

  @ViewChild(MatTable) table: MatTable<T>;
  @ViewChild('input') input: ElementRef;
  
  limit: number = 1000;
  full: boolean = true;
  applicationService: any;
  public displayedColumns = [];
  public columnsInfoList = [];
  public dataSource;
  isPaginationRequired: boolean = false;
  pageSize: number = 5;
  isEditMode: boolean;
  isSearchEnabled: boolean;
  isServerSidePaginationEnabled: boolean  = false;
  showAddButton: boolean = false;
  result : any;
  totalRowsCount: any;
  showSpinner: boolean;

  constructor(public dataTableService: RdpDataTableService, private rdpModal: RdpModalService) { }

  ngOnInit(): void {
    if (this.data) {
      this.setData(this.data);
    }
  }

  ngAfterViewInit() {
    if(this.settings && this.settings.isServerSidePaginationEnabled && this.data){
    
      this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0);
    
      fromEvent(this.input.nativeElement,'keyup')
      .pipe(
          debounceTime(150),
          distinctUntilChanged(),
          tap(() => {
              this.paginator.pageIndex = 0;

              this.loadData(this.paginator.pageIndex, this.paginator.pageSize);
          })
      ).subscribe();
   
      merge(this.sort.sortChange, this.paginator.page)
      .pipe(
          tap(() => this.loadData(this.paginator.pageIndex, this.paginator.pageSize))
      ).subscribe();  
    }
    if(this.data) {
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;
    }
  }

  ngOnChanges() {
     if(this.data) {
       this.setData(this.data);
     }
     if (this.settings) {
      console.log("Table setting Objects >>>>", this.settings);

      this.applicationService = this.settings.applicationService;

      this.settings.columns.forEach(element => {
        this.displayedColumns.push(element.title);
        this.columnsInfoList.push(element);
      });

      if (!this.settings.isReadOnly) {
        this.displayedColumns.push('edit');
      }

      if (!this.settings.isReadOnly) {
        this.displayedColumns.push('delete');
      }

      if (this.settings.isReadOnly) {
        this.showAddButton = false;
      }else{
        this.showAddButton = true;
      }

      if (this.settings.isTableSearchEnabled) {
        this.isSearchEnabled = true;
      }

      if(this.settings.isServerSidePaginationEnabled){
        this.isServerSidePaginationEnabled = true;
      }

      if (this.settings.isToggleEnabled) {
        this.displayedColumns.push('toggle');
      }

      if (this.settings.isPaginationEnabled) {
        this.isPaginationRequired = true;
        if (this.settings.paginationsSize) {
          this.pageSize = this.settings.paginationsSize;
        }
      }
      console.log("this.displayedColumns>>>>>", this.displayedColumns);
    }
  }

  setData(data) {
    if(this.settings && this.settings.isServerSidePaginationEnabled){
      console.log("Server side pagination is enabled");
      this.dataSource = new RDPDataSource();
      this.dataSource.loadData(this.settings.applicationService,'', this.sort.active, this.sort.direction, 0, this.settings.paginationsSize);
      this.totalRowsCount = this.getTotalRowCount();

    }else{
      this.dataSource = new MatTableDataSource([]);
      console.log("Server side pagination is not enabled");
      if (Array.isArray(data)) {
        this.dataSource.data = data;
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
        this.totalRowsCount = data.length;
      }
    }
  }

  getTotalRowCount(): any {
    let totalRows = 0;
    try { 
      totalRows = this.settings.applicationService.getTotalRowCount();
    }catch (error){
       console.log("Error while getting total row count :: ",error);
    }  
    return totalRows;
  }

  loadData(pageIndex:any, pageSize:any) {
    this.dataSource = new RDPDataSource();
    this.dataSource.loadData(this.settings.applicationService, this.input.nativeElement.value, this.sort.active, this.sort.direction, pageIndex , pageSize);
  } 

  onPaginationChange(event:any){
    console.log("onPaginationChange event :: ",event);
    //this.loadData(event.pageIndex, event.pageSize);
  }

  addRow(data: any) {
    this.dataTableService.add(this.applicationService, data);
  }

  updateRow(data: any) {
   return this.dataTableService.update(this.applicationService, data);
  }

  getRow(data: any) {
    this.dataTableService.get(this.applicationService, data);
  }

  deleteRow(data: any) {
    this.dataTableService.delete(this.applicationService, data);
    this.applicationService.statusResponse.subscribe(response => {
      console.log("Response : ",response);
      if(response == 200){
        this.applicationService.get();
        this.applicationService.updatedData.subscribe(updatedResponse =>{
          this.setData(updatedResponse);
        })
      }
    })
  }

  applyFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }

  cloneObject: any;
  /**
   * openAddNewRoleModal
   * @param rowData 
   */
  openEditModalPopup(rowData: any) {
    this.showSpinner = true;
    console.log("Row data : ", rowData);
    this.cloneObject = Object.assign({}, rowData)
    console.log("Update or Add functionality intialized");
    const modalRef = this.rdpModal.open(RdpDataTableEditComponent, { size: 'lg' });
    modalRef.componentInstance.title = 'Edit';
    modalRef.componentInstance.settings = this.settings;
    if (this.cloneObject.data != 'undefined' && this.cloneObject) {
      modalRef.componentInstance.rowdata = this.cloneObject;
      modalRef.componentInstance.applicationService = this.applicationService;
      modalRef.componentInstance.isEditMode = true;
      this.isEditMode = true;
    } else {
      modalRef.componentInstance.rowdata = {};
      modalRef.componentInstance.isEditMode = false;
      this.isEditMode = false;
    }
    modalRef.componentInstance.passEntry.subscribe((receivedEntry: any) => {
      if (receivedEntry) {
        this.data = receivedEntry;
        this.setData(this.data);
      }
      this.showSpinner = false;
    });

  }

  handleScroll = (scrolled: boolean) => {
    scrolled ? this.dataSource : _noop();
  }

  toggleUserActive(rowData: any) {
    console.log("Row data : ", rowData);
  }

  //hasMore = () => !this.dataSource || this.dataSource.data.length < this.limit;

}