import React__default, { useState, useRef, useMemo, useCallback, useEffect } from 'react';
import { Tabs } from 'antd';
import IconFont from '../IconFont/index.js';
import '../_rollupPluginBabelHelpers-736b301a.js';
import '@zenview/micro-utils';

const {
  TabPane
} = Tabs;
function TabLayout({
  activeKey,
  defaultKey,
  onTabChange,
  tabList,
  hasRightExt = true,
  className = '',
  centered = true,
  leftExtContent,
  rightExtContent,
  isRightHead = false,
  leftWidth,
  rightWidt,
  ...props
}) {
  var _tabList$;
  const [activeModule, setModule] = useState(defaultKey || ((_tabList$ = tabList[0]) === null || _tabList$ === void 0 ? void 0 : _tabList$.name));
  const headerLeftRef = useRef({});
  const headerRightRef = useRef({});
  const rightView = useMemo(() => /*#__PURE__*/React__default.createElement("div", {
    className: "right-ext",
    style: {
      minWidth: rightWidt || isRightHead ? 'var(--sider-size)' : 'auto'
    }
  }, hasRightExt && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, rightExtContent, tabList.map(item => /*#__PURE__*/React__default.createElement("div", {
    ref: dom => {
      headerRightRef.current[item.name] = dom;
    },
    key: item.name,
    className: `right-ext-item right-ext-has-${item.name}`,
    style: {
      width: '100%',
      height: '100%',
      display: item.name === activeModule ? 'block' : 'none'
    }
  })))), [tabList, activeModule, rightExtContent, hasRightExt, rightWidt, isRightHead]);
  const leftView = useMemo(() => /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
    className: "left-ext",
    style: {
      minWidth: leftWidth || isRightHead ? 'var(--sider-size)' : 'auto'
    }
  }, hasRightExt && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, leftExtContent, tabList.map(item => /*#__PURE__*/React__default.createElement("div", {
    ref: dom => {
      headerLeftRef.current[item.name] = dom;
    },
    key: item.name,
    className: `left-ext-item left-ext-has-${item.name}`,
    style: {
      width: '100%',
      height: '100%',
      display: item.name === activeModule ? 'block' : 'none'
    }
  }))))), [tabList, activeModule, hasRightExt, leftExtContent, isRightHead, leftWidth]);
  const onTabChangeAction = useCallback(key => {
    const obj = {};
    for (let index = 0; index < tabList.length; index++) {
      if (tabList[index].name === key) {
        obj.item = tabList[index];
        obj.index = index;
        break;
      }
    }
    setModule(key);
    onTabChange && onTabChange(obj);
  }, [onTabChange, tabList]);
  useEffect(() => {
    if (activeKey) {
      const obj = tabList.find(v => v.name === activeKey);
      obj && setModule(activeKey);
    }
  }, [activeKey, tabList]);
  return /*#__PURE__*/React__default.createElement(Tabs, {
    className: `lm-tab-layout ${className} ${isRightHead ? 'lm-tab-layout-right-header' : ''}`,
    onChange: onTabChangeAction,
    activeKey: activeModule,
    centered: centered,
    animated: true,
    tabBarExtraContent: {
      left: leftView,
      right: rightView
    }
  }, tabList.map(item => /*#__PURE__*/React__default.createElement(TabPane, {
    className: "lm-tab-layout-tab",
    tab: /*#__PURE__*/React__default.createElement("div", {
      className: "lm-tab-layout-tab-title"
    }, item.icon && /*#__PURE__*/React__default.createElement(IconFont, {
      type: item.icon
    }), item.title),
    key: item.name
  }, /*#__PURE__*/React__default.cloneElement(item.content, {
    ...props,
    activeKey: activeModule,
    getHeaderLeftExtContent: () => headerLeftRef.current[item.name],
    getHeaderRightExtContent: () => headerRightRef.current[item.name],
    tabItem: item
  }))));
}
var index = /*#__PURE__*/React__default.memo(TabLayout);

export { index as default };
//# sourceMappingURL=index.js.map
