import { Component, Input,OnInit, Output, EventEmitter } from '@angular/core'; 

@Component({
  selector: 'app-custom-header-datalist',
  templateUrl: 'custom-header-datalist.component.html',
  styleUrls: ['custom-header-datalist.component.scss']
})
export class CustomHeaderDatalistComponent implements OnInit {
  @Input() columns: any;
  @Input() columnIndex: number;
  @Input() mappedColumn: any;
  @Input() header: string;  // TODO: analyze how header it used in comparison to .name property
  @Output() headerChanged = new EventEmitter<any>();
  
  // Workaround to avoid users manually clear value in order to expand <datalist> and choose from available options
  // Used to temporarily store currentSelection value before cleaning control value (which should let users select from options)
  tempCurrentSelection: any; 
  currentSelection: any;
  mappedColumnIsRequired: boolean;
  mappedColumnType: string;
  mappedColumnId: number;
  mappedColumnAriaLabel: string = "";

  constructor() {}

  ngOnInit(): void {
    this.currentSelection = this.clearSelection();

    if (this.mappedColumn) {
      this.mapMatchedField(this.mappedColumn, false);
    } else {
      this.mapCurrentHeader();
    }

    if (this.mappedColumn && this.mappedColumn.name !== '') {
      this.currentSelection = this.mappedColumn.required ? this.formatRequiredColumnName(this.mappedColumn.name) : this.mappedColumn.name;
    } else {
      this.currentSelection = this.header ? this.header : '';
    }    
  }

  storeMappedValueInTemp() {
    this.tempCurrentSelection = this.currentSelection;
    this.currentSelection = "";

    this.mappedColumnAriaLabel = this.tempCurrentSelection === '' || this.tempCurrentSelection === '- -'
      ? `Please define mapping for Column ${this.columnIndex + 1} by typing custom or selecting option.`
      : `Column ${this.columnIndex + 1} will be mapped to ${this.tempCurrentSelection}.`;
  }

  restoreMappedValueFromTemp() {
    if (this.tempCurrentSelection !== '')
      this.currentSelection = this.tempCurrentSelection;
  }

  updateMapping() {
    this.tempCurrentSelection = '';

    if (this.currentSelection === null || this.currentSelection === '' || this.currentSelection === '- -') {
        this.clearMapping();
    } else {
      const matchedColumn = this.columns
        .find(c => c.name.toLowerCase() === this.unformatRequiredColumnName(this.currentSelection).toLowerCase());
      
      if (matchedColumn && typeof matchedColumn === 'object') {
        this.mappedColumn = matchedColumn;
        this.mapMatchedField(matchedColumn)
      } else {
        this.mapCustomField(this.columnIndex, this.currentSelection);
      }
    } 
  }

  /**
   * Clears the mapping of a particular field
   */
  clearMapping(): void {
    this.clearSelection();

    const mappedColumnItem = { 
      clear: true, 
      col: this.columnIndex 
    };

    this.customHeaderChange(mappedColumnItem);
    this.headerChanged.emit(mappedColumnItem);
  }

  /**
   * Triggered by clearMapping and sets field to default.
   */
  clearSelection(): string {
    this.mappedColumnIsRequired = false;
    this.mappedColumnAriaLabel = `Please define mapping for Column ${this.columnIndex + 1} by typing custom or selecting option.`;
    
    return (this.currentSelection = '- -');
  }

  /**
   * Set the mapping of a field to the clicked selection or entered custom field.
   * @param mappedColumn     is an Object containing currently select column information.
   * @param toggle  conditional boolean to toggle drop down selection.
   */
  mapMatchedField(mappedColumn: any, toggle: boolean = true): void {
    this.currentSelection = mappedColumn.required ? this.formatRequiredColumnName(mappedColumn.name) : mappedColumn.name;
    this.mappedColumnIsRequired = mappedColumn.required ? true : false;
    this.mappedColumnType = mappedColumn.type;
    this.mappedColumnId = mappedColumn.colId ? mappedColumn.colId : 0;
    
    this.mapCurrentHeader();
  }

  /**
   * Triggered by the user entering a custom field name and clicking map.
   * @param columnIndex  column number.
   */
  mapCustomField(columnIndex: number, customInput: string): void {
    let mappedColumn: any;

    if (customInput.length > 0) {
      mappedColumn = {
        col: columnIndex,
        name: customInput,
        required: false,
        type: 'Custom'
      };

      this.mapMatchedField(mappedColumn);
    }
  }
  
  /**
   * Triggered by updateMapping then maps current field and sends it to the mappingView for processing.
   */
  mapCurrentHeader(): void {
    const mappedColumn = {
      //name: this.currentSelection,
      name: this.unformatRequiredColumnName(this.currentSelection),
      custom: this.header,
      col: this.columnIndex,
      colId: this.mappedColumnId,
      required: this.mappedColumnIsRequired,
      type: this.mappedColumnType
    };

    this.customHeaderChange(mappedColumn);
    this.headerChanged.emit(mappedColumn);
  }
  
  customHeaderChange(item): void {
    if (item.type !== 'Custom' && this.currentSelection === item.name && item.col !== this.columnIndex)
      this.currentSelection = this.clearSelection();
  } 

  formatRequiredColumnName(columnName: string) {
    if (columnName && columnName.length > 0)
      return `* ${columnName}`;
    else 
    return columnName;
  }

  unformatRequiredColumnName(formattedColumnName: string) {
    if (formattedColumnName && formattedColumnName.length > 0)
      return formattedColumnName.replace("* ", "");
    else
      return formattedColumnName;
  }
}