import ConfigProvider from '../config-provider';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import Tree from '../tree';
import cls from 'classnames';
import { CommonThemeProps } from '../types';
import { Transfer as NextTransfer } from '@alifd/next';
import { TransferProps as NextTransferProps } from '@alifd/next/types/transfer';
import { getTheme } from '../utils/getTheme';

interface TransferProps extends NextTransferProps, CommonThemeProps {
  showTreeSelect?: boolean;
  showTable?: boolean;
  useVirtual?: boolean;
}

interface ITreeSelectState {
  selected: Array<any>;
}

const TreeNode = Tree.Node;

class Transfer extends Component<TransferProps, ITreeSelectState> {

  constructor(props) {
    super(props);

    this.state = {
      selected: [],
    };
  }

  static contextTypes = {
    theme: PropTypes.string,
  };

  render() {

    const { prefix = 'next-', className, mode, showTreeSelect, showTable, dataSource, ...otherProps } = this.props;

    const theme = getTheme(this.context, this.props);

    const { selected } = this.state;

    const handleChange = value => {
      this.setState({ selected: value });
    };

    const transferDataSource = [];

    const flatten = (list = []) => {
      list.forEach(item => {
        transferDataSource.push(item);
        flatten(item.children);
      });
    };


    // 处理tree的datasource
    const getTreeDataSource = (dataSource = [], value) => {
      return dataSource.map(({ children, ...props }) => (
        <TreeNode
          {...props}
          disabled={props.disabled || value.includes(props.value)}
          key={props.value}
        >
          {getTreeDataSource(children, value)}
        </TreeNode>
      ));
    };

    // 带tree的穿梭框
    if (showTreeSelect) {

      flatten(dataSource);

      return (
        <Transfer
          {...otherProps}
          theme={theme}
          mode={mode}
          dataSource={transferDataSource}
          onChange={handleChange}
          className = {cls(className, {
            [`${prefix}transfer-simple`]: mode === 'simple',
            [`${prefix}transfer-tree`]: true,
          })}
        >
          {({ position, onChange, value }) => {

            if (position === 'left') {
              return (
                <Tree
                  checkable
                  editable
                  style={{ padding: '10px' }}
                  checkedKeys={value}
                  onCheck={(keys, extra: any) => {
                    const newValues = extra.checkedNodes.map(
                      item => item.props.value,
                    );

                    onChange(position, newValues);
                  }}
                >
                  {getTreeDataSource(dataSource, selected)}
                </Tree>
              );
            }
          }}
        </Transfer>
      );
    }

    return (
      <NextTransfer
        {...this.props}
        listClassName = {cls(className, {
          [`${prefix}white`]: theme === 'white',
          [`${prefix}grey`]: theme === 'grey',
        })}
        className = {cls(className, {
          [`${prefix}white`]: theme === 'white',
          [`${prefix}grey`]: theme === 'grey',
          [`${prefix}transfer-simple`]: mode === 'simple',
          [`${prefix}transfer-table`]: showTable,
        })}
      />
    );
  }
}
export default ConfigProvider.config(Transfer);