import React from 'react';
import classNames from 'classnames';
import { FOLDER_OPEN_STATE } from '../../../../core/constants';
import { OpenFolder as OpenFolderIcon, CloseFolder as CloseFolderIcon } from '../Icons/Folder';
import './index.less';
import { SYMBOL_WIDTH } from '../constants';
export var FolderName = function FolderName(props) {
  var position = props.position,
      name = props.name,
      cover = props.cover,
      disabled = props.disabled,
      openedState = props.openedState,
      onNodeClick = props.onNodeClick;
  var closed = openedState === FOLDER_OPEN_STATE.CLOSED;
  var notActiveChildrenCollapsed = openedState === FOLDER_OPEN_STATE.OPEN_ACTIVE_CHILDREN_ONLY;
  var iconPositionX = position.x + 3;
  var iconPositionY = position.y + (closed ? -16 : -17);
  var nameWidth = name.length * SYMBOL_WIDTH;
  var icon = closed ? React.createElement(CloseFolderIcon, {
    x: iconPositionX,
    y: iconPositionY,
    height: 14,
    width: 14,
    fill: !disabled ? '#1890ff' : '#ccc'
  }) : React.createElement(OpenFolderIcon, {
    x: iconPositionX,
    y: iconPositionY,
    height: 15,
    width: 15,
    fill: !disabled ? '#1890ff' : '#ccc'
  });
  return React.createElement("g", {
    className: 'FolderNode',
    onClick: onNodeClick
  }, cover ? React.createElement("rect", {
    x: position.x + 2,
    y: position.y - 16,
    width: 16,
    height: 15,
    className: 'NodeText-cover'
  }) : null, cover ? React.createElement("rect", {
    x: position.x + 20,
    y: position.y - 16,
    width: nameWidth,
    height: 15,
    className: 'NodeText-cover'
  }) : null, closed ? React.createElement("polyline", {
    points: [iconPositionX - 1, iconPositionY + 17, iconPositionX + 16, iconPositionY + 17].join(', '),
    strokeDasharray: "2",
    className: classNames('NodeIcon-folder-line', {
      'NodeIcon-folder-line-disabled': disabled
    })
  }) : null, icon, notActiveChildrenCollapsed ? React.createElement("g", null, React.createElement("rect", {
    x: position.x + 6,
    y: position.y - 6,
    width: 11,
    height: 4,
    className: 'Folder-collapsed-children-rect'
  }), React.createElement("text", {
    x: position.x + 7,
    y: position.y - 3,
    className: 'Folder-collapsed-children-text'
  }, "..")) : null, React.createElement("text", {
    x: position.x + 20,
    y: position.y - 3,
    className: classNames('NodeText-folder-name', {
      'NodeText-folder-name-disabled': disabled
    })
  }, name));
};