import React, { useCallback } from 'react';
import { Checkbox } from 'antd';
import HightLevel from '../../HightLevel';

export function RenderItem({ item, checkedKeys, activeKey, index, style, itemNameKey, renderItemExt, whatIcon, itemKey, checkable, keywords, onItemDrag, onItemDrop, onChecked, onClickItem, key, onMouseOverItem, onMouseOutItem }) {
  const checked = checkedKeys ? checkedKeys.includes(item[itemKey]) : false;
  const active = !activeKey ? false : Array.isArray(activeKey) ? activeKey.includes(item[itemKey]) : activeKey === item[itemKey];
  const itemIcon = whatIcon ? whatIcon(item) : null;
  const itemClick = useCallback((e) => {
    e.stopPropagation();
  }, []);
  return (
    <div
      style={style}
      className={`list-item ${checkable ? 'has-check-box' : ''} ${active ? 'list-item-active' : ''}`}
      draggable={true}
      key={key}
      onClick={() => onClickItem && onClickItem(item)}
      onMouseOver={() => onMouseOverItem && onMouseOverItem(item)}
      onMouseOut={() => onMouseOutItem && onMouseOutItem(item)}
      onDragStart={(e) => onItemDrag(e, index)}
      onDrop={(e) => onItemDrop(e, index)}
      onDragOver={(event) => event.preventDefault()}
    >
      <label>
        {checkable && <Checkbox value={item[itemKey]} onClick={itemClick} checked={checked} onChange={onChecked} />}
        <div className={`item-info`}>
          {itemIcon}
          {keywords ? <HightLevel name={item[itemNameKey]} keyword={keywords} /> : <span title={item[itemNameKey]}>{item[itemNameKey]}</span>}
        </div>
        {renderItemExt && renderItemExt(item)}
      </label>
    </div>
  );
}
