/// <reference path="./definition.d.ts" />

import * as React from 'react';
import view from './view';
// import classNames from 'classnames';
// import { setTranslate } from '../util/transform';
import PickerCore from '../picker/core';

class Picker extends React.Component<TspComponentPickerProps, any> {
  constructor(props: TspComponentPickerProps, state: any) {
    super(props, state);
    this.onPanStart = this.onPanStart.bind(this);
    this.onPan = this.onPan.bind(this);
    this.onPanEnd = this.onPanEnd.bind(this);
    this.onOk = this.onOk.bind(this);
    this.onCancel = this.onCancel.bind(this);
    this.onOpen = this.onOpen.bind(this);
    this.onTransitionEnd = this.onTransitionEnd.bind(this);
  }

  public static defaultProps: TspComponentPickerProps = {
    id: '',
    cascade: false,
    defaultValue: undefined,
    data: undefined,
    // defaultLabel: '请选择'
  };

  /**
   * PickerCore实例
   */
  private core: PickerCore;
  /**
   * 触发transitionEnd的timeout返回对象
   */
  private transitionEndTimeout: number;

  public componentDidMount(): void {
    const data = [];
    for (let i = 0; i < this.props.data.length; i++) {
      data[i] = [];
      for (let j = 0; j < this.props.data[i].length; j++) {
        data[i].push(this.props.data[i][j]);
      }
    }
    this.core = new PickerCore({
      data,
      id: this.props.id,
      cascade: this.props.cascade,
      defaultValue: this.props.defaultValue,
      onOk: this.props.onOk,
      defaultLabel: this.props.defaultLabel,
      sliderElem: this.refs.slider as HTMLElement,
      containerElem: this.refs.container['elem'] as HTMLElement,
      labelElem: this.refs.label as HTMLElement,
      formatLabel: this.props.formatLabel,
      required: this.props.required
    });
    this.core.init();
    this.core.sliderElem.addEventListener('webkitTransitionEnd', this.onTransitionEnd);
  }

  public componentWillReceiveProps(nextProps: TspComponentDatePickerProps): void {
    this.core.componentWillReceiveProps(this.props, nextProps);
  }

  // public componentDidUpdate(nextProps) {

  // }

  /**
   * 开始拖动
   */
  public onPanStart(evt: TspComponentSliderEvt): void {
    evt.preventDefault();
    this.core.panStart(evt);
  }

  /**
   * 拖动中
   */
  public onPan(evt: TspComponentSliderEvt): void {
    evt.preventDefault();
    this.core.pan(evt);
  }

  /**
   * 拖动结束后
   */
  public onPanEnd(evt: TspComponentSliderEvt): void {
    evt.preventDefault();
    this.core.panEnd(evt);
    if (this.core.isPanEnd) {
      this.transitionEndTimeout = setTimeout(() => {
        if (!this.core.isTransitionEnd) {
          this.onTransitionEnd();
        }
      }, 300);
    }
  }

  /**
   * 监听translate完成事件
   */
  public onTransitionEnd(): void {
    this.core.transitionEnd(this.transitionEndTimeout);
  }

  /**
   * 确定
   */
  public onOk(): void {
    this.core.ok();
  }
  /**
   * 取消
   */
  public onCancel(): void {
    this.core.cancel();
  }

  /**
   * 打开
   */
  public onOpen(): void {
    if (!this.props.disabled) {
      this.core.open();
    }
  }

  public render(): JSX.Element {
    return view(this);
  }
}

export default Picker;