import "core-js/modules/web.dom.iterable";
import "core-js/modules/es6.array.iterator";
import "core-js/modules/es6.object.keys";
import "core-js/modules/es6.object.assign";

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }

import React from 'react';
import PropTypes from 'prop-types';
import { omit } from 'lodash';
import { EventOverlay, Button } from "./..";
/**
 * @category communication
 * @component coachmark
 * @variations collab-ui-react
 */

var Coachmark =
/*#__PURE__*/
function (_React$Component) {
  _inheritsLoose(Coachmark, _React$Component);

  function Coachmark() {
    var _this;

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

    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
    _this.state = {
      isOpen: _this.props.isOpen
    };

    _this.delayedHide = function (e) {
      var onClick = _this.props.onClick;

      if (_this.showTimerId) {
        clearTimeout(_this.showTimerId);
        _this.showTimerId = null;
      }

      var delay = _this.props.hideDelay ? _this.props.hideDelay : _this.props.delay;
      _this.hideTimerId = setTimeout(function () {
        _this.hideTimerId = null;

        _this.setState(function () {
          onClick && onClick(e);
          return {
            isOpen: false
          };
        });
      }, delay);
    };

    _this.delayedShow = function () {
      if (_this.hideTimerId) {
        clearTimeout(_this.hideTimerId);
        _this.hideTimerId = null;
      }

      var delay = _this.props.showDelay ? _this.props.showDelay : _this.props.delay;
      _this.showTimerId = setTimeout(function () {
        _this.showTimerId = null;

        _this.setState({
          isOpen: true
        });
      }, delay);
    };

    _this.handleClose = function () {
      _this.setState({
        isOpen: false
      });
    };

    return _this;
  }

  var _proto = Coachmark.prototype;

  _proto.componentDidMount = function componentDidMount() {
    this.props.isOpen && this.delayedShow();
  };

  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
    if (prevProps.isOpen !== this.props.isOpen) {
      return this.props.isOpen ? this.delayedShow() : this.delayedHide();
    }
  };

  _proto.componentWillUnmount = function componentWillUnmount() {
    this.hideTimerId && clearTimeout(this.hideTimerId);
    this.showTimerId && clearTimeout(this.showTimerId);
  };

  _proto.render = function render() {
    var _this2 = this;

    var _this$props = this.props,
        allowClickAway = _this$props.allowClickAway,
        buttonChildren = _this$props.buttonChildren,
        className = _this$props.className,
        children = _this$props.children,
        closeOnClick = _this$props.closeOnClick,
        contentNode = _this$props.contentNode,
        direction = _this$props.direction,
        header = _this$props.header,
        maxWidth = _this$props.maxWidth,
        onClick = _this$props.onClick,
        subheader = _this$props.subheader,
        props = _objectWithoutPropertiesLoose(_this$props, ["allowClickAway", "buttonChildren", "className", "children", "closeOnClick", "contentNode", "direction", "header", "maxWidth", "onClick", "subheader"]);

    var otherProps = omit(Object.assign({}, props), ['delay', 'hideDelay', 'isOpen', 'showDelay']);
    var anchorWithRef = children && React.cloneElement(children, {
      ref: function ref(ele) {
        return _this2.anchorRef = ele;
      }
    });
    var content = React.createElement("div", {
      className: "cui-coachmark__container"
    }, contentNode ? contentNode : [header && React.createElement("div", {
      className: "cui-coachmark__header",
      key: "content-0"
    }, header), subheader && React.createElement("div", {
      className: "cui-coachmark__subheader",
      key: "content-1"
    }, subheader), onClick && React.createElement(Button, _extends({
      onClick: this.delayedHide
    }, otherProps, {
      key: "content-2"
    }), buttonChildren)]);
    return React.createElement("div", {
      className: "cui-coachmark"
    }, anchorWithRef, React.createElement(EventOverlay, _extends({
      ref: function ref(_ref) {
        return _this2.overlay = _ref;
      },
      allowClickAway: allowClickAway,
      anchorNode: this.anchorRef,
      isOpen: this.state.isOpen,
      className: className,
      showArrow: true,
      direction: direction,
      close: this.handleClose,
      closeOnClick: closeOnClick
    }, maxWidth && {
      maxWidth: maxWidth
    }), content));
  };

  return Coachmark;
}(React.Component);

Coachmark.displayName = 'Coachmark';
Coachmark.defaultProps = {
  allowClickAway: false,
  buttonChildren: null,
  children: null,
  className: '',
  closeOnClick: false,
  contentNode: null,
  delay: 0,
  direction: 'top-center',
  header: '',
  hideDelay: 0,
  isOpen: false,
  maxWidth: null,
  onClick: null,
  showDelay: 0,
  subheader: ''
};
Coachmark.propTypes = {
  /** @prop Allows user to click outside of element | false */
  allowClickAway: PropTypes.bool,

  /** @prop Button nodes within Coachmark | null */
  buttonChildren: PropTypes.node,

  /** @prop Optional css class string | '' */
  className: PropTypes.string,

  /** @prop Children nodes to render inside Coachmark | null */
  children: PropTypes.node.isRequired,

  /** @prop Allows Coachmark to be closed by a click from the user | false */
  closeOnClick: PropTypes.bool,

  /** @prop Node with content that populates the Coachmark | null */
  contentNode: PropTypes.node,

  /** @prop Sets the time the timer is delayed | 0 */
  delay: PropTypes.number,

  /** @prop Sets the direction the Coachmark opens up | 'top-center' */
  direction: PropTypes.oneOf(['top-center', 'top-left', 'top-right', 'left-center', 'left-top', 'left-bottom', 'bottom-center', 'bottom-left', 'bottom-right', 'right-center', 'right-top', 'right-bottom']),

  /** @prop Sets the header node of Coachmark | '' */
  header: PropTypes.node,

  /** @prop Sets the time delay to hide the Coachmark | 0 */
  hideDelay: PropTypes.number,

  /** @prop Sets the initial visibility of Coachmark | false */
  isOpen: PropTypes.bool,

  /** @prop Sets the maximum width of Coachmark | null */
  maxWidth: PropTypes.number,

  /** @prop Handler to be called when the user clicks the Coachmark | null */
  onClick: PropTypes.func,

  /** @prop Shows visibility of the delay value | 0 */
  showDelay: PropTypes.number,

  /** @prop Sets the subheader node of the Coachmark | '' */
  subheader: PropTypes.node
};
export default Coachmark;
/**
* @name Coachmark Default
*
* @category communication
* @component coachmark
* @section default
*
* @js

import { 
  Avatar,
  Button,
  Coachmark,
  SpaceListItem,
} from '@collab-ui/react';

 export default class Default extends React.Component {

  state = {
    openFirst: true,
    openNext: false,
    openLast: false
  }

  render() {
    const {openFirst, openNext, openLast} = this.state;

    return (
      <div style={{display: 'flex', flexFlow: 'row nowrap', justifyContent: 'space-between'}}>
        <Coachmark 
          isOpen={openFirst}
          maxWidth={272}
          onClick={() => this.setState({openFirst: false, openNext: true})}
          buttonChildren={'Got It'}
          header={`Header prop(node)`}
          subheader={`Subheader prop(node)`}
          direction='bottom-center'
          ariaLabel='Open Coachmark 1'
        >
          <Button ariaLabel='test' onClick={() => this.setState({openFirst: true, openNext: false, openLast: false})}>Coachmark Anchor</Button>
        </Coachmark>
        <Coachmark
          isOpen={openNext}
          onClick={() => this.setState({openLast: true, openNext: false})}
          buttonChildren={'Click for next Coachmark'}
          header={`Header prop(node)`}
          direction='top-center'
          ariaLabel='Open Coachmark 2'
        >
          <Button ariaLabel='test' onClick={() => this.setState({openFirst: false, openNext: true, openLast: false})}>2nd Coachmark Anchor</Button>
        </Coachmark>
        <Coachmark isOpen={openLast}
          contentNode={<div>contentNode prop(node)</div>}
          direction='bottom-center'
          ariaLabel='Open Coachmark 3'
        >
          <Button ariaLabel='test' onClick={() => this.setState({openFirst: false, openNext: false, openLast: true})}>3rd Coachmark Anchor</Button>
        </Coachmark>
      </div>
    );
  }
}
**/