import { Component, Input, Output, ElementRef, EventEmitter, AfterViewInit } from '@angular/core';
import { RdComponent } from '../../base/rdComponent';
import { RdLib } from '../../base/rdLib';
import { StyleLoaderService } from "../../library/style-loader.service";
import { ScriptLoaderService } from "../../library/script-loader.service";

export interface IDualListItem {
  id: string;
  text: string;
}

@Component({
  selector: 'rd-dual-list',
  template: `
    <select multiple="multiple" size="10" name="dualList">
      <option [value]="item.id" *ngFor="let item of list">{{item.text}}</option>
    </select>
    <br/>
    <div class="text-center">
      <rd-button [rd-text]=" RdLib.localization.translateEn('Submit')" rd-color="green" rd-icon="fas fa-save" (rd-click)="outputEmit()"></rd-button>
    </div>
  `
})
export class DualList extends RdComponent implements AfterViewInit {
  constructor(private element: ElementRef, private style: StyleLoaderService, private script: ScriptLoaderService) {
    super();
    this.style.load(["./assets/css/duallistbox.min.css"]);
    this.script.load(["./assets/js/duallistbox.min.js"]);
  }

  @Input("rd-list") list: Array<IDualListItem> = [];

  @Output("rd-input") input: EventEmitter<any> = new EventEmitter();
  @Output("rd-output") output: EventEmitter<any> = new EventEmitter();

  RdLib = RdLib;

  container;

  ngAfterViewInit() {
    this.container = this.jQuery(this.element.nativeElement).find('select[name="dualList"]').bootstrapDualListbox();
  }

  outputEmit() {
    let outputIDs = this.jQuery(this.container).val(); // always Array<string>;

    if (typeof this.list[0]["id"] === "number") {
      outputIDs = outputIDs.map((item) => { return parseInt(item) });
    }

    let remainingItems = this.list.filter((item) => { return !outputIDs.includes(item["id"]) });
    let remainingIDs = [];

    remainingItems.map((item) => { remainingIDs.push(item["id"]) });

    this.input.emit(remainingIDs);
    this.output.emit(outputIDs);
  }
}