import React from "react";
import { Tree, Empty, Button } from "antd";
import MainLayout from "../../../layout/MainLayout";
import httpUtil from "../../../util/httpUtil";
import styles from "./index.module.less";
import { batchDelete, renderTreeNodes, onDrop } from "./function.js";
import AddModal from "./AddModal";

import * as action from "../../../redux/action/BookmarkTreeOverview";
import { connect } from "react-redux";

function mapStateToProps(state) {
  return state[action.DATA_NAME];
}

function mapDispatchToProps(dispatch) {
  return {
    updateTreeData: treeData => dispatch(action.updateTreeData(treeData)),
    setIsEdit: isEdit => dispatch(action.setIsEdit(isEdit)),
    addNode: (item, e) => dispatch(action.addNode(item, e)),
    editNode: (item, e) => dispatch(action.editNode(item, e)),
    changeIsInit: value => dispatch(action.changeIsInit(value)),
    changeCheckedKeys: (keys, nodes) => dispatch(action.changeCheckedKeys(keys, nodes)),
    changeExpandedKeys: keys => dispatch(action.changeExpandedKeys(keys))
  };
}

class OverView extends React.Component {
  /**
   * 初始化第一级书签
   */
  componentDidMount() {
    httpUtil
      .get("/bookmark/currentUser/path?path=")
      .then(res => {
        this.props.updateTreeData(res);
        this.props.changeIsInit(true);
      })
      .catch(() => this.props.changeIsInit(true));
  }

  /**
   * 异步加载
   */
  loadData = e =>
    new Promise(resolve => {
      const item = e.props.dataRef;
      const newPath = item.path + "." + item.bookmarkId;
      httpUtil.get("/bookmark/currentUser/path?path=" + newPath).then(res => {
        item.children = res;
        this.props.updateTreeData([...this.props.treeData]);
        resolve();
      });
    });

  /**
   * 节点选择
   * @param {*} key
   * @param {*} e
   */
  treeNodeSelect(key, e) {
    if (e.nativeEvent.delegateTarget && e.nativeEvent.delegateTarget.name === "copy") {
      return;
    }
    const { expandedKeys, changeExpandedKeys } = this.props;
    const item = e.node.props.dataRef;
    if (item.type === 0) {
      window.open(item.url);
    } else {
      const id = item.bookmarkId.toString();
      const index = expandedKeys.indexOf(id);
      index === -1 ? expandedKeys.push(id) : expandedKeys.splice(index, 1);
      changeExpandedKeys([...expandedKeys]);
    }
  }

  render() {
    const { isEdit, setIsEdit, treeData, addNode, isInit, expandedKeys, checkedKeys } = this.props;
    const { changeExpandedKeys } = this.props;
    return (
      <MainLayout>
        <div className={styles.main}>
          <div className={styles.header}>
            <div className={styles.left}>
              <span className={styles.myTree}>我的书签树</span>
              {isEdit ? <Button size="small" type="primary" icon="plus" shape="circle" onClick={addNode.bind(this, null)} /> : null}
              {expandedKeys.length > 0 ? (
                <Button type="primary" size="small" onClick={changeExpandedKeys.bind(this, [])}>
                  收起
                </Button>
              ) : null}
            </div>
            <div className={styles.right}>
              {isEdit ? (
                <React.Fragment>
                  <Button size="small" type="danger" onClick={batchDelete.bind(this)}>
                    删除选中
                  </Button>
                </React.Fragment>
              ) : null}
              <Button size="small" type="primary" onClick={setIsEdit.bind(this, !isEdit)}>
                {isEdit ? "完成" : "编辑"}
              </Button>
            </div>
          </div>
          <Tree
            showIcon
            checkedKeys={checkedKeys}
            onCheck={this.props.changeCheckedKeys}
            expandedKeys={expandedKeys}
            loadData={this.loadData}
            onExpand={this.props.changeExpandedKeys}
            checkable={isEdit}
            onSelect={this.treeNodeSelect.bind(this)}
            draggable
            onDrop={onDrop.bind(this)}
            blockNode
          >
            {renderTreeNodes.call(this, treeData)}
          </Tree>
          {isInit && treeData.length === 0 ? <Empty description="还没有数据" /> : null}
          <AddModal />
        </div>
      </MainLayout>
    );
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(OverView);