/**
 * cell 组件 API 文档
 * props             default                说明
 * size              normal<string>         组件的尺寸,支持 normal | small , normal标准120rpx高度, small标准81rpx高度 ✅
 * title             - <string>             cell 左侧的标题 ✅
 * icon              - <string>             最前面的 icon 图标, 只接受 图片
 * label             - <string>             cell 左侧的 label 介绍文本 ✅
 * value             - <string>             cell 右侧的内容, 只设置 value 会左对齐 ✅
 * align             right<string>          cell 右侧内容的对齐方式, 支持 right | left ✅
 * center            true <boolean>         cell 的内容是否居中 ✅
 * isLink            false<boolean>         是否显示箭头, 默认右箭头, 配合 arrow-direction 控制箭头方向 ✅
 * arrowDirection    right<string>          箭头显示方向, 需配合 isLink 使用,单独设置无效 ✅
 * url               - <string>             进行跨应用跳转 ✅
 * to                - <string>             进行路由跳转 ✅
 * border            true<boolean>          是否显示内边框 ✅
 * borderColor
 * titleStyle        - <string>             cell 左侧的标题额外样式 ⚠️ 不支持完整传入
 * titleClass        - <string>             cell 左侧的标题额外类名 ⚠️ 不支持完整传入
 * valueStyle        - <string>             cell 右侧内容额外样式 ⚠️ 不支持完整传入
 * valueClass        - <string>             cell 右侧内容额外类名 ⚠️ 不支持完整传入
 * labelStyle        - <string>             cell 左侧 label 额外样式 ⚠️ 不支持完整传入
 * labelClass        - <string>             cell 左侧 label 额外类名 ⚠️ 不支持完整传入
 * labelWidth        0 <number>             cell 左侧部分的宽度, 0 自适应 ✅
 * titleColor        - <string>             介于上面不支持, 暂列高频修改的样式 ✅
 * titleWeight       - <string>             介于上面不支持, 暂列高频修改的样式 ✅
 * labelColor        - <string>             介于上面不支持, 暂列高频修改的样式 ✅
 * valueColor        - <string>             介于上面不支持, 暂列高频修改的样式 ✅
 *
 * cell 组件事件 API 文档
 * 事件名             说明                    回调参数
 * onTap             点击单元格触发            event: Event ✅
 *
 * cell 组件 slots API 文档
 * 名称               说明
 * default           自定义右侧 value 的内容, props 优先级更高 ✅
 * icon              自定义左侧 icon 的内容, props 优先级更高 ✅
 * title             自定义左侧 title 的内容, props 优先级更高 ✅
 * label             自定义标题下方 label 的内容, props 优先级更高 ✅
 * extra             自定义单元格最右侧的额外内容, props 优先级更高 ✅
 *
 *
 */

import { Component, ComponentProps, window, history, Event } from 'waft';
import {JSONObject, JSONValue} from 'waft-json';
import { lodash } from 'waft-ui-common';

class DataSet {
  keys: Array<string> = new Array(0);
  detailKeys: Array<string> = new Array(0);
  detail: JSONObject = new JSONObject();
  constructor(props: JSONObject = new JSONObject()) {
    const keys = props.value.keys();
    if (keys.length) {
      for (let i = keys.length - 1; i >= 0; i--) {
        const key: string = keys[i];
        if (key.startsWith('data-')) {
          this.keys.push(key);
          const detailKey = this.detailKey(key, 'data-');
          this.detailKeys.push(detailKey);
          this.detail.set(detailKey, props.get(key));
        }
      }
    }
  }

  detailKey(source: string, splitStr: string): string {
    return source.replace(splitStr, '');
  }
}

export class Cell extends Component {
  dataset: DataSet = new DataSet();
  parentNodeID: string = '';
  componentProps: JSONObject = new JSONObject();
  constructor(props: ComponentProps) {
    super(props);
  }

  willMount(props: JSONObject): void {
    // 获取父组件的 nodeId
    this.parentNodeID = lodash.bus.get('cellGroupNodeId');
    this.componentProps = props;
    // 处理 props 带的自定义数据
    this.detailCustomProps(props);

    // 从 cell-group 接收 labelWidth 等参数
    if (this.parentNodeID !== '') {
      lodash.bus.on('cellChannel' + this.parentNodeID, (data, target) => {
        const _this = target as Cell;
        console.log('====### data is ' + data.toString());
        const state = new JSONObject();
        /**
         if (props.has('cellLabelColor')) {
      data.set('cellLabelColor', lodash.get(props, 'cellLabelColor', ''));
    }
         if (props.has('cellValueColor')) {
      data.set('cellValueColor', lodash.get(props, 'cellValueColor', ''));
    }
         */
        if (!_this.componentProps.has('size')) {
          state.set('size', lodash.get(data as JSONObject, 'size', 'normal'));
        }
        if (!_this.componentProps.has('align')) {
          state.set('align', lodash.get(data as JSONObject, 'align', 'right'));
        }
        if (!_this.componentProps.has('center')) {
          state.set('center', lodash.get(data as JSONObject, 'center', true));
        }
        if (!_this.componentProps.has('cellBorder')) {
          state.set('border', lodash.get(data as JSONObject, 'cellBorder', true));
        }
        if (!_this.componentProps.has('labelWidth') && (data as JSONObject).has('labelWidth')) {
          state.set('labelWidth', lodash.get(data as JSONObject, 'labelWidth', 0 as i64));
        }
        if (!_this.componentProps.has('titleColor') && (data as JSONObject).has('cellTitleColor')) {
          state.set('titleColor', lodash.get(data as JSONObject, 'cellTitleColor', ''));
        }
        if (!_this.componentProps.has('titleWeight') && (data as JSONObject).has('cellTitleWeight')) {
          state.set('titleWeight', lodash.get(data as JSONObject, 'cellTitleWeight', ''));
        }
        if (!_this.componentProps.has('labelColor') && (data as JSONObject).has('cellLabelColor')) {
          state.set('labelColor', lodash.get(data as JSONObject, 'cellLabelColor', ''));
        }
        if (!_this.componentProps.has('valueColor') && (data as JSONObject).has('cellValueColor')) {
          state.set('valueColor', lodash.get(data as JSONObject, 'cellValueColor', ''));
        }
        _this.setState(state);
      }, this);
    }
  }

  onHandleClick(e: Event): void{
    // 应用内跳转
    let to: string = lodash.toString(this.props.get('to'));
    if (to != '') {
      // 地址前面加上 / 会跳转不成功, 这里手动处理一下
      if (to.startsWith('/')) {
        to = to.replace('/', '');
      }
      history.pushState({
        url: to,
        query: new JSONObject()
      });
      return;
    }
    // 跳其他应用
    const url: string = lodash.toString(this.props.get('url'));
    if (url != '') {
      window.open(url);
      return;
    }
    // 点击事件回调 - 因为 props 不会自动更新, 所以要先通过桥获取一遍最新的值, 然后将自定义的数据传递给事件回调
    this.getFreshCustomProps();
    this.props.dispatch('onTap', this.dataset.detail);
  }

  /**
   * 将自定义数据保存到 dataset
   * @param props
   */
  detailCustomProps(props: JSONObject): void {
    this.dataset = new DataSet(props);
  }

  /**
   * 获取最新的 dataset 并保存到 dataset 上
   */
  getFreshCustomProps(): void {
    console.log('===### 获取最新的 props 即将开始');
    if (this.dataset.keys.length) {
      for (let i = this.dataset.keys.length - 1; i >= 0; i--) {
        const key: string = this.dataset.keys[i];
        const value: JSONValue = this.props.get(key);
        this.dataset.detail.set(this.dataset.detailKeys[i], value);
      }
    }
    console.log('====### 获取最新的 props 结束');
  }

}