import { Component, Input, Output, EventEmitter, ElementRef, forwardRef, ExistingProvider, OnChanges, AfterViewInit } from '@angular/core';
import { InputBase } from './inputBase';
import { ScriptLoaderService } from '../../library/script-loader.service';
import { StyleLoaderService } from '../../library/style-loader.service';

const provider: ExistingProvider = { provide: InputBase, useExisting: forwardRef(() => InputSelectScroll) }

export type Displays = "center" | "inline" | "bubble" | "top" | "bottom";
export type Animates = "pop" | "fade" | "flip" | "swing" | "slidevertical" | "slidehorizontal" | "slidedown" | "slideup";

export type DefaultButtons = "set" | "cancel" | "clear";
export type ICustomButtons = { text: string, handler: Function };
export type Buttons = DefaultButtons | ICustomButtons;

export type WheelsData = "string" | { value: any, display: any };
export type Wheels = { label: string, data: Array<WheelsData> };

export interface ISelectScrollSettings {
  animate: Animates;
  display: Displays;
  rows: number;
  buttons: Array<Buttons>; // string -> 'set', 'cancel', 'clear' | {text:'', handler:()=>{}}
  width: number;
  height: number;
  setText: string;
  cancelText: string;
  clearText: string;
  headerText: string;
  readonly: boolean;
  disabled: boolean;
  showLabel: boolean;
  wheels: Array<Array<Wheels>>; // Array<string> | Array<{value:any, display:any}>
  onSet: Function,
  onChange: Function
}

@Component({
  selector: "rd-input-select-scroll",
  template: `
    <input id="select-scroll" type="text" style="height:26px;border:1px solid #ddd;border-radius:4px"/>
  `,
  providers: [provider]
})
export class InputSelectScroll extends InputBase implements OnChanges, AfterViewInit {
  constructor(private element: ElementRef, private _script: ScriptLoaderService, private _style: StyleLoaderService) {
    super();
    this._style.load(["./assets/css/animation.min.css"]);
    this._style.load(["./assets/css/frame.min.css"]);
    this._style.load(["./assets/css/frame_ios.min.css"]);
    this._style.load(["./assets/css/scroller.min.css"]);
    this._style.load(["./assets/css/scroller_ios.min.css"]);

    let promise2 = this._script.load(["./assets/js/dom.min.js"]);
    let promise1 = this._script.load(["./assets/js/core.min.js"]);
    let promise6 = this._script.load(["./assets/js/scrollview.min.js"]);
    let promise3 = this._script.load(["./assets/js/frame.min.js"]);
    let promise4 = this._script.load(["./assets/js/frame_ios.min.js"]);
    let promise5 = this._script.load(["./assets/js/scroller.min.js"]);

    Promise.all([promise1, promise2, promise3, promise4, promise5, promise6]).then(() => {
      this.render();
    })
  }

  @Input("rd-model") model: any;
  @Output("rd-modelChange") modelChange: EventEmitter<any> = new EventEmitter<any>();
  @Output("rd-change") changeEvent: EventEmitter<any> = new EventEmitter<any>();

  @Input('rd-settings') settings: ISelectScrollSettings;

  instance;
  container;
  baseSettings = {
    theme: "ios",
    display: "center",
    lang: "tr",
    animate: "pop",
    onSet: (e, i) => this.modelChange.emit(e.valueText),
    onChange: (e, i) => this.changeEvent.emit(e.valueText)
  };

  ngOnChanges(changes) {
    if (!this.instance) return;

    if (changes.settings) this.render();
    if (changes.model) {
      this.container.mobiscroll('setVal', this.model);

      /** for value -> display on input */
      let spltModel = this.model.split(" ");
      let displayValue = "";

      for (let i = 0; i < this.settings.wheels[0].length; i++) {
        let wheelData = this.settings.wheels[0][i].data;

        if (typeof wheelData[0] == "string") {
          displayValue += spltModel[i];
        }
        else if (typeof wheelData[0] == "object") {
          let wheelDataItem = wheelData.filter((item) => item["value"] == spltModel[i])[0];
          displayValue += wheelDataItem["display"];
        }

        if (i != this.settings.wheels[0].length - 1) displayValue += " ";
      }
      this.container.val(displayValue);
    }
  }

  ngAfterViewInit() {
    this.container = this.jQuery(this.element.nativeElement).find("#select-scroll");
  }

  render() {
    this.container.mobiscroll().scroller({ ...this.baseSettings, ...this.settings });
    this.instance = this.jQuery('#select-scroll').mobiscroll('getInst');
  }
}