import React from 'react';
import { Menu, Dropdown, Icon } from 'antd';

import './style.less';

export default function withActions(actionsRender) {
  return function ActionList(text, record) {
    const actions = actionsRender(text, record);
    const [Act1, Act2, ...leftActs] = (actions || []).filter(Boolean);
    const showMore = leftActs && leftActs.length > 0;

    const menus = (
      <Menu className="actlist-menu">
        {[Act2].concat(leftActs).filter(Boolean).map((Act, index) => (<Menu.Item key={`dm-${index}`}>{Act}</Menu.Item>))}
      </Menu>
    );
    console.log('---------->', record, menus)

    return (
      <div className="action-list">
        {
          Act1 && <span>{Act1}</span>
        }
        {
          !showMore && Act2 && <span>{Act2}</span>
        }
        {
          showMore ?
          (
            <span>
              <Dropdown overlay={menus} trigger={['click']}>
                <a onClick={e => e.preventDefault()}>
                  <span>更多</span> <Icon type="down" />
                </a>
              </Dropdown>
            </span>
          ) : null
        }
      </div>
    );
  }
}
