function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import React, { useRef } from 'react';
import styled from 'styled-components';
import { IconEdit, IconDelete, IconAdd } from '@defencedigital/icon-library';
import { ContextMenu, ContextMenuItem, ContextMenuDivider } from '.';
import { Link } from '../Link';
export default {
  component: ContextMenu,
  subcomponents: {
    ContextMenuItem: ContextMenuItem,
    ContextMenuDivider: ContextMenuDivider
  },
  title: 'Context Menu',
  parameters: {
    actions: {
      argTypesRegex: '^on.*'
    }
  }
};
var ClickArea = styled.div.withConfig({
  displayName: "ContextMenustories__ClickArea",
  componentId: "sc-1rqdch8-0"
})(["display:inline-block;padding:1rem;background-color:#c9c9c9;"]);
export var Default = function Default(props) {
  var ref = useRef(null);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ClickArea, {
    ref: ref
  }, props.clickType === 'left' ? 'Click on me' : 'Right click on me'), /*#__PURE__*/React.createElement(ContextMenu, _extends({}, props, {
    attachedToRef: ref
  }), /*#__PURE__*/React.createElement(ContextMenuItem, {
    link: /*#__PURE__*/React.createElement(Link, {
      href: "/edit"
    }, "Edit")
  }), /*#__PURE__*/React.createElement(ContextMenuItem, {
    link: /*#__PURE__*/React.createElement(Link, {
      href: "/delete"
    }, "Delete")
  }), /*#__PURE__*/React.createElement(ContextMenuItem, {
    link: /*#__PURE__*/React.createElement(Link, {
      href: "/delete"
    }, "Action")
  }), /*#__PURE__*/React.createElement(ContextMenuDivider, null), /*#__PURE__*/React.createElement(ContextMenuItem, {
    link: /*#__PURE__*/React.createElement(Link, {
      href: "/add"
    }, "Add")
  }), /*#__PURE__*/React.createElement(ContextMenuDivider, null), /*#__PURE__*/React.createElement(ContextMenuItem, {
    link: /*#__PURE__*/React.createElement(Link, {
      href: "/something-else"
    }, "Do something else")
  }), /*#__PURE__*/React.createElement(ContextMenuDivider, null), /*#__PURE__*/React.createElement(ContextMenuItem, {
    link: /*#__PURE__*/React.createElement(Link, {
      href: "/something-else"
    }, "This is too much text to put into a context menu item")
  })));
};
Default.storyName = 'Default';
var WithIconsTemplate = function WithIconsTemplate(props) {
  var ref = useRef(null);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ClickArea, {
    ref: ref
  }, props.clickType === 'left' ? 'Click on me' : 'Right click on me'), /*#__PURE__*/React.createElement(ContextMenu, _extends({}, props, {
    attachedToRef: ref
  }), /*#__PURE__*/React.createElement(ContextMenuItem, {
    icon: /*#__PURE__*/React.createElement(IconEdit, null),
    link: /*#__PURE__*/React.createElement(Link, {
      href: "/edit"
    }, "Edit")
  }), /*#__PURE__*/React.createElement(ContextMenuItem, {
    icon: /*#__PURE__*/React.createElement(IconDelete, null),
    link: /*#__PURE__*/React.createElement(Link, {
      href: "/delete"
    }, "Delete")
  }), /*#__PURE__*/React.createElement(ContextMenuItem, {
    link: /*#__PURE__*/React.createElement(Link, {
      href: "/delete"
    }, "Action")
  }), /*#__PURE__*/React.createElement(ContextMenuDivider, null), /*#__PURE__*/React.createElement(ContextMenuItem, {
    icon: /*#__PURE__*/React.createElement(IconAdd, null),
    link: /*#__PURE__*/React.createElement(Link, {
      href: "/add"
    }, "Add")
  }), /*#__PURE__*/React.createElement(ContextMenuDivider, null), /*#__PURE__*/React.createElement(ContextMenuItem, {
    link: /*#__PURE__*/React.createElement(Link, {
      href: "/something-else"
    }, "Do something else")
  }), /*#__PURE__*/React.createElement(ContextMenuDivider, null), /*#__PURE__*/React.createElement(ContextMenuItem, {
    link: /*#__PURE__*/React.createElement(Link, {
      href: "/something-else"
    }, "This is too much text to put into a context menu item")
  })));
};
export var WithIcons = WithIconsTemplate.bind({});
WithIcons.storyName = 'With icons';
export var Open = WithIconsTemplate.bind({});
Open.storyName = 'Open';
Open.args = {
  initialIsOpen: true
};
Open.parameters = {
  docs: {
    disable: true
  }
};