'use strict';

exports.__esModule = true;

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _ = require('./..');

var _reactAriaModal = require('react-aria-modal');

var _reactAriaModal2 = _interopRequireDefault(_reactAriaModal);

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

/**
 * @category containers
 * @component modal
 * @variations collab-ui-react
 */

var Modal = function (_Component) {
  (0, _inherits3.default)(Modal, _Component);

  function Modal() {
    var _temp, _this, _ret;

    (0, _classCallCheck3.default)(this, Modal);

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

    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.state = {
      animationClass: ''
    }, _this.closeModal = function () {
      _this.setState({ animationClass: '' });

      return setTimeout(function () {
        _this.props.onHide();
      }, 300);
    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  }

  Modal.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
    var _this2 = this;

    this.props.show !== nextProps.show && nextProps.show && setTimeout(function () {
      _this2.setState({ animationClass: 'in' });
    }, 0);
  };

  Modal.prototype.render = function render() {
    var _this3 = this;

    var _props = this.props,
        show = _props.show,
        className = _props.className,
        size = _props.size,
        backdrop = _props.backdrop,
        backdropClickExit = _props.backdropClickExit,
        escapeExits = _props.escapeExits,
        htmlId = _props.htmlId,
        headerLabel = _props.headerLabel,
        showCloseButton = _props.showCloseButton,
        applicationId = _props.applicationId,
        icon = _props.icon,
        focusDialog = _props.focusDialog;


    var getIcon = function getIcon() {
      if (icon.type.displayName === 'Icon') {
        return icon;
      }
      throw new Error('icon prop needs to be of type Icon.');
    };

    var modalContent = _react2.default.createElement(
      'div',
      { className: 'cui-modal__content' },
      icon && size === 'dialog' && getIcon() && _react2.default.createElement(
        'div',
        { className: 'cui-modal__left-pane' },
        icon
      ),
      _react2.default.createElement(
        'div',
        { className: 'cui-modal__right-pane' },
        headerLabel && _react2.default.createElement(_.ModalHeader, {
          showCloseButton: showCloseButton,
          headerLabel: headerLabel,
          onHide: this.closeModal
        }),
        this.props.children
      )
    );

    var renderModal = function renderModal() {
      return show && _react2.default.createElement(
        _reactAriaModal2.default,
        {
          onExit: _this3.closeModal,
          getApplicationNode: function getApplicationNode() {
            return document.querySelector('#' + applicationId);
          },
          dialogClass: 'cui-modal' + (' cui-modal--' + size) + (' ' + _this3.state.animationClass) + ('' + (className && ' ' + className || '')),
          includeDefaultStyles: false,
          titleId: htmlId,
          underlayClass: backdrop ? 'cui-modal__backdrop fade' + (' ' + _this3.state.animationClass) : '',
          underlayClickExits: backdropClickExit,
          escapeExits: escapeExits,
          focusDialog: focusDialog
        },
        modalContent
      );
    };

    return renderModal();
  };

  return Modal;
}(_react.Component);
/** Library that manages Tabbing and Accessibility for Modal
 *   https://github.com/davidtheclark/react-aria-modal
 */


Modal.displayName = 'Modal';


Modal.defaultProps = {
  children: null,
  show: false,
  size: 'default',
  backdrop: true,
  className: '',
  showCloseButton: true,
  headerLabel: '',
  backdropClickExit: false,
  escapeExits: true,
  icon: null,
  focusDialog: true
};

exports.default = Modal;

/**
* @name Default Modal
* @description Modal with default size.
* @category containers
* @component modal
* @section default
*
* @js

import {
  Button,
  ModalBody,
  ModalFooter
} from '@collab-ui/react';

export default class Default extends React.PureComponent {
  state = {
    showModal: false
  }

  render() {
    return (
      <section>
        <div className='row'>
          <div>
            <Button
              children='Default Modal'
              onClick={() => this.setState({showModal: true})}
              ariaLabel='Open Modal'
              color='primary'
              size='large'
            />
          </div>
        </div>
        <div>
          <Modal
            applicationId='app'
            onHide={() => this.setState({showModal: false})}
            headerLabel='Default Modal'
            show={this.state.showModal}
            ref={modal1 => this.modal1 = modal1}
            htmlId='modal1'
          >
            <ModalBody>
              <form ref={form1 => this.form1 = form1} />
            </ModalBody>
            <ModalFooter>
              <Button
                children='Cancel'
                onClick={() => this.modal1.closeModal()}
                ariaLabel='Close Modal'
                color='default'
              />
              <Button
                children='OK'
                type='submit'
                onClick={(e) => {
                  e.preventDefault();
                  this.modal1.closeModal();
                }}
                ariaLabel='Submit Form'
                color='primary'
              />
            </ModalFooter>
          </Modal>
        </div>
      </section>
    );
  }
}

**/

/**
* @name Dialog Modal
* @description Modal with dialog size.
* @category containers
* @component modal
* @section dialog
*
* @js

import {
  Button,
  ModalBody,
  ModalFooter,
  Icon
} from '@collab-ui/react';

export default class Default extends React.PureComponent {
  state = {
    showModal2: false
  }

  render() {
    return (
      <section>
        <div className='row'>
          <div>
            <Button
              children='Dialog Modal'
              onClick={() => this.setState({showModal2: true})}
              ariaLabel='Open Modal'
              color='primary'
              size='large'
            />
          </div>
        </div>
        <div>
          <Modal
            icon={<Icon name="warning_72" color="$yellow"/>}
            applicationId='app'
            onHide={() => this.setState({showModal2: false})}
            headerLabel='Dialog Modal'
            show={this.state.showModal2}
            ref={modal2 => this.modal2 = modal2}
            size='dialog'
            htmlId='modal2'
          >
            <ModalBody>
              <span>I'm just a dialog box</span>
            </ModalBody>
            <ModalFooter>
              <Button
                children='Cancel'
                onClick={() => this.modal2.closeModal()}
                ariaLabel='Close Modal'
                color='default'
              />
              <Button
                children='OK'
                onClick={() => this.modal2.closeModal()}
                ariaLabel='Submit Form'
                color='primary'
              />
            </ModalFooter>
          </Modal>
        </div>
      </section>
    );
  }
}

**/

/**
* @name Small Modal
* @description Modal with small size.
* @category containers
* @component modal
* @section small
*
* @js

import {
  Button,
  ModalBody,
  ModalFooter,
  Form
} from '@collab-ui/react';

export default class Default extends React.PureComponent {
  state = {
    showModal3: false
  }

  render() {
    return (
      <section>
        <div className='row'>
          <div>
            <Button
              children='Small Modal'
              onClick={() => this.setState({showModal3: true})}
              ariaLabel='Open Modal'
              color='primary'
              size='large'
            />
          </div>
        </div>
        <div>
          <Modal
            applicationId='app'
            onHide={() => this.setState({showModal3: false})}
            headerLabel='Small Modal'
            show={this.state.showModal3}
            ref={modal3 => this.modal3 = modal3}
            size='small'
            htmlId='modal3'
          >
            <ModalBody>
              <form ref={moform2 => this.moform2 = moform2} />
            </ModalBody>
            <ModalFooter>
              <Button
                children='Cancel'
                onClick={() => this.modal3.closeModal()}
                ariaLabel='Close Modal'
                color='default'
              />
              <Button
                children='OK'
                type='submit'
                onClick={(e) => {
                  e.preventDefault;
                  this.modal3.closeModal();
                }}
                ariaLabel='Submit Form'
                color='primary'
              />
            </ModalFooter>
          </Modal>
        </div>
      </section>
    );
  }
}
**/

/**
* @name Full Modal
 * @description Modal with full size.
* @category containers
* @component modal
* @section full
*
* @js

import {
  Button,
  ModalBody,
  ModalFooter
} from '@collab-ui/react';

export default class Default extends React.PureComponent {
  state = {
    showModal: false
  }

  render() {
    return (
      <section>
        <div className='row'>
          <div>
            <Button
              children='Full Modal'
              onClick={() => this.setState({showModal: true})}
              ariaLabel='Open Modal'
              color='primary'
              size='large'
            />
          </div>
        </div>
        <div>
          <Modal
            applicationId='app'
            onHide={() => this.setState({showModal: false})}
            headerLabel='Default Modal'
            show={this.state.showModal}
            ref={modal1 => this.modal1 = modal1}
            htmlId='modal1'
            size='full'
          >
            <ModalBody>
              <form ref={form1 => this.form1 = form1} />
            </ModalBody>
            <ModalFooter>
              <Button
                children='Cancel'
                onClick={() => this.modal1.closeModal()}
                ariaLabel='Close Modal'
                color='default'
              />
              <Button
                children='OK'
                type='submit'
                onClick={(e) => {
                  e.preventDefault();
                  this.modal1.closeModal();
                }}
                ariaLabel='Submit Form'
                color='primary'
              />
            </ModalFooter>
          </Modal>
        </div>
      </section>
    );
  }
}
**/

module.exports = exports['default'];