import React from 'react';
import classNames from 'classnames';
import DragTargetContainer from './DragTargetContainer';
import styles from './GroupMenu.less';

function UngroupItem({ active, groupedCount, moveScreenToGroup, selectGroup }) {
  const handleDrop = () => {
    moveScreenToGroup({
      groupId: null
    });
  };

  return (
    <DragTargetContainer active={active} onDrop={handleDrop} disableDrag>
      <div
        className={classNames(styles.menuItem, styles.isLast, {
          [styles.active]: active
        })}
        onClick={() => selectGroup(-1)}>
        <span>未分组</span>
        <span style={{ width: 22, display: 'inline-block', textAlign: 'center' }}>{groupedCount}</span>
      </div>
    </DragTargetContainer>
  );
}

export default UngroupItem;
