import ConfigProvider from '../config-provider';
import React, { Component } from 'react';
import cls from 'classnames';
import hoistNonReactStatics from 'hoist-non-react-statics';
import { Tree as NextTree } from '@alifd/next';
import { TreeProps as NextTreeProps } from '@alifd/next/types/tree';

interface TreeProps extends NextTreeProps {
  type?: 'document' | 'normal';
  size?: 'medium' | 'small'
}


class Tree extends Component<TreeProps> {
  static Node = NextTree.Node;

  render() {
    const { prefix = 'next-', className, isNodeBlock, size = 'medium', type = '', showLine } = this.props;
    let defaultPaddingLeft = 16;
    let indent = type === 'document' ? 16 : 20;
    if (typeof isNodeBlock === 'object') {
      const nodeBlock: any = isNodeBlock;
      defaultPaddingLeft = parseInt(nodeBlock.defaultPaddingLeft || 16);
      indent = type === 'document' ? parseInt(nodeBlock.indent || 16) : parseInt(nodeBlock.indent || 20);
    }
    // 带线条模式
    if (type === 'document') {
      return (
        <NextTree {...this.props} isNodeBlock={isNodeBlock ? { defaultPaddingLeft, indent } : false} prefix={prefix} className={cls(className, {
          [`${prefix}small`]: size === 'small',
          [`${prefix}medium`]: size === 'medium',
          [`${prefix}document`]: type === 'document',
        })} />
      );

    }
    if (!showLine) { // 三角模式
      return <NextTree {...this.props} isNodeBlock={isNodeBlock ? { defaultPaddingLeft, indent } : false} prefix={prefix} className={cls(className, {
        [`${prefix}small`]: size === 'small',
        [`${prefix}medium`]: size === 'medium',
      })} />;

    }
    return <NextTree {...this.props} prefix={prefix} className={cls(className, {
      [`${prefix}small`]: size === 'small',
      [`${prefix}medium`]: size === 'medium',
    })} />;
  }
}

hoistNonReactStatics(Tree, NextTree);

export default ConfigProvider.config(Tree);