import React from 'react';
import { addStoryInGroup, MID_LEVEL_BLOCKS } from '../../../.storybook/utils';
import { IconClockSmallOutline, IconTrashSmallOutline } from '@teamleader/ui-icons';
import { Avatar, Menu, MenuItem, MenuDivider, MenuTitle, TextBody } from '../../index';
import avatars from '../../static/data/avatar';
var avatar = /*#__PURE__*/React.createElement(Avatar, {
  imageUrl: avatars[0].image,
  size: "tiny",
  shape: "circle"
});
export default {
  component: Menu,
  title: addStoryInGroup(MID_LEVEL_BLOCKS, 'Menu')
};
export var DefaultStory = function DefaultStory(args) {
  return /*#__PURE__*/React.createElement(Menu, args, /*#__PURE__*/React.createElement(MenuItem, {
    value: "foo",
    label: "Foo label",
    caption: "This is foo's caption"
  }), /*#__PURE__*/React.createElement(MenuItem, {
    value: "bar",
    label: "Bar label",
    caption: "Caption of bar"
  }), /*#__PURE__*/React.createElement(MenuItem, {
    value: "withChildren",
    caption: "Caption of with children prop"
  }, /*#__PURE__*/React.createElement(TextBody, {
    color: "teal"
  }, "With children prop")), /*#__PURE__*/React.createElement(MenuItem, {
    label: "Disabled ...",
    disabled: true
  }), /*#__PURE__*/React.createElement(MenuDivider, null), /*#__PURE__*/React.createElement(MenuItem, {
    label: "Label & avatar",
    icon: avatar
  }), /*#__PURE__*/React.createElement(MenuDivider, null), /*#__PURE__*/React.createElement(MenuTitle, null, "Group title"), /*#__PURE__*/React.createElement(MenuItem, {
    label: "Label & icon",
    icon: /*#__PURE__*/React.createElement(IconClockSmallOutline, null),
    onClick: function onClick() {
      return console.log('You clicked me!');
    }
  }), /*#__PURE__*/React.createElement(MenuItem, {
    label: "Destructive",
    icon: /*#__PURE__*/React.createElement(IconTrashSmallOutline, null),
    destructive: true
  }), /*#__PURE__*/React.createElement(MenuItem, {
    label: "Destructive & disabled",
    icon: /*#__PURE__*/React.createElement(IconTrashSmallOutline, null),
    destructive: true,
    disabled: true
  }));
};
DefaultStory.args = {
  selectable: true,
  selected: 'bar'
};