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

import React, { useContext, useRef } from 'react';
import clsx from 'clsx';
import { getZIndexStyle } from '../utils';
import { BORDER_TOP_BOTTOM } from '../utils/constant';
import useHeight from '../hooks/use-height';
import TabbarContext from './TabbarContext';
import useMergedState from '../hooks/use-merged-state';
import ConfigProviderContext from '../config-provider/ConfigProviderContext';

var Tabbar = function Tabbar(props) {
  var _useContext = useContext(ConfigProviderContext),
      prefixCls = _useContext.prefixCls,
      createNamespace = _useContext.createNamespace;

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

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

  var root = useRef();
  var height = useHeight(root);

  var renderPlaceholder = function renderPlaceholder(renderContent) {
    return /*#__PURE__*/React.createElement("div", {
      className: clsx(bem('placeholder')),
      style: {
        height: height
      }
    }, renderContent());
  }; // enable safe-area-inset-bottom by default when fixed


  var enableSafeArea = function enableSafeArea() {
    var _props$safeAreaInsetB;

    return (_props$safeAreaInsetB = props.safeAreaInsetBottom) != null ? _props$safeAreaInsetB : props.fixed;
  };

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

  var renderTabbar = function renderTabbar() {
    var _clsx;

    var fixed = props.fixed,
        zIndex = props.zIndex,
        border = props.border;
    return /*#__PURE__*/React.createElement(TabbarContext.Provider, {
      value: {
        parent: _extends({}, props, {
          value: current
        })
      }
    }, /*#__PURE__*/React.createElement("div", {
      ref: root,
      style: _extends({}, props.style, getZIndexStyle(zIndex)),
      className: clsx(props.className, bem({
        fixed: fixed
      }), (_clsx = {}, _clsx[BORDER_TOP_BOTTOM] = border, _clsx['rv-safe-area-bottom'] = enableSafeArea(), _clsx))
    }, React.Children.toArray(props.children).filter(Boolean).map(function (child, index) {
      return /*#__PURE__*/React.cloneElement(child, {
        setActive: setActive,
        index: index
      });
    })));
  };

  if (props.fixed && props.placeholder) {
    return renderPlaceholder(renderTabbar);
  }

  return renderTabbar();
};

Tabbar.defaultProps = {
  fixed: true,
  border: true,
  defaultValue: 0
};
export default Tabbar;