import React, { useCallback, useState, useMemo, useEffect, useRef } from 'react';

import { Tabs } from 'antd';
import IconFont from '../../themeComponents/IconFont';
import './index.less';
const { TabPane } = Tabs;

function TabLayout({ activeKey, defaultKey, onTabChange, tabList, hasRightExt = true, className = '', centered = true, leftExtContent, rightExtContent, isRightHead = false, leftWidth, rightWidt, ...props }) {
  const [activeModule, setModule] = useState(defaultKey || tabList[0]?.name);
  const headerLeftRef = useRef({});
  const headerRightRef = useRef({});

  const rightView = useMemo(
    () => (
      <div className="right-ext" style={{ minWidth: rightWidt || isRightHead ? 'var(--sider-size)' : 'auto' }}>
        {hasRightExt && (
          <>
            {rightExtContent}
            {tabList.map((item) => (
              <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' }}
              />
            ))}
          </>
        )}
      </div>
    ),
    [tabList, activeModule, rightExtContent, hasRightExt, rightWidt, isRightHead]
  );
  const leftView = useMemo(
    () => (
      <>
        <div className="left-ext" style={{ minWidth: leftWidth || isRightHead ? 'var(--sider-size)' : 'auto' }}>
          {hasRightExt && (
            <>
              {leftExtContent}
              {tabList.map((item) => (
                <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' }}
                />
              ))}
            </>
          )}
        </div>
      </>
    ),
    [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 (
    <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) => (
        <TabPane
          className="lm-tab-layout-tab"
          tab={
            <div className="lm-tab-layout-tab-title">
              {item.icon && <IconFont type={item.icon} />}
              {item.title}
            </div>
          }
          key={item.name}
        >
          {React.cloneElement(item.content, {
            ...props,
            activeKey: activeModule,
            getHeaderLeftExtContent: () => headerLeftRef.current[item.name],
            getHeaderRightExtContent: () => headerRightRef.current[item.name],
            tabItem: item,
          })}
        </TabPane>
      ))}
    </Tabs>
  );
}

export default React.memo(TabLayout);
