import classNames from 'classnames';
import React, { useContext, useMemo, useState } from 'react';
import { Icon } from '../Icon';
import {
  ConfigProvider,
  TreeSelect as AntdTreeSelect,
  TreeSelectProps,
} from 'antd';
import './index.less';
import { TreeNodeProps } from 'rc-tree-select/lib/TreeNode';
import { AOP } from '../utils/AOP';
import { translate } from '../utils';

const TreeSelect = (props: TreeSelectProps) => {
  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
  const prefixCls = getPrefixCls('btri-tree-select');
  const { dropdownStyle, multiple, treeCheckable } = props;

  const [_dropdownVisible, _setDropdownVisible] = useState(false);

  const _onDropdownVisibleChange = new AOP<boolean, void>(
    props.onDropdownVisibleChange,
  )
    .before((v) => {
      _setDropdownVisible(v);
    })
    .getFunction();

  const newSuffixIcon = useMemo(() => {
    if (props.suffixIcon) {
      return props.suffixIcon;
    }
    return (
      <Icon
        iconName="Down"
        style={{
          fontSize: '16px',
          color: _dropdownVisible && 'var(--primary-6)',
          transform: _dropdownVisible && 'rotate(180deg)',
        }}
      ></Icon>
    );
  }, [_dropdownVisible]);

  const _dropdownStyle = useMemo(() => {
    return {
      padding: '4px',
      ...dropdownStyle,
    };
  }, [dropdownStyle]);

  const renderSwitchIcon = (switchProps: { expanded: boolean }) => {
    return (
      <Icon
        style={{ fontSize: '16px', color: 'var(--caption-font)' }}
        iconName={switchProps.expanded ? 'Down' : 'Right'}
      ></Icon>
    );
  };

  const { locale } = useContext(ConfigProvider.ConfigContext);
  return (
    <div className={classNames(`${prefixCls}-container`)}>
      <AntdTreeSelect
        showSearch
        allowClear
        // switcherIcon={switchProps => renderSwitchIcon(switchProps)}
        placeholder={translate(
          'packages.base.src.Cascader.index.请选择',
          locale.locale,
        )}
        {...props}
        className={classNames(`${prefixCls}`, props.className)}
        suffixIcon={newSuffixIcon}
        onDropdownVisibleChange={_onDropdownVisibleChange}
        dropdownStyle={_dropdownStyle}
        dropdownClassName={classNames(
          `${prefixCls}-dropdown`,
          props.dropdownClassName,
        )}
        style={{ width: '100%', ...props.style }}
      ></AntdTreeSelect>
      {(multiple || treeCheckable) && (
        <Icon
          iconName={_dropdownVisible ? 'Up' : 'Down'}
          className={classNames(`${prefixCls}-direction-icon`, {
            active: _dropdownVisible,
          })}
        ></Icon>
      )}
    </div>
  );
};

TreeSelect.TreeNode = (props: TreeNodeProps) => {
  const { TreeNode } = AntdTreeSelect;
  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
  const prefixCls = getPrefixCls('btri-tree-select-node');
  return (
    <TreeNode
      {...props}
      className={classNames(`${prefixCls}`, props.className)}
    ></TreeNode>
  );
};

export { TreeSelect };