"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _addonKnobs = require("@storybook/addon-knobs");

var _index = require("../button/index.js");

var _index2 = require("../styles/index.js");

var _index3 = require("./index.js");

var _examplesList = _interopRequireDefault(require("./examples-list.js"));

var _examples$SIMPLE_EXAM;

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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; }

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

var Centered = (0, _index2.styled)('div', {
  position: 'relative',
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'center',
  alignItems: 'center',
  height: '90vh'
});
Centered.displayName = "Centered";
var Grid = (0, _index2.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 = (0, _index2.styled)('div', function (_ref) {
  var row = _ref.row,
      col = _ref.col;
  return {
    gridColumnStart: col,
    gridRowStart: row,
    textAlign: 'center'
  };
});
GridItem.displayName = "GridItem";
var Content = (0, _index2.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 (0, _addonKnobs.boolean)('isOpen', defaultValue);
};

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

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

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


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

exports.default = _default;