var _examples$SIMPLE_EXAM;

function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

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.
*/

/* global document */
import * as React from 'react';
import { select as selectKnob } from '@storybook/addon-knobs';
import { Button } from '../button/index.js';
import { Input } from '../input/index.js';
import examples from './examples-list.js';
import { styled } from '../styles/index.js';
import { SIZE, Modal, ModalHeader, ModalBody, ModalFooter, ModalButton } from './index.js';
var Centered = styled('div', {
  position: 'relative',
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'center',
  alignItems: 'center',
  height: '90vh'
});
Centered.displayName = "Centered";

var ModalStateContainer =
/*#__PURE__*/
function (_React$Component) {
  _inherits(ModalStateContainer, _React$Component);

  function ModalStateContainer() {
    var _getPrototypeOf2;

    var _this;

    _classCallCheck(this, ModalStateContainer);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(ModalStateContainer)).call.apply(_getPrototypeOf2, [this].concat(args)));

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", {
      isOpen: _this.props.isInitiallyOpen
    });

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "toggle", function () {
      var open = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !_this.state.isOpen;

      _this.setState({
        isOpen: Boolean(open)
      });
    });

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "open", function () {
      _this.toggle(true);
    });

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "close", function () {
      _this.toggle(false);
    });

    return _this;
  }

  _createClass(ModalStateContainer, [{
    key: "render",
    value: function render() {
      return this.props.children(_objectSpread({
        toggle: this.toggle,
        open: this.open,
        close: this.close,
        setState: this.setState.bind(this)
      }, this.state));
    }
  }]);

  return ModalStateContainer;
}(React.Component);

_defineProperty(ModalStateContainer, "defaultProps", {
  isInitiallyOpen: false
});

var sizeKnob = function sizeKnob() {
  return selectKnob('size', [SIZE.default, SIZE.full, SIZE.auto, '800px', '50vw'], 'default');
};

export default (_examples$SIMPLE_EXAM = {}, _defineProperty(_examples$SIMPLE_EXAM, examples.SIMPLE_EXAMPLE, function Story1() {
  return React.createElement(Centered, null, React.createElement(ModalStateContainer, {
    isInitiallyOpen: true
  }, function (_ref) {
    var open = _ref.open,
        close = _ref.close,
        isOpen = _ref.isOpen;
    return React.createElement(React.Fragment, null, React.createElement(Button, {
      onClick: open,
      className: "open-modal-button"
    }, "Open Modal"), React.createElement(Modal, {
      onClose: close,
      isOpen: isOpen,
      size: sizeKnob()
    }, React.createElement(ModalHeader, null, "Hello world"), React.createElement(ModalBody, null, "Proin ut dui sed metus pharetra hend rerit vel non mi. Nulla ornare faucibus ex, non facilisis nisl. Maecenas aliquet mauris ut tempus."), React.createElement(ModalFooter, null, React.createElement(ModalButton, {
      onClick: close
    }, "Cancel"), React.createElement(ModalButton, {
      onClick: close
    }, "Okay"))));
  }));
}), _defineProperty(_examples$SIMPLE_EXAM, examples.SCROLLING_EXAMPLE, function Story2() {
  return React.createElement(Centered, null, React.createElement(ModalStateContainer, {
    isInitiallyOpen: true
  }, function (_ref2) {
    var open = _ref2.open,
        close = _ref2.close,
        isOpen = _ref2.isOpen;
    return React.createElement(React.Fragment, null, React.createElement(Button, {
      onClick: open
    }, "Open Modal"), React.createElement(Modal, {
      onClose: close,
      isOpen: isOpen
    }, React.createElement(ModalHeader, null, "Hello world"), React.createElement(ModalBody, null, [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(function (i) {
      return React.createElement("p", {
        key: i
      }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porta orci at elit commodo, ac interdum velit accumsan. Duis congue suscipit erat non blandit. In dapibus mi elit, quis mattis sapien lobortis ac. Duis sollicitudin congue dolor, ac tincidunt massa tincidunt eget. Fusce pretium, risus et consectetur venenatis, urna metus scelerisque est, ac malesuada est metus volutpat justo. Praesent ultrices, lectus ac tincidunt eleifend, augue mi maximus ante, non eleifend justo sem quis justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi ante magna, blandit ut enim non, sollicitudin faucibus est. Aliquam a tellus fermentum urna finibus facilisis vitae in est.");
    })), React.createElement(ModalFooter, null, React.createElement(ModalButton, {
      onClick: close
    }, "Cancel"), React.createElement(ModalButton, {
      onClick: close
    }, "Okay"))));
  }));
}), _defineProperty(_examples$SIMPLE_EXAM, examples.CLOSEABLE_EXAMPLE, function Story3() {
  return React.createElement(Centered, null, React.createElement(ModalStateContainer, {
    isInitiallyOpen: true
  }, // $FlowFixMe
  function (_ref3) {
    var open = _ref3.open,
        close = _ref3.close,
        isOpen = _ref3.isOpen,
        setState = _ref3.setState,
        value = _ref3.value;
    return React.createElement(React.Fragment, null, React.createElement(Button, {
      onClick: open
    }, "Open Modal"), React.createElement(Modal, {
      onClose: close,
      isOpen: isOpen,
      closeable: false
    }, React.createElement(ModalHeader, null, "Please Authenticate"), React.createElement(ModalBody, null, React.createElement("div", null, "This modal cannot be closed by the user. Enter", ' ', React.createElement("strong", null, "abc123"), " to continue:"), React.createElement("div", {
      style: {
        marginTop: '12px'
      }
    }, React.createElement(Input, {
      value: value,
      onChange: // $FlowFixMe
      function onChange(evt) {
        return setState({
          value: evt.target.value
        });
      },
      placeholder: "Enter password"
    }))), React.createElement(ModalFooter, null, React.createElement(ModalButton, {
      onClick: close,
      disabled: value !== 'abc123'
    }, "Authenticate"))));
  }));
}), _defineProperty(_examples$SIMPLE_EXAM, examples.MOUNT_NODE_EXAMPLE, function Story3() {
  var CustomMountNodeExample =
  /*#__PURE__*/
  function (_React$Component2) {
    _inherits(CustomMountNodeExample, _React$Component2);

    function CustomMountNodeExample() {
      var _getPrototypeOf3;

      var _this2;

      _classCallCheck(this, CustomMountNodeExample);

      for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
        args[_key2] = arguments[_key2];
      }

      _this2 = _possibleConstructorReturn(this, (_getPrototypeOf3 = _getPrototypeOf(CustomMountNodeExample)).call.apply(_getPrototypeOf3, [this].concat(args)));

      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this2)), "mountNode", void 0);

      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this2)), "state", {
        mounted: false
      });

      return _this2;
    }

    _createClass(CustomMountNodeExample, [{
      key: "componentDidMount",
      value: function componentDidMount() {
        this.mountNode = document.createElement('div');
        this.mountNode.classList.add('custom-mount-node');

        if (document.body) {
          document.body.append(this.mountNode);
        }

        this.setState({
          mounted: true
        });
      }
    }, {
      key: "componentWillUnmount",
      value: function componentWillUnmount() {
        var _this3 = this;

        setTimeout(function () {
          if (_this3.mountNode.parentNode) {
            _this3.mountNode.parentNode.removeChild(_this3.mountNode);
          }
        }, 10);
      }
    }, {
      key: "render",
      value: function render() {
        var _this4 = this;

        if (!this.state.mounted) {
          return false;
        }

        return React.createElement(Centered, null, React.createElement(ModalStateContainer, {
          isInitiallyOpen: true
        }, function (_ref4) {
          var open = _ref4.open,
              close = _ref4.close,
              isOpen = _ref4.isOpen;
          return React.createElement(React.Fragment, null, React.createElement(Button, {
            onClick: open
          }, "Open Modal"), React.createElement(Modal, {
            onClose: close,
            isOpen: isOpen,
            mountNode: _this4.mountNode
          }, React.createElement(ModalHeader, null, "Hello world"), React.createElement(ModalBody, null, React.createElement("p", null, "If you inspect the DOM, you will see that this modal was mounted into a custom node on the page, instead of as a child of document.body."), React.createElement("p", null, "This can be useful for applications which have a complicated DOM structure and need more control over mount points.")), React.createElement(ModalFooter, null, React.createElement(ModalButton, {
            onClick: close
          }, "Okay"))));
        }));
      }
    }]);

    return CustomMountNodeExample;
  }(React.Component);

  return React.createElement(CustomMountNodeExample, null);
}), _defineProperty(_examples$SIMPLE_EXAM, examples.STYLE_OVERRIDES, function Story1() {
  return React.createElement(Centered, null, React.createElement(ModalStateContainer, {
    isInitiallyOpen: true
  }, function (_ref5) {
    var open = _ref5.open,
        close = _ref5.close,
        isOpen = _ref5.isOpen;
    return React.createElement(React.Fragment, null, React.createElement(Button, {
      onClick: open
    }, "Open Modal"), React.createElement(Modal, {
      overrides: {
        Backdrop: {
          style: {
            backgroundColor: 'rgba(43, 116, 226, 0.2)'
          }
        },
        Dialog: {
          style: {
            backgroundColor: 'rgb(43, 116, 226)',
            borderRadius: '0px'
          }
        },
        Close: {
          style: {
            color: 'white',
            ':hover': {
              color: 'white',
              opacity: 0.2
            }
          }
        }
      },
      onClose: close,
      isOpen: isOpen
    }, React.createElement(ModalHeader, {
      $style: {
        color: 'white',
        fontSize: '48px'
      }
    }, "Hello world"), React.createElement(ModalBody, {
      $style: {
        color: 'white',
        fontStyle: 'italic'
      }
    }, "Proin ut dui sed metus pharetra hend rerit vel non mi. Nulla ornare faucibus ex, non facilisis nisl. Maecenas aliquet mauris ut tempus.")));
  }));
}), _examples$SIMPLE_EXAM);