/**
 * tab API文档
 * props              default          说明
 * tabs               []<array>        tabs 数据 ✅
 * tabKey             title <string>   tabs 数据中表示 title 的key ✅
 * activeTab          - <number>       当前激活的 tab 索引 ✅
 * swipeable          true<boolean>    tabs 内容是否可以拖拽 ✅
 *
 * 事件 api
 * 事件名              说明
 * change             tab 变化时触发 ✅
 *
 * refs API
 * name               说明
 * default            tab 的内容 ✅
 * left               标题部分的 left 部分 ✅
 * right              标题部分的 right 部分 ✅
 */

import {clearInterval, CustomEvent, Page, Props, Component, Event } from 'waft';
import { lodash } from 'waft-ui-common';
import {JSONArray, JSONInteger, JSONObject, JSON} from 'waft-json';

export class Tabs extends Component {
  index: i64 = 0;
  // data: Data = new Data();
  constructor(props: Props) {
    super(props);
    console.log('=============constructor-tab========================');
  }

  willMount(props: JSONObject):void {
    console.log('=============willMount-tab========================');
    this.index = lodash.get(props, 'activeTab', this.index);
    console.log(this.index.toString()+'this.index');
    this.changeIndex();
    console.log('===============willMount-tab======================');
  }

  didMount(): void{
    console.log('=============didMount-tab========================');
  }

  onChange(e: Event): void{
    const detail = e.toJSONObject().getObject('detail');
    const index = detail.getInteger('index');
    const newState = new JSONObject;
    newState.set('index', index);
    this.setState(newState);
    // _this.index = lodash.get((event as CustomEvent).detail, 'index', 0 as i64);
    // _this.changeIndex();
    console.log('=====change======');
    // _this.props.dispatch('onChange', (event as CustomEvent).detail);
  }

  onChangeTitle(e: Event): void{
    const _target = e.toJSONObject().getObject('target');
    let newState = new JSONObject();
    const dataset = _target.getObject('dataset');
    const index = dataset.getInteger('index');
    newState.set('index', index);
    console.log(e.toString()+'======event12======'+newState.toString()+ this.props.attributes.toString());
    this.setState(newState);
    console.log(this.props.attributes.toString()+'====attributes=====');
    if(this.props.attributes.has('onChange')){
      console.log('====dispatch=====');
      this.props.dispatch('onChange', dataset);
    }
  }

  onNext(e: Event): void{
    const _state = this.state;
    let newState = new JSONObject();
    const index = _state.getInteger('index');
    const tabs = this.props.attributes.getArray('tabs');
    console.log(tabs.length.toString()+'======tabs.length======'+((index + 1) % tabs.length).toString());
    newState.set('index', (index + 1) % tabs.length);
    console.log(e.toString()+'======event12======'+newState.toString()+ this.props.attributes.toString());
    this.setState(newState);
    console.log(this.props.attributes.toString()+'====attributes=====');
    if(this.props.attributes.has('onChange')){
      console.log('====dispatch=====');
      this.props.dispatch('onChange', newState);
    }
  }

  onPrev(e: Event): void{
    const _state = this.state;
    const index = _state.getInteger('index');
    const tabs = this.props.attributes.getArray('tabs');
    let newState = new JSONObject();
    newState.set('index', (tabs.length + index - 1) % tabs.length);
    this.setState(newState);
    console.log(this.props.attributes.toString()+'====attributes=====');
    if(this.props.attributes.has('onChange')){
      console.log('====dispatch=====');
      this.props.dispatch('onChange', newState);
    }
  }

  changeIndex(): void {
    // props 的 activeTab 优先级更改
    const state = new JSONObject();
    if (this.props.get('activeTab') instanceof JSONInteger) {
      state.set('index', lodash.toInteger(this.props.get('activeTab')));
    } else {
      state.set('index', this.index);
    }
    console.log(state.toString()+'===state===');
    this.setState(state);
  }
}

// class Data {
//   data: Array<DataItem> = new Array<DataItem>();
//
//   push(item: JSONObject): void {
//     this.data.push(new DataItem(item));
//     this.data.sort((a, b) => {
//       return a.index - b.index;
//     });
//   }
//
//   valueOf(): JSONArray {
//     const arr = new JSONArray();
//     for (let i = 0; i < this.data.length; i++) {
//       arr.push(this.data[i].valueOf());
//     }
//     return arr;
//   }
// }
// class DataItem {
//   name: string = '';
//   index: number = 0;
//   constructor(data: JSONObject) {
//     this.name = lodash.get(data, 'name', '');
//     this.index = lodash.get(data, 'index', 0 as i64);
//   }
//
//   valueOf(): JSONObject {
//     const obj = new JSONObject();
//     obj.set('name', this.name);
//     obj.set('index', this.index);
//     return obj;
//   }
// }