import _extends from "@babel/runtime/helpers/extends";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useState } from 'react';
import { addStoryInGroup, MID_LEVEL_BLOCKS } from '../../../.storybook/utils';
import { IconChevronDownSmallOutline, IconCloseSmallOutline, IconTrashSmallOutline, IconClockSmallOutline } from '@teamleader/ui-icons';
import { Banner, Box, Button, ButtonGroup, Heading3, Link, Menu, MenuItem, MenuDivider, MenuTitle, Popover, TextBody, TextSmall } from '../../index';
var backdrops = ['transparent', 'dark'];
var defaultPopoverProps = {
  backdrop: 'transparent',
  color: 'neutral',
  direction: 'south',
  fullHeight: true,
  position: 'center',
  tint: 'lightest',
  lockScroll: true,
  maxWidth: '50vw',
  minWidth: '',
  offsetCorrection: 0
};
var popoverArgTypes = {
  backdrop: {
    control: 'select',
    options: backdrops
  }
};
var contentBoxWithSingleTextLine = /*#__PURE__*/React.createElement(Box, {
  padding: 4
}, /*#__PURE__*/React.createElement(TextBody, null, "This is the popover content with a", ' ', /*#__PURE__*/React.createElement(Link, {
  href: "#",
  inherit: false
}, "link"), ' ', "inside"));
export default {
  component: Popover,
  title: addStoryInGroup(MID_LEVEL_BLOCKS, 'Popover'),
  parameters: {
    info: {
      propTablesExclude: [Link, TextBody, TextSmall, Button, Banner, Heading3, ButtonGroup, Box]
    }
  }
};

var usePopoverTrigger = function usePopoverTrigger() {
  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      popoverActive = _useState2[0],
      setPopoverActive = _useState2[1];

  var _useState3 = useState(undefined),
      _useState4 = _slicedToArray(_useState3, 2),
      anchorEl = _useState4[0],
      setAnchorEl = _useState4[1];

  var triggerPopover = function triggerPopover(event) {
    setAnchorEl(event.currentTarget);
    setPopoverActive(true);
  };

  var closePopover = function closePopover() {
    setPopoverActive(false);
  };

  return [{
    popoverActive: popoverActive,
    anchorEl: anchorEl
  }, triggerPopover, closePopover];
};

export var basic = function basic(args) {
  var _usePopoverTrigger = usePopoverTrigger(),
      _usePopoverTrigger2 = _slicedToArray(_usePopoverTrigger, 3),
      _usePopoverTrigger2$ = _usePopoverTrigger2[0],
      popoverActive = _usePopoverTrigger2$.popoverActive,
      anchorEl = _usePopoverTrigger2$.anchorEl,
      handleButtonClick = _usePopoverTrigger2[1],
      handleCloseClick = _usePopoverTrigger2[2];

  return /*#__PURE__*/React.createElement(Box, {
    display: "flex",
    justifyContent: "center"
  }, /*#__PURE__*/React.createElement(Button, {
    onClick: handleButtonClick,
    label: "Open a basic Popover"
  }), /*#__PURE__*/React.createElement(Popover, _extends({}, args, {
    active: popoverActive,
    anchorEl: anchorEl,
    onEscKeyDown: handleCloseClick,
    onOverlayClick: handleCloseClick
  }), contentBoxWithSingleTextLine));
};
basic.args = defaultPopoverProps;
basic.argTypes = popoverArgTypes;
export var withTitle = function withTitle(args) {
  var _usePopoverTrigger3 = usePopoverTrigger(),
      _usePopoverTrigger4 = _slicedToArray(_usePopoverTrigger3, 3),
      _usePopoverTrigger4$ = _usePopoverTrigger4[0],
      popoverActive = _usePopoverTrigger4$.popoverActive,
      anchorEl = _usePopoverTrigger4$.anchorEl,
      handleButtonClick = _usePopoverTrigger4[1],
      handleCloseClick = _usePopoverTrigger4[2];

  return /*#__PURE__*/React.createElement(Box, {
    display: "flex",
    justifyContent: "center"
  }, /*#__PURE__*/React.createElement(Button, {
    onClick: handleButtonClick,
    label: "Open titled Popover"
  }), /*#__PURE__*/React.createElement(Popover, _extends({}, args, {
    active: popoverActive,
    anchorEl: anchorEl,
    onEscKeyDown: handleCloseClick,
    onOverlayClick: handleCloseClick
  }), /*#__PURE__*/React.createElement(Banner, {
    fullWidth: true
  }, /*#__PURE__*/React.createElement(Heading3, null, "Popover Title")), contentBoxWithSingleTextLine));
};
withTitle.storyName = 'With title';
withTitle.args = defaultPopoverProps;
withTitle.argTypes = popoverArgTypes;
export var withTitleSubtitle = function withTitleSubtitle(args) {
  var _usePopoverTrigger5 = usePopoverTrigger(),
      _usePopoverTrigger6 = _slicedToArray(_usePopoverTrigger5, 3),
      _usePopoverTrigger6$ = _usePopoverTrigger6[0],
      popoverActive = _usePopoverTrigger6$.popoverActive,
      anchorEl = _usePopoverTrigger6$.anchorEl,
      handleButtonClick = _usePopoverTrigger6[1],
      handleCloseClick = _usePopoverTrigger6[2];

  return /*#__PURE__*/React.createElement(Box, {
    display: "flex",
    justifyContent: "center"
  }, /*#__PURE__*/React.createElement(Button, {
    onClick: handleButtonClick,
    label: "Open titled & subtitled Popover"
  }), /*#__PURE__*/React.createElement(Popover, _extends({}, args, {
    active: popoverActive,
    anchorEl: anchorEl,
    onEscKeyDown: handleCloseClick,
    onOverlayClick: handleCloseClick
  }), /*#__PURE__*/React.createElement(Banner, {
    color: "neutral",
    fullWidth: true
  }, /*#__PURE__*/React.createElement(Heading3, null, "Popover Title"), /*#__PURE__*/React.createElement(TextSmall, {
    marginTop: 1
  }, "This is the popover content")), contentBoxWithSingleTextLine));
};
withTitleSubtitle.storyName = 'With title & subtitle';
withTitleSubtitle.args = defaultPopoverProps;
withTitleSubtitle.argTypes = popoverArgTypes;
export var withCloseButton = function withCloseButton(args) {
  var _usePopoverTrigger7 = usePopoverTrigger(),
      _usePopoverTrigger8 = _slicedToArray(_usePopoverTrigger7, 3),
      _usePopoverTrigger8$ = _usePopoverTrigger8[0],
      popoverActive = _usePopoverTrigger8$.popoverActive,
      anchorEl = _usePopoverTrigger8$.anchorEl,
      handleButtonClick = _usePopoverTrigger8[1],
      handleCloseClick = _usePopoverTrigger8[2];

  return /*#__PURE__*/React.createElement(Box, {
    display: "flex",
    justifyContent: "center"
  }, /*#__PURE__*/React.createElement(Button, {
    onClick: handleButtonClick,
    label: "Open Popover with close button"
  }), /*#__PURE__*/React.createElement(Popover, _extends({}, args, {
    active: popoverActive,
    anchorEl: anchorEl,
    onEscKeyDown: handleCloseClick,
    onOverlayClick: handleCloseClick
  }), /*#__PURE__*/React.createElement(Banner, {
    onClose: handleCloseClick,
    fullWidth: true
  }, /*#__PURE__*/React.createElement(Heading3, null, "I am a heading 3")), contentBoxWithSingleTextLine));
};
withCloseButton.storyName = 'With close button';
withCloseButton.args = defaultPopoverProps;
withCloseButton.argTypes = popoverArgTypes;
export var withActions = function withActions(args) {
  var _usePopoverTrigger9 = usePopoverTrigger(),
      _usePopoverTrigger10 = _slicedToArray(_usePopoverTrigger9, 3),
      _usePopoverTrigger10$ = _usePopoverTrigger10[0],
      popoverActive = _usePopoverTrigger10$.popoverActive,
      anchorEl = _usePopoverTrigger10$.anchorEl,
      handleButtonClick = _usePopoverTrigger10[1],
      handleCloseClick = _usePopoverTrigger10[2];

  return /*#__PURE__*/React.createElement(Box, {
    display: "flex",
    justifyContent: "center"
  }, /*#__PURE__*/React.createElement(Button, {
    onClick: handleButtonClick,
    label: "Open Popover with actions"
  }), /*#__PURE__*/React.createElement(Popover, _extends({}, args, {
    active: popoverActive,
    anchorEl: anchorEl,
    onEscKeyDown: handleCloseClick,
    onOverlayClick: handleCloseClick
  }), contentBoxWithSingleTextLine, /*#__PURE__*/React.createElement(ButtonGroup, {
    justifyContent: "flex-end",
    padding: 4
  }, /*#__PURE__*/React.createElement(Button, {
    label: "Cancel"
  }), /*#__PURE__*/React.createElement(Button, {
    level: "primary",
    label: "Confirm"
  }))));
};
withActions.storyName = 'With actions';
withActions.args = defaultPopoverProps;
withActions.argTypes = popoverArgTypes;
export var withMenu = function withMenu(args) {
  var _usePopoverTrigger11 = usePopoverTrigger(),
      _usePopoverTrigger12 = _slicedToArray(_usePopoverTrigger11, 3),
      _usePopoverTrigger12$ = _usePopoverTrigger12[0],
      popoverActive = _usePopoverTrigger12$.popoverActive,
      anchorEl = _usePopoverTrigger12$.anchorEl,
      handleButtonClick = _usePopoverTrigger12[1],
      handleCloseClick = _usePopoverTrigger12[2];

  return /*#__PURE__*/React.createElement(Box, {
    display: "flex",
    justifyContent: "center"
  }, /*#__PURE__*/React.createElement(Button, {
    onClick: handleButtonClick,
    label: "Open Popover with menu"
  }), /*#__PURE__*/React.createElement(Popover, _extends({}, args, {
    active: popoverActive,
    anchorEl: anchorEl,
    onEscKeyDown: handleCloseClick,
    onOverlayClick: handleCloseClick
  }), /*#__PURE__*/React.createElement(Box, {
    overflowY: "auto"
  }, /*#__PURE__*/React.createElement(Menu, {
    outline: false,
    selected: "bar"
  }, /*#__PURE__*/React.createElement(MenuItem, {
    value: "foo",
    label: "Foo label"
  }), /*#__PURE__*/React.createElement(MenuItem, {
    value: "bar",
    label: "Bar label"
  }), /*#__PURE__*/React.createElement(MenuItem, {
    label: "Disabled ...",
    disabled: true
  }), /*#__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)
  }), /*#__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(IconCloseSmallOutline, null),
    destructive: true,
    disabled: true
  })))));
};
withMenu.storyName = 'With menu';
withMenu.args = defaultPopoverProps;
withMenu.argTypes = popoverArgTypes;
export var withSplitButtonMenu = function withSplitButtonMenu(args) {
  var _useState5 = useState('primary'),
      _useState6 = _slicedToArray(_useState5, 2),
      buttonLevel = _useState6[0],
      setButtonLevel = _useState6[1];

  var _useState7 = useState('Primary action'),
      _useState8 = _slicedToArray(_useState7, 2),
      buttonLabel = _useState8[0],
      setButtonLabel = _useState8[1];

  var _useState9 = useState(null),
      _useState10 = _slicedToArray(_useState9, 2),
      anchorEl = _useState10[0],
      setAnchorEl = _useState10[1];

  var _useState11 = useState(false),
      _useState12 = _slicedToArray(_useState11, 2),
      popoverActive = _useState12[0],
      setPopoverActive = _useState12[1];

  var _useState13 = useState('foo'),
      _useState14 = _slicedToArray(_useState13, 2),
      splitButtonSelected = _useState14[0],
      setSplitButtonSelected = _useState14[1];

  var handleSplitButtonNormalMenuItemClick = function handleSplitButtonNormalMenuItemClick() {
    setButtonLevel('primary');
    setButtonLabel('Primary action');
    setPopoverActive(false);
    setSplitButtonSelected('foo');
  };

  var handleSplitButtonDestructiveMenuItemClick = function handleSplitButtonDestructiveMenuItemClick() {
    setButtonLevel('destructive');
    setButtonLabel('Destructive action');
    setPopoverActive(false);
    setSplitButtonSelected('bar');
  };

  var handleButtonClick = function handleButtonClick(event) {
    setAnchorEl(event.currentTarget);
    setPopoverActive(true);
  };

  var handleCloseClick = function handleCloseClick() {
    setPopoverActive(false);
  };

  return /*#__PURE__*/React.createElement(Box, {
    display: "flex",
    justifyContent: "center"
  }, /*#__PURE__*/React.createElement(ButtonGroup, {
    segmented: true
  }, /*#__PURE__*/React.createElement(Button, {
    label: buttonLabel,
    level: buttonLevel
  }), /*#__PURE__*/React.createElement(Button, {
    level: buttonLevel,
    onClick: handleButtonClick,
    icon: /*#__PURE__*/React.createElement(IconChevronDownSmallOutline, null)
  })), /*#__PURE__*/React.createElement(Popover, _extends({}, args, {
    active: popoverActive,
    anchorEl: anchorEl,
    backdrop: "transparent",
    position: "start",
    onEscKeyDown: handleCloseClick,
    onOverlayClick: handleCloseClick
  }), /*#__PURE__*/React.createElement(Menu, {
    outline: false,
    selected: splitButtonSelected
  }, /*#__PURE__*/React.createElement(MenuItem, {
    value: "foo",
    label: "Primary action",
    icon: /*#__PURE__*/React.createElement(IconClockSmallOutline, null),
    onClick: handleSplitButtonNormalMenuItemClick
  }), /*#__PURE__*/React.createElement(MenuItem, {
    value: "bar",
    label: "Destructive action",
    icon: /*#__PURE__*/React.createElement(IconTrashSmallOutline, null),
    destructive: true,
    onClick: handleSplitButtonDestructiveMenuItemClick
  }))));
};
withSplitButtonMenu.storyName = 'With split button menu';
withSplitButtonMenu.args = defaultPopoverProps;
withSplitButtonMenu.argTypes = popoverArgTypes;
export var experiment1 = function experiment1(args) {
  var _usePopoverTrigger13 = usePopoverTrigger(),
      _usePopoverTrigger14 = _slicedToArray(_usePopoverTrigger13, 3),
      _usePopoverTrigger14$ = _usePopoverTrigger14[0],
      popoverActive = _usePopoverTrigger14$.popoverActive,
      anchorEl = _usePopoverTrigger14$.anchorEl,
      handleButtonClick = _usePopoverTrigger14[1],
      handleCloseClick = _usePopoverTrigger14[2];

  return /*#__PURE__*/React.createElement(Box, {
    display: "flex",
    justifyContent: "center"
  }, /*#__PURE__*/React.createElement(Button, {
    onClick: handleButtonClick,
    label: "Open a experimental Popover"
  }), /*#__PURE__*/React.createElement(Popover, _extends({}, args, {
    active: popoverActive,
    anchorEl: anchorEl,
    onEscKeyDown: handleCloseClick,
    onOverlayClick: handleCloseClick
  }), /*#__PURE__*/React.createElement(Banner, {
    color: "neutral",
    fullWidth: true
  }, /*#__PURE__*/React.createElement(Heading3, null, "Popover Title"), /*#__PURE__*/React.createElement(TextSmall, {
    marginTop: 1
  }, "This is the popover content")), /*#__PURE__*/React.createElement(Box, {
    padding: 4,
    overflow: "auto"
  }, /*#__PURE__*/React.createElement(TextBody, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."))));
};
experiment1.args = defaultPopoverProps;
experiment1.argTypes = popoverArgTypes;
export var experiment2 = function experiment2(args) {
  var _usePopoverTrigger15 = usePopoverTrigger(),
      _usePopoverTrigger16 = _slicedToArray(_usePopoverTrigger15, 3),
      _usePopoverTrigger16$ = _usePopoverTrigger16[0],
      popoverActive = _usePopoverTrigger16$.popoverActive,
      anchorEl = _usePopoverTrigger16$.anchorEl,
      handleButtonClick = _usePopoverTrigger16[1],
      handleCloseClick = _usePopoverTrigger16[2];

  return /*#__PURE__*/React.createElement(Box, {
    display: "flex",
    justifyContent: "center"
  }, /*#__PURE__*/React.createElement(Button, {
    onClick: handleButtonClick,
    label: "Open a experimental Popover"
  }), /*#__PURE__*/React.createElement(Popover, _extends({}, args, {
    active: popoverActive,
    anchorEl: anchorEl,
    onEscKeyDown: handleCloseClick,
    onOverlayClick: handleCloseClick
  }), /*#__PURE__*/React.createElement(Banner, {
    color: "neutral",
    fullWidth: true
  }, /*#__PURE__*/React.createElement(Heading3, null, "Popover Title"), /*#__PURE__*/React.createElement(TextSmall, {
    marginTop: 1
  }, "This is the popover content")), /*#__PURE__*/React.createElement(Box, {
    padding: 4,
    overflow: "auto"
  }, /*#__PURE__*/React.createElement(TextBody, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")), /*#__PURE__*/React.createElement(ButtonGroup, {
    justifyContent: "flex-end",
    padding: 4
  }, /*#__PURE__*/React.createElement(Button, {
    label: "Cancel"
  }), /*#__PURE__*/React.createElement(Button, {
    level: "primary",
    label: "Confirm"
  }))));
};
experiment2.args = defaultPopoverProps;
experiment2.argTypes = popoverArgTypes;