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

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

import React, { useState, useRef, useMemo, useEffect } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { sidebarCssClasses } from './Shared';
import ClickOutHandler from 'react-onclickout';
import './Shared/element-closest';

export var Context = React.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 = useState(show),
      isOpen = _useState[0],
      setIsOpen = _useState[1];

  var compData = 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();
  };

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

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

  compData.nextRender = true;

  // render

  var haveResponsiveClass = breakpoint && isOpen === 'responsive';
  var classes = classNames(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 = classNames('c-sidebar-backdrop', isOpen ? 'd-show' : 'd-none');
  var style = {
    background: isOpen ? 'black' : 'white'
  };

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

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

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

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

export default CSidebar;