import React, { useState, useContext, useMemo, forwardRef } from 'react';
import clsx from 'clsx';
import TabsContext from './TabsContext';
import { useUpdateEffect } from '../hooks';
import ConfigProviderContext from '../config-provider/ConfigProviderContext';
var TabPane = /*#__PURE__*/forwardRef(function (props, ref) {
  var _useContext = useContext(ConfigProviderContext),
      prefixCls = _useContext.prefixCls,
      createNamespace = _useContext.createNamespace;

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

  var parent = useContext(TabsContext);
  var _parent$props = parent.props,
      animated = _parent$props.animated,
      swipeable = _parent$props.swipeable,
      scrollspy = _parent$props.scrollspy,
      lazyRender = _parent$props.lazyRender,
      lazyRenderPlaceholder = _parent$props.lazyRenderPlaceholder;
  var index = props.index;
  var name = useMemo(function () {
    var _props$name;

    return (_props$name = props.name) != null ? _props$name : index;
  }, [index, props.name]);
  var active = useMemo(function () {
    return name === parent.currentName;
  }, [name, parent.currentName]);

  var _useState = useState(function () {
    return active;
  }),
      inited = _useState[0],
      setInited = _useState[1];

  var init = function init() {
    setInited(true);
  };

  var isActive = useMemo(function () {
    if (active && !inited) {
      init();
    }

    return active;
  }, [active, inited]);
  useUpdateEffect(function () {
    parent.setLine();
    parent.scrollIntoView();
  }, [props.title]);
  var show = scrollspy || isActive;
  var shouldRender = inited || scrollspy || !lazyRender;
  var Content = shouldRender ? props.children : lazyRenderPlaceholder;

  if (animated || swipeable) {
    return /*#__PURE__*/React.createElement("div", {
      ref: ref,
      role: "tabpanel",
      className: clsx(bem('pane'))
    }, Content);
  }

  return /*#__PURE__*/React.createElement("div", {
    ref: ref,
    style: {
      display: show ? 'block' : 'none'
    },
    role: "tabpanel",
    className: clsx(bem('pane'))
  }, Content);
});
TabPane.defaultProps = {
  showZeroBadge: true
};
export default TabPane;