var _examples$SIMPLE_EXAM;

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

/*
Copyright (c) 2018 Uber Technologies, Inc.

This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/
import React from 'react';
import { boolean, number } from '@storybook/addon-knobs';
import { Button } from '../button/index.js';
import { styled } from '../styles/index.js';
import { PLACEMENT, TRIGGER_TYPE, Popover, StatefulPopover, StyledPadding as StyledPopoverPadding } from './index.js';
import examples from './examples-list.js';

function popoverContent() {
  return React.createElement(StyledPopoverPadding, null, React.createElement("div", null, React.createElement("strong", null, "The quick brown fox")), React.createElement("div", null, "Jumped over the lazy dog"));
}

var Centered = styled('div', {
  position: 'relative',
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'center',
  alignItems: 'center',
  height: '90vh'
});
Centered.displayName = "Centered";
var Grid = styled('div', {
  display: 'grid',
  gridTemplateColumns: '20% 20% 20% 20% 20%',
  gridTemplateRows: '20% 20% 20% 20% 20%',
  width: '380px',
  height: '250px'
});
Grid.displayName = "Grid";
var GridItem = styled('div', function (_ref) {
  var row = _ref.row,
      col = _ref.col;
  return {
    gridColumnStart: col,
    gridRowStart: row,
    textAlign: 'center'
  };
});
GridItem.displayName = "GridItem";
var Content = styled('div', {
  paddingBottom: '24px'
});
/* eslint-disable flowtype/no-weak-types */

Content.displayName = "Content";

var knobIsOpen = function knobIsOpen() {
  var defaultValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
  return boolean('isOpen', defaultValue);
};

var knobDismissOnEsc = function knobDismissOnEsc() {
  var defaultValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
  return boolean('dismissOnEsc', defaultValue);
};

var knobDismissOnClickOutside = function knobDismissOnClickOutside() {
  var defaultValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
  return boolean('dismissOnClickOutside', defaultValue);
};

var knobOnMouseEnterDelay = function knobOnMouseEnterDelay() {
  var defaultValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 200;
  return number('onMouseEnterDelay', defaultValue, {
    range: true,
    min: 0,
    max: 1000
  });
};

var knobOnMouseLeaveDelay = function knobOnMouseLeaveDelay() {
  var defaultValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 200;
  return number('onMouseLeaveDelay', defaultValue, {
    range: true,
    min: 0,
    max: 1000
  });
};
/* eslint-enable flowtype/no-weak-types */


export default (_examples$SIMPLE_EXAM = {}, _defineProperty(_examples$SIMPLE_EXAM, examples.SIMPLE_EXAMPLE, function Story1() {
  return React.createElement(Centered, null, React.createElement(Popover, {
    accessibilityType: 'tooltip',
    isOpen: knobIsOpen(),
    content: popoverContent
  }, React.createElement(Button, null, "Open")));
}), _defineProperty(_examples$SIMPLE_EXAM, examples.WITH_CLICK, function Story2() {
  return React.createElement(Centered, null, React.createElement(StatefulPopover, {
    content: popoverContent,
    dismissOnEsc: knobDismissOnEsc(),
    dismissOnClickOutside: knobDismissOnClickOutside(),
    accessibilityType: 'tooltip'
  }, React.createElement(Button, null, "Press Me")));
}), _defineProperty(_examples$SIMPLE_EXAM, examples.WITH_HOVER, function Story3() {
  return React.createElement(Centered, null, React.createElement(StatefulPopover, {
    triggerType: TRIGGER_TYPE.hover,
    content: popoverContent,
    onMouseEnterDelay: knobOnMouseEnterDelay(),
    onMouseLeaveDelay: knobOnMouseLeaveDelay(),
    accessibilityType: 'tooltip'
  }, React.createElement(Button, null, "Hover Me")));
}), _defineProperty(_examples$SIMPLE_EXAM, examples.PLACEMENTS, function Story4() {
  return React.createElement(Centered, null, React.createElement(Grid, null, React.createElement(GridItem, {
    row: 1,
    col: 2
  }, React.createElement(StatefulPopover, {
    placement: PLACEMENT.topLeft,
    content: popoverContent
  }, React.createElement(Button, null, "TL"))), React.createElement(GridItem, {
    row: 1,
    col: 3
  }, React.createElement(StatefulPopover, {
    placement: PLACEMENT.top,
    content: popoverContent
  }, React.createElement(Button, null, "Top"))), React.createElement(GridItem, {
    row: 1,
    col: 4
  }, React.createElement(StatefulPopover, {
    placement: PLACEMENT.topRight,
    content: popoverContent
  }, React.createElement(Button, null, "TR"))), React.createElement(GridItem, {
    row: 2,
    col: 1
  }, React.createElement(StatefulPopover, {
    placement: PLACEMENT.leftTop,
    content: popoverContent
  }, React.createElement(Button, null, "LT"))), React.createElement(GridItem, {
    row: 3,
    col: 1
  }, React.createElement(StatefulPopover, {
    placement: PLACEMENT.left,
    content: popoverContent
  }, React.createElement(Button, null, "Left"))), React.createElement(GridItem, {
    row: 4,
    col: 1
  }, React.createElement(StatefulPopover, {
    placement: PLACEMENT.leftBottom,
    content: popoverContent
  }, React.createElement(Button, null, "LB"))), React.createElement(GridItem, {
    row: 5,
    col: 2
  }, React.createElement(StatefulPopover, {
    placement: PLACEMENT.bottomLeft,
    content: popoverContent
  }, React.createElement(Button, null, "BL"))), React.createElement(GridItem, {
    row: 5,
    col: 3
  }, React.createElement(StatefulPopover, {
    placement: PLACEMENT.bottom,
    content: popoverContent
  }, React.createElement(Button, null, "Bottom"))), React.createElement(GridItem, {
    row: 5,
    col: 4
  }, React.createElement(StatefulPopover, {
    placement: PLACEMENT.bottomRight,
    content: popoverContent
  }, React.createElement(Button, null, "BR"))), React.createElement(GridItem, {
    row: 2,
    col: 5
  }, React.createElement(StatefulPopover, {
    placement: PLACEMENT.rightTop,
    content: popoverContent
  }, React.createElement(Button, null, "RT"))), React.createElement(GridItem, {
    row: 3,
    col: 5
  }, React.createElement(StatefulPopover, {
    placement: PLACEMENT.right,
    content: popoverContent
  }, React.createElement(Button, null, "Right"))), React.createElement(GridItem, {
    row: 4,
    col: 5
  }, React.createElement(StatefulPopover, {
    placement: PLACEMENT.rightBottom,
    content: popoverContent
  }, React.createElement(Button, null, "RB")))));
}), _defineProperty(_examples$SIMPLE_EXAM, examples.ARROW, function Story5() {
  return React.createElement(Centered, null, React.createElement(StatefulPopover, {
    showArrow: true,
    initialState: {
      isOpen: true
    },
    content: popoverContent,
    triggerType: TRIGGER_TYPE.hover
  }, React.createElement(Button, null, "Hover Me")));
}), _defineProperty(_examples$SIMPLE_EXAM, examples.CLOSE_CALLBACK, function Story6() {
  return React.createElement(Centered, null, React.createElement(StatefulPopover, {
    initialState: {
      isOpen: true
    },
    content: function content(_ref2) {
      var close = _ref2.close;
      return React.createElement(StyledPopoverPadding, {
        $style: {
          maxWidth: '300px',
          lineHeight: 1.5
        }
      }, React.createElement(Content, null, "content render prop is passed a ", React.createElement("code", null, "close()"), " callback so it you can manually trigger popover close from within"), React.createElement(Button, {
        onClick: close
      }, "Dismiss"));
    }
  }, React.createElement(Button, null, "Click Me")));
}), _defineProperty(_examples$SIMPLE_EXAM, examples.CLIPPING, function Story7() {
  return React.createElement(Centered, null, React.createElement("div", {
    style: {
      width: '300px',
      height: '300px',
      overflow: 'auto'
    }
  }, React.createElement("div", {
    style: {
      width: '100%',
      height: '700px',
      padding: '140px 0',
      backgroundColor: '#ccc',
      textAlign: 'center'
    }
  }, React.createElement(StatefulPopover, {
    initialState: {
      isOpen: true
    },
    content: function content() {
      return React.createElement(StyledPopoverPadding, {
        $style: {
          maxWidth: '230px'
        }
      }, "Popover will reposition itself to avoid being clipped!", React.createElement("br", null), React.createElement("strong", null, "Try scrolling in this box..."));
    },
    placement: PLACEMENT.top
  }, React.createElement(Button, null, "Click Me")))));
}), _defineProperty(_examples$SIMPLE_EXAM, examples.STYLE_OVERRIDES, function Story8() {
  var hue = number('Color', 100, {
    range: true,
    min: 0,
    max: 360
  });
  var hsl = "hsl(".concat(hue, ", 40%, 40%)");
  return React.createElement(Centered, null, React.createElement(StatefulPopover, {
    initialState: {
      isOpen: true
    },
    showArrow: true,
    overrides: {
      Arrow: {
        style: {
          backgroundColor: hsl
        }
      },
      Body: {
        style: {
          backgroundColor: hsl,
          borderRadius: 0
        }
      },
      Inner: {
        style: {
          backgroundColor: hsl,
          borderRadius: 0,
          color: '#fff'
        }
      }
    },
    content: popoverContent
  }, React.createElement(Button, null, "Click Me")));
}), _examples$SIMPLE_EXAM);