import React from 'react';
import { Badge, Box, Text, DropDown, DropDownTrigger, DropDownMenu, DropDownItem, Button, Icon } from '../../index.js';
import StoryWrapper from '../../utils/story-wrapper.js';
export default {
  title: 'DesignSystem/Molecules/DropDown',
  argTypes: {
    onClick: {
      action: 'clicked'
    },
    stick: {
      defaultValue: 'left',
      options: ['left', 'right'],
      control: {
        type: 'select'
      }
    }
  }
};
export const Default = ({
  onClick,
  ...props
}) => {
  const handleClick = event => {
    event.preventDefault();
    onClick(event);
  };
  return /*#__PURE__*/React.createElement(StoryWrapper, {
    label: "Button trigger with nested DropDownItems"
  }, /*#__PURE__*/React.createElement(DropDown, props, /*#__PURE__*/React.createElement(DropDownTrigger, null, /*#__PURE__*/React.createElement(Button, null, "Get your cursor here!")), /*#__PURE__*/React.createElement(DropDownMenu, null, /*#__PURE__*/React.createElement(DropDownItem, {
    onClick: handleClick
  }, /*#__PURE__*/React.createElement(Icon, {
    icon: "Video"
  }), "Some menu item"), /*#__PURE__*/React.createElement(DropDownItem, {
    onClick: handleClick
  }, /*#__PURE__*/React.createElement(Icon, {
    icon: "Headphones"
  }), "Other item", /*#__PURE__*/React.createElement(DropDownMenu, null, /*#__PURE__*/React.createElement(DropDownItem, {
    onClick: handleClick,
    color: "danger"
  }, /*#__PURE__*/React.createElement(Icon, {
    icon: "Edit"
  }), "Some danger item"))))));
};
export const Custom = ({
  onClick
}) => {
  const handleClick = event => {
    event.preventDefault();
    onClick(event);
  };
  return /*#__PURE__*/React.createElement(StoryWrapper, {
    label: "Badge trigger with TextContent"
  }, /*#__PURE__*/React.createElement(DropDown, null, /*#__PURE__*/React.createElement(DropDownTrigger, null, /*#__PURE__*/React.createElement(Badge, null, "Get your cursor here!")), /*#__PURE__*/React.createElement(DropDownMenu, null, /*#__PURE__*/React.createElement(Box, {
    p: "xxl",
    width: 300
  }, /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement("h3", null, "I am inside dropdown Menu"), /*#__PURE__*/React.createElement(Button, {
    onClick: handleClick
  }, "Click me if you dare"))))));
};