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 { TreeSelect as NextTreeSelect } from '@alifd/next';
import { TreeSelectProps as NextTreeSelectProps } from '@alifd/next/types/tree-select';
import { getTheme } from '../utils/getTheme';

interface TreeSelectProps extends NextTreeSelectProps, CommonThemeProps {
}
class TreeSelect extends Component<TreeSelectProps> {
  static Node = Tree.Node;

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

  render() {

    const theme = getTheme(this.context, this.props);
    const { prefix = 'next-', popupClassName, className, treeProps = {}, ...otherProps } = this.props;
    const { isNodeBlock, showLine, ...otherTreeProps } = treeProps;
    // const defaultPaddingLeft = typeof isNodeBlock === 'object' ? parseInt(isNodeBlock.defaultPaddingLeft || 16) : 16;
    // const indent = typeof isNodeBlock === 'object' ? parseInt(isNodeBlock.indent || 20) : 20;
    let defaultPaddingLeft = 16;
    let indent = 20;
    if (typeof isNodeBlock === 'object') {
      const nodeBlock: any = isNodeBlock;
      defaultPaddingLeft = parseInt(nodeBlock.defaultPaddingLeft || 16);
      indent = parseInt(nodeBlock.indent || 20);
    }
    if (!showLine) {
      return (
        <NextTreeSelect {...otherProps}
          prefix={prefix}
          treeProps={{
            isNodeBlock: isNodeBlock ? { defaultPaddingLeft, indent } : false,
            ...treeProps,
          }}
          className={cls(className, {
            [`${prefix}white`]: theme === 'white',
            [`${prefix}grey`]: theme === 'grey',
          })}
          popupClassName={cls(popupClassName, {
            [`${prefix}white`]: theme === 'white',
            [`${prefix}grey`]: theme === 'grey',
          })} />
      );
    }
    return (
      <NextTreeSelect {...otherProps}
        prefix={prefix}
        treeProps={{
          showLine,
          ...otherTreeProps,
        }}
        className={cls(className, {
          [`${prefix}white`]: theme === 'white',
          [`${prefix}grey`]: theme === 'grey',
        })}
        popupClassName={cls(popupClassName, {
          [`${prefix}white`]: theme === 'white',
          [`${prefix}grey`]: theme === 'grey',
        })} />
    );

  }
}

// hoistNonReactStatics(Tree, NextTree);

export default ConfigProvider.config(TreeSelect);