import {memo, forwardRef} from 'react';
import {Dropdown, Tooltip} from "antd";
import {EllipsisOutlined} from "@ant-design/icons";
import {styled} from "styled-components";

const component = forwardRef(({
  items,
  onSelect,
  children,
  style,
  trigger='click',
  tooltip
}, ref) => {
  return (
    <Dropdown
      placement="bottom"
      arrow={false}
      trigger={trigger}
      menu={{
        items,
        expandIcon: false,
        triggerSubMenuAction:'click',
        onClick:onSelect
      }}
    >
      <Tooltip placement="top" title={tooltip} mouseEnterDelay={0.5} arrow={false}>
        <div ref={ref}>
          {children ? children : <DefaultIcon style={{cursor: "pointer", ...style}}/>}
        </div>
      </Tooltip>

    </Dropdown>
  )
})
export const ActionIcon = memo(component);

const DefaultIcon =styled(EllipsisOutlined)`
  cursor:pointer;
  padding: 5px 0;
  svg {
    margin-top: 0;
    width: 25px;
    height: 25px;
    &:hover {
      background-color: rgba(255,255,255, 0.2);
      border-radius: 3px;
      transition: background-color 0.3s;
    }
  }
`