'use strict';

exports.__esModule = true;
exports.Context = undefined;

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _Shared = require('./Shared');

var _reactOnclickout = require('react-onclickout');

var _reactOnclickout2 = _interopRequireDefault(_reactOnclickout);

require('./Shared/element-closest');

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

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

var Context = exports.Context = _react2.default.createContext({});

//component - CoreUI / CSidebar

var CSidebar = function CSidebar(props) {
  var Tag = props.tag,
      children = props.children,
      className = props.className,
      innerRef = props.innerRef,
      breakpoint = props.breakpoint,
      show = props.show,
      fixed = props.fixed,
      unfoldable = props.unfoldable,
      minimize = props.minimize,
      size = props.size,
      hideOnMobileClick = props.hideOnMobileClick,
      aside = props.aside,
      colorScheme = props.colorScheme,
      overlaid = props.overlaid,
      dropdownMode = props.dropdownMode,
      onChange = props.onChange,
      attributes = _objectWithoutProperties(props, ['tag', 'children', 'className', 'innerRef', 'breakpoint', 'show', 'fixed', 'unfoldable', 'minimize', 'size', 'hideOnMobileClick', 'aside', 'colorScheme', 'overlaid', 'dropdownMode', 'onChange']);

  var _useState = (0, _react.useState)(show),
      isOpen = _useState[0],
      setIsOpen = _useState[1];

  var compData = (0, _react.useRef)({ reRender: false, ref: {} }).current;

  //let ref={};
  var reference = function reference(r) {
    compData.ref.current = r;
    innerRef && innerRef(r);
  };

  //methods

  var closeSidebar = function closeSidebar() {
    setIsOpen('responsive');
    onChange && onChange('close');
  };
  var isOnMobile = function isOnMobile() {
    return Boolean(getComputedStyle(compData.ref.current).getPropertyValue('--is-mobile'));
  };
  var onSidebarClick = function onSidebarClick(e) {
    var hiddingElementClicked = e.target.className.includes && e.target.className.includes('c-sidebar-nav-link');
    if (hiddingElementClicked && hideOnMobileClick && isOnMobile()) {
      closeSidebar();
    }
  };
  var onClickOut = function onClickOut(e) {
    if (compData.reRender) {
      return;
    }
    closeSidebar();
  };

  (0, _react.useMemo)(function () {
    if (compData.nextRender) {
      compData.reRender = true;
      setIsOpen(show);
    }
  }, [show]);

  (0, _react.useEffect)(function () {
    compData.reRender = false;
  });

  compData.nextRender = true;

  // render

  var haveResponsiveClass = breakpoint && isOpen === 'responsive';
  var classes = (0, _classnames2.default)(className, 'c-sidebar', colorScheme ? 'c-sidebar-' + colorScheme : null, isOpen === true ? 'c-sidebar-show' : null, haveResponsiveClass ? 'c-sidebar-' + breakpoint + '-show' : null, fixed && !overlaid ? 'c-sidebar-fixed' : null, aside ? 'c-sidebar-right' : null, minimize && !unfoldable ? 'c-sidebar-minimized' : null, minimize && unfoldable ? 'c-sidebar-unfoldable' : null, overlaid ? 'c-sidebar-overlaid' : null, size ? 'c-sidebar-' + size : null);

  var clickOutClasses = (0, _classnames2.default)('c-sidebar-backdrop', isOpen ? 'd-show' : 'd-none');
  var style = {
    background: isOpen ? 'black' : 'white'
  };

  var state = {
    minimize: minimize && !unfoldable
  };

  if (isOpen) return _react2.default.createElement(
    _reactOnclickout2.default,
    { onClickOut: onClickOut },
    _react2.default.createElement(
      Context.Provider,
      { value: {
          dropdownMode: dropdownMode,
          state: state
        } },
      _react2.default.createElement(
        Tag,
        _extends({}, attributes, { className: classes, ref: reference, onClick: onSidebarClick }),
        children
      )
    )
  );else return _react2.default.createElement(
    Context.Provider,
    { value: {
        dropdownMode: dropdownMode,
        state: state
      } },
    _react2.default.createElement(
      Tag,
      _extends({}, attributes, { className: classes, ref: reference, onClick: onSidebarClick }),
      children
    )
  );
};

CSidebar.propTypes = process.env.NODE_ENV !== "production" ? {
  tag: _propTypes2.default.oneOfType([_propTypes2.default.func, _propTypes2.default.string]),
  children: _propTypes2.default.node,
  className: _propTypes2.default.string,
  //
  innerRef: _propTypes2.default.oneOfType([_propTypes2.default.object, _propTypes2.default.func, _propTypes2.default.string]),
  fixed: _propTypes2.default.bool,
  unfoldable: _propTypes2.default.bool,
  overlaid: _propTypes2.default.bool,
  breakpoint: _propTypes2.default.oneOf([false, '', 'sm', 'md', 'lg', 'xl']),
  minimize: _propTypes2.default.bool,
  show: _propTypes2.default.oneOfType([_propTypes2.default.bool, _propTypes2.default.string]),
  size: _propTypes2.default.oneOf(['', 'sm', 'lg', 'xl']),
  hideOnMobileClick: _propTypes2.default.bool,
  aside: _propTypes2.default.bool,
  colorScheme: _propTypes2.default.string,
  dropdownMode: _propTypes2.default.oneOf(['', 'openActive', 'close', 'closeInactive', 'noAction']),
  onChange: _propTypes2.default.func
} : {};

CSidebar.defaultProps = {
  tag: 'div',
  fixed: true,
  breakpoint: 'lg',
  show: 'responsive',
  hideOnMobileClick: true,
  colorScheme: 'dark',
  dropdownMode: 'openActive'
};

exports.default = CSidebar;