import React from 'react';
import classNames from 'classnames';
import EditableText from 'components/EditableText';
import DragTargetContainer from './DragTargetContainer';
import styles from './GroupMenu.less';
import EasyvModal, { useConfirmRef } from 'components/EasyvModal';

function spaceGroupItem({ id, index, active, name, isFirst, selectGroup, deleteGroup, updateGroup }) {
  // eslint-disable-next-line react-hooks/rules-of-hooks
  const deleteRef = useConfirmRef();

  const handleDrop = () => {
    //
  };

  const handleNameChange = (value) => {
    updateGroup({
      SpaceId: id,
      name: value
    });
  };

  const handleDelete = () => {
    deleteGroup(id);
  };

  return (
    <DragTargetContainer active={active} onDrop={handleDrop} index={index} id={id}>
      <div
        id={id}
        className={classNames(styles.menuItem, styles.between, { [styles.active]: active, [styles.isFirst]: isFirst })}
        onClick={() => selectGroup(id)}>
        <span className={classNames(styles.nameContainer)}>
          <EditableText text={name} className={styles.editName} doubleClick={true} placeholder="输入空间名" onCommit={handleNameChange} />
        </span>
        <i
          onClick={() => {
            deleteRef.current?.show();
          }}
          className={classNames('icon', 'iconfont', 'icon-btn_delete', styles.deleteIcon)}
        />
        <EasyvModal.Confirm
          ref={deleteRef}
          onOk={handleDelete}
          content={
            <div style={{ whiteSpace: 'pre-line' }}>
              删除<span style={{ color: '#fff' }}>{name}</span>前需先清空工作空间下所有项目，空间删除后无法复原
            </div>
          }
          title="删除工作空间"
        />
      </div>
    </DragTargetContainer>
  );
}

export default spaceGroupItem;
