import React, { memo } from 'react';
import { Popconfirm, Tooltip } from '@easyv/antd';
import { SortableElement, SortableHandle } from 'react-sortable-hoc';
import EditableText from './EditableText';
import styles from './CategoryItem.less';
import classNames from 'classnames';
import { DragPointOutlined } from '@easyv/react-icons';

const DragHandle = SortableHandle(() => (
  <Tooltip title="拖拽排序">
    <span className={styles.iconContainer + ' ' + styles.sort}>
      <DragPointOutlined className={styles.icon} />
    </span>
  </Tooltip>
));

const CategoryItem = SortableElement(({ id, name, onUpdate, onDelete }) => {
  const handleOk = (value) => {
  id &&  onUpdate({
      id,
      name: value
    });
  };

  return (
    <li className={styles.container}>
      <DragHandle />

      <EditableText text={name} onOk={handleOk} />

      <Popconfirm placement="top" title="此分类下若含有组件，分类删除后组件将被移入「通用」分类下" onConfirm={() => onDelete(id)}>
        <span className={styles.iconContainer}>
          <i className={classNames('icon iconfont icon-btn_delete ' + styles.icon)} />
        </span>
      </Popconfirm>
    </li>
  );
});

export default memo(CategoryItem);
