var _excluded = ["children", "className", "style"];

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

import React, { useContext, useMemo } from 'react';
import cls from 'clsx';
import useMergedState from '../hooks/use-merged-state';
import ConfigProviderContext from '../config-provider/ConfigProviderContext';
import SidebarItem from './SidebarItem';

var Sidebar = function Sidebar(_ref) {
  var children = _ref.children,
      className = _ref.className,
      style = _ref.style,
      props = _objectWithoutPropertiesLoose(_ref, _excluded);

  var _useContext = useContext(ConfigProviderContext),
      prefixCls = _useContext.prefixCls,
      createNamespace = _useContext.createNamespace;

  var _createNamespace = createNamespace('sidebar', prefixCls),
      bem = _createNamespace[0];

  var _useMergedState = useMergedState({
    value: props.value,
    defaultValue: props.defaultValue
  }),
      active = _useMergedState[0],
      updateActive = _useMergedState[1];

  var getActive = function getActive() {
    return active;
  };

  var setActive = function setActive(value) {
    if (value !== getActive()) {
      updateActive(value);
      props.onChange == null ? void 0 : props.onChange(value);
    }
  };

  var validChildren = useMemo(function () {
    return React.Children.toArray(children).filter(Boolean).map(function (child) {
      if (! /*#__PURE__*/React.isValidElement(child)) return null;

      if (child.type !== SidebarItem) {
        if (process.env.NODE_ENV !== 'production') {
          // eslint-disable-next-line no-console
          console.error('[React Vant] <SidebarItem> must be a child component of <Sidebar>.');
        }

        return null;
      }

      return child;
    });
  }, [children]);
  return /*#__PURE__*/React.createElement("div", {
    className: cls(className, bem('wrapper')),
    style: style
  }, /*#__PURE__*/React.createElement("div", {
    className: cls(props.sideClassName, bem()),
    style: props.sideStyle
  }, validChildren.map(function (child, index) {
    return /*#__PURE__*/React.cloneElement(child, {
      index: index,
      parent: {
        setActive: setActive,
        getActive: getActive
      }
    });
  })), validChildren.map(function (child, index) {
    return /*#__PURE__*/React.createElement("div", {
      className: cls(child.props.contentClassName, bem('content')),
      key: child.key,
      style: _extends({}, child.props.contentStyle, {
        display: index === getActive() ? undefined : 'none'
      })
    }, child.props.children);
  }));
};

Sidebar.defaultProps = {
  defaultValue: 0
};
export default Sidebar;