import { Component,  EventEmitter,  Input,  OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
import { ActionColumn, ActionColumnType, SelectionType, SortDirection } from '../../models';
import { FssTableComponent } from '../fss-table/fss-table.component';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'dual-table-select',
  templateUrl: './dual-table-select.component.html',
  styleUrls: ['./dual-table-select.component.scss']
})
export class DualTableSelectComponent implements OnInit, OnChanges {

  @Input() allItems: any[]= [];
  @Input() selected: any[]= [];
  @Input() trackByProp = 'key';
  @Input() filterProp: string = '';
  @Input() filterValue: string = '';

  @Input() selectedColumns: any[]= [];
  @Input() allItemsColumns: any[]= [];

  @Input() allowExportDeselected = false;
  @Input() deselectedFilename: string= '';
  @Input() allowExportSelected = false;
  @Input() selectedFilename: string= '';

  @Input() defaultSorts: { column: string; sortDirection: SortDirection; }[] = [];

  @Input() hasPermission: boolean = false;

  @Output() itemsSelected: EventEmitter<any[]> = new EventEmitter<any[]>();
  @Output() itemsDeselected: EventEmitter<any[]> = new EventEmitter<any[]>();

  @ViewChild( 'allTable') allTable?: FssTableComponent;
  @ViewChild( 'selectedTable') selectedTable?: FssTableComponent;

  selectionType = SelectionType.checkbox;

  itemsToSelect: any[]= [];
  itemsToDeselect: any[] = [];
  deselected: any[] = [];

  leftActionDeselectColumns: ActionColumn[] = [];
  leftActionSelectColumns: ActionColumn[] = [];

  singleSelectHoverText = '';
  singleDeselectHoverText = '';

  multiSelectHovertext = '';
  multiSelectEnabledHoverText = '';
  multiSelectDisabledHoverText = '';
  multiSelectEnabled = false;

  multiDeselectHovertext = '';
  multiDeselectEnabledHoverText = '';
  multiDeselectDisabledHoverText = '';
  multiDeselectEnabled = false;
  
  constructor(private translator: TranslateService) { }
  
  ngOnInit(): void {

    this.leftActionSelectColumns = [
      {
        actionName: 'select',
        actionIcon: 'keyboard_arrow_right',
        width: 60,
        disabledProp: 'editDisabled',
        hoverText: this.singleSelectHoverText,
        columnType: ActionColumnType.MATERIAL
      }
    ];

    this.leftActionDeselectColumns = [
      {
        actionName: 'deselect',
        actionIcon: 'keyboard_arrow_left',
        width: 60,
        disabledProp: 'editDisabled',
        hoverText: this.singleDeselectHoverText,
        columnType: ActionColumnType.MATERIAL
      }
    ];
    this.SetHoverText();
  }

  SetHoverText() {
    this.multiSelectEnabledHoverText = this.translator.instant('fss.dualSelectTable.multipleSelectEnabled');

    this.multiSelectDisabledHoverText = this.translator.instant('fss.dualSelectTable.multipleSelectDisabled');

    this.multiDeselectEnabledHoverText = this.translator.instant('fss.dualSelectTable.deselectMultipleEnabled');

    this.multiDeselectDisabledHoverText = this.translator.instant('fss.dualSelectTable.deselectMultipleDisabled');

    if (this.leftActionSelectColumns && this.leftActionSelectColumns[0]) {
      this.leftActionSelectColumns[0].hoverText = this.singleSelectHoverText;
      this.leftActionSelectColumns[0].columnDisabled = !this.hasPermission;
    }

    if (this.leftActionDeselectColumns && this.leftActionDeselectColumns[0]) {
      this.leftActionDeselectColumns[0].columnDisabled = !this.hasPermission;
    }

    this.setMultiDeselectedHoverText();
    this.setMultiSelectHoverText();

  }

  ngOnChanges(changes: SimpleChanges) {
    for (const propName in changes) {
      if (changes.hasOwnProperty(propName)) {
        switch (propName) {
          case 'allItems':
          case 'selected':
          case 'filterValue':
            this.itemsToSelect = [];
            this.itemsToDeselect = [];
            this.initDeselected();
            break;
          case 'itemDescription':
          case 'listName':
          case 'hasPermission':
            this.SetHoverText();
        }
      }
    }
  }

  private initDeselected() {
    if (this.selected !== undefined && this.allItems !== undefined) {
      if (this.filterProp !== undefined && this.filterValue !== undefined) {
        this.deselected = this.allItems.filter(x => x[this.filterProp] === this.filterValue &&
          !this.selected.some(y => x[this.trackByProp] === y[this.trackByProp]));
      } else {
        this.deselected = this.allItems.filter(x => !this.selected.some(y => x[this.trackByProp] === y[this.trackByProp]));
      }

    }
  }

  onSelectTableOutput(items: any) {
    if (Array.isArray(items)) {
      this.itemsToSelect = [...items];
    }   
    this.multiSelectEnabled = (this.itemsToSelect != null && this.itemsToSelect.length > 1);
    this.setMultiSelectHoverText();
  }


  onDeselectTableOutput(items: any) {
    if (Array.isArray(items)) {
      this.itemsToDeselect = [...items];
    }   

    this.multiDeselectEnabled = (this.itemsToDeselect != null && this.itemsToDeselect.length > 1);
    this.setMultiDeselectedHoverText();
  }

  private setMultiSelectHoverText() {
    this.multiSelectHovertext = (this.multiSelectEnabled) ? this.multiSelectEnabledHoverText : this.multiSelectDisabledHoverText;
  }

  private setMultiDeselectedHoverText() {
    this.multiDeselectHovertext = (this.multiDeselectEnabled) ?
      this.multiDeselectEnabledHoverText : this.multiDeselectDisabledHoverText;
  }

  onSelectItemsButton() {
    this.itemsSelected.emit(this.itemsToSelect);
  }


  onDeselectItemsButton() {
    this.itemsDeselected.emit(this.itemsToDeselect);
  }

  onActionOutput(selected: any) {
    switch (selected.actionName) {
      case 'select':
        this.itemsSelected.emit([selected.row]);
        break;
      case 'deselect':
        this.itemsDeselected.emit([selected.row]);
        break;
    }
  }
}