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

export const lineItemNormal = function(props, state, onChecked, { key, index, style }) {
  const { list = [], checkable = true, keywords, onClickItem, whatIcon, itemKey, itemNameKey, renderItemExt, onMouseOverItem, onMouseOutItem } = props;
  const { checkedKeys, activeKey } = state;
  const item = list[index];
  const checked = checkedKeys ? checkedKeys.includes(item[itemKey]) : false;
  const active = Array.isArray(activeKey) ? activeKey.includes(item[itemKey]) : activeKey === item[itemKey];
  const itemIcon = whatIcon ? whatIcon(item) : null;
  return (
    <div
      style={style}
      className={`list-item ${checkable ? 'has-check-box' : ''} ${active ? 'list-item-active' : ''}`}
      key={key}
      onClick={() => onClickItem && onClickItem(item)}
      onMouseOver={() => onMouseOverItem && onMouseOverItem(item)}
      onMouseOut={() => onMouseOutItem && onMouseOutItem(item)}
    >
      <label>
        {checkable && (
          <Checkbox
            value={item[itemKey]}
            onClick={e => {
              e.stopPropagation();
              e.preventDefault();
            }}
            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>
  );
};

export const lineItemHasDnd = function(props, state, onChecked, { item }, dragEnd, dragStart) {
  const { list = [], checkable = true, keywords, onClickItem, whatIcon, itemKey, itemNameKey, renderItemExt, onMouseOverItem, onMouseOutItem } = props;
  const { checkedKeys, activeKey } = state;
  // const item = list[index];
  const checked = checkedKeys ? checkedKeys.includes(item[itemKey]) : false;
  const active = Array.isArray(activeKey) ? activeKey.includes(item[itemKey]) : activeKey === item[itemKey];
  const itemIcon = whatIcon ? whatIcon(item) : null;
  return (
    <div
      draggable="true"
      data-item={JSON.stringify(item)}
      data-id={list.indexOf(item)}
      data-key={list.indexOf(item)}
      onDragEnd={dragEnd.bind(this)}
      onDragStart={dragStart.bind(this)}
      key={list.indexOf(item)}
      onClick={() => onClickItem && onClickItem(item)}
      onMouseOver={() => onMouseOverItem && onMouseOverItem(item)}
      onMouseOut={() => onMouseOutItem && onMouseOutItem(item)}
      className={`list-item ${checkable ? 'has-check-box' : ''} ${active ? 'list-item-active' : ''}`}
    >
      <label>
        {checkable && <Checkbox value={item[itemKey]} 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>
  );
};
