/**
 * list API 文档
 * props             默认值                  说明
 * offset            40 <number>            距离底部多少触发 load 事件 ✅
 * loadingText       加载中<string>          加载中的文字  ✅
 * finishedText      没有更多内容了呢<string>  加载完的文字 ✅
 * errorText         出错了呢 <string>        加载出错的文字 ✅
 * immediate    true <boolean>         是否在初始化时立即调用 onLoad ✅
 * direction         column <string>          滚动方向, 默认向下, 支持 column | row ✅
 *
 * list 事件文档
 * 事件名             说明
 * load              加载的回调函数, (callback) => callback(data: JSONObject, event: CallbackEvent)   ✅
 *                   data = { loading: false, finished: false, error: false, errorText: '优先级大于 props' }
 *
 * slots 文档
 * 名称               说明
 * default           列表的内容
 * loading           自定义 loading 加载中的提示  ⚠️ 优先级问题, 具名插槽没有默认值
 * finished          自定义加载完后的文案提示 ⚠️ 优先级问题, 具名插槽没有默认值
 * error             自定义加载失败后的文案提示 ⚠️ 优先级问题, 具名插槽没有默认值
 */

import { Component, ComponentProps, console, Target, customElements } from 'waft';
import { JSONObject, JSON } from 'waft-json';
import { lodash, CallbackEvent } from 'waft-ui-common';

export class List extends Component {
  constructor(props: ComponentProps) {
    super(props);
    // scrollDirection="horizontal"

    this.addEventListener('onScrollToLower', (event, target) => {
      const _this = target as List;
      _this.callLoad();
    });
  }

  willMount(props: JSONObject): void {
    console.log('====### props 是' + props.toString());
    // 判断是否需要立即调用一次 load 事件回调
    const immediate = lodash.get(props, 'immediate', true);
    if (immediate) {
      this.callLoad();
    }
  }

  callLoad(): void {
    // 如果已经加载完毕, 不再进行加载
    if (lodash.get(this.state, 'finished', false)) {
      return;
    }
    // 如果父级有传 load 事件, 在进行回调
    if (this.props.attributes.has('onLoadmore')) {
      if(!customElements.hasReactiveElement(this.parentNodeId)){
        console.error('dispatchEventToParent error, no such parent component:' + this.parentNodeId.toString());
        return;
      }
      const parentElement = customElements.getReactiveElement(this.parentNodeId);

      this.setState(JSON.parseObject(`{ "loading": true, "error": false }`));
      let eventName = '';
      if(this.props.attributes.has('onLoadMore')){
        eventName = this.props.attributes.get('onLoadMore').toString();
      }
      // 因为不支持闭包, 所以通过这种方式传递 this 对象与 接收 loading finished 等参数
      const event = new CallbackEvent({
        type: eventName,
        target: this,
        data: new JSONObject(),
        callback: (thisArg: CallbackEvent, data: JSONObject = new JSONObject()) => {
          const _this = thisArg.that as List;
          const state = new JSONObject();
          state.set('loading', lodash.get(data, 'loading', false));
          state.set('finished', lodash.get(data, 'finished', false));
          state.set('error', lodash.get(data, 'error', false));

          // 修改文案
          state.set('loadingText', lodash.get(data, 'loadingText', lodash.get(_this.props.attributes, 'loadingText', '加载中')));
          state.set('finishedText', lodash.get(data, 'finishedText', lodash.get(_this.props.attributes, 'finishedText', '没有更多内容了呢')));
          state.set('errorText', lodash.get(data, 'errorText', lodash.get(_this.props.attributes, 'errorText', '出错了呢')));

          console.log('====### state is :: ' + state.toString());
          _this.setState(state);
        }
      });
      parentElement.dispatchEvent(event);
    }
  }
}