import { Component, ComponentProps, Event,Target,  getRPX, console, setTimeout } from "waft";
import { JSON, JSONObject } from "waft-json";
import { lodash } from "waft-ui-common";

const itemHeight: i64 = 60; // 选项高度

class Bundle extends Target {
  target: Picker
  props: JSONObject
  constructor(target: Picker, props: JSONObject) {
    super();
    this.target = target;
    this.props = props;
  }
}
export class Picker extends Component {
  index: i64;
  startY: i64;
  endY: i64;
  currentProps: string = '';
  isInit: boolean = false;
  initCount:i64 = 0;
  constructor(props: ComponentProps) {
    super(props);
  }

  willMount(props: JSONObject): void {
    console.log('willMount--willMount--');
    this.setInit(props);
  }
  // didMount(): void {
  //   this.setScrollTop((this.index * itemHeight) as i64);
  // }
  setInit(props: JSONObject): void{
    console.log('--setInit--: '+this.isInit.toString());
    if(this.isInit || this.initCount > 10) return;
    this.initCount = this.initCount + 1;
    this.initOptions(props);
    const bundle = new Bundle(this, props);
    
    setTimeout((_, _bundle) => {
      const _this = (_bundle as Bundle).target;
      _this.setInit((_bundle as Bundle).props);
    }, 100, bundle);
  }
  deriveDataFromProps(props: JSONObject): void {
    if(this.currentProps !== props.toString()){
      this.initOptions(props);
      console.log(this.currentProps+'column-deriveDataFromProps: ' + props.toString());
    }
  }
  initOptions(props:JSONObject): void{
    this.currentProps = props.toString();

    if (!props.has("options")) {
      throw new Error("Picker component props 'pickerData' is necessary.");
    }
    // 添加前后两个空格
    let optionsTmp = props.getArray("options");
    let optionsArray: Array<string> = [];
    optionsArray.push("");
    optionsArray.push("");
    for(let i=0;i<optionsTmp.length;i++){
      optionsArray.push((optionsTmp.value[i]).toString());
    }
    optionsArray.push("");
    optionsArray.push("");
    let stateData: JSONObject = new JSONObject();
    stateData.set("optionsArray", optionsArray);
    this.setState(stateData);
    
    this.index = lodash.getInt(props, "index", 0 as i64);

    console.log(this.index.toString()+' this.index===');
    this.setScrollTop((this.index * itemHeight) as i64);
  }
  /* 
    根据index设定scrollTop
  */
  setScrollTop(scrollTop: i64): void {
    console.log("定点scrollTop"+ scrollTop.toString());
    
    let stateData: JSONObject = new JSONObject();
    stateData.set("scrollTopValue", scrollTop.toString() + "rpx");
    this.setState(stateData);
  }

  /* 
    根据当前下标和y滑动距离确定滑动后的下标
   */
  updateIndex(): void {
    // 先把scrollTop设为当前endY，否则滑动距离太小导致选项不改变时无法触发
    this.setScrollTop(this.endY);
    const diff = this.endY - this.startY;
    // console.log(diff.toString());

    const index = (this.endY as f64) / (itemHeight as f64);
    const findex = Math.round(index as f64);
    this.index = findex as i64;

    console.log('+++index  ' + findex.toString());
    

    // const res = diff / itemHeight;
    // const rem = diff % itemHeight;
    // if (diff == 0) return;
    // if (diff > 0) {
    //   if (rem >= itemHeight / 2) {
    //     this.index += res + 1;
    //   } else {
    //     this.index += res;
    //   }
    // } else {
    //   if (-rem >= itemHeight / 2) {
    //     this.index += res - 1;
    //   } else {
    //     this.index += res;
    //   }
    // }
    // console.log("定位下标"+this.index.toString());
    
    // 处理数组越界（scrollend未触发时会造成这个问题）
    // if (this.index < 0) {
    //   this.index = 0;
    // } else if (
    //   this.index >
    //   this.props.attributes.getArray("optionsArray").length - 5
    // ) {
    //   // 减5是因为前后4个空项
    //   this.index = this.props.attributes.getArray("optionsArray").length - 5;
    // }
  }

  onscrollstart(e: Event): void{
    console.log("==== onscrollstart事件 ====");
    //   console.log(event.toString());
    this.startY = e
      .toJSONObject()
      .getObject("detail")
      .getObject("contentOffset")
      .getInteger("y");
    this.startY = getRPX(this.startY);
    console.log("==== 起始y值 ==== " + this.startY.toString());
  }

  onscroll(e: Event): void{
    this.isInit = true;
    console.log("==== onscroll事件 ====");
    console.log(e.toString());
  }

  onscrollend(e: Event): void{
    console.log("==== onscrollend事件 ====");
    //   console.log(event.toString());
    this.endY = e
      .toJSONObject()
      .getObject("detail")
      .getObject("contentOffset")
      .getInteger("y");
    // 将px转化为rpx
    this.endY = getRPX(this.endY);
    console.log("==== 结束y值 ==== " + this.endY.toString());

    // 根据滑动距离计算下标
    this.updateIndex();
    // 根据下标定点（设置scrollTop）
    this.setScrollTop(this.index * itemHeight);
    // 触发change事件
    let reData: JSONObject = new JSONObject();
    reData.set("index", this.index);
    reData.set(
      "value",
      this.getDeepMergeState().getArray("optionsArray").value[(this.index as i32) + 2]
    );
    reData.set(
      "column-index",
      this.props.attributes.getInteger("column-index")
    );
    //   reData.set("value",_this.getState().getArray("options").value[_this.index as i32])
    this.props.dispatch("onChange", reData);
  }
}