import { Tabs } from 'antd';
import React, { ReactElement, useMemo } from 'react';
import { PageHeader, PageHeaderProps } from './PageHeader';

export type PageTabHeaderProps = {
    tabList: {
        tab: ReactElement | string,
        key: string,
    }[],
    onTabChange: (activeKey: string) => void,
    activeTabKey: string,
    extra?: ReactElement,
    tabExtra?: ReactElement,
} & PageHeaderProps;

const TabPane = Tabs.TabPane;
/**
    性能优化:
        Issue: 切换Tab时，会导致光标的重复移动，问题在于外层组件的重复渲染
        Methods:
            1. React.memo 相当于 React.PureComponent，但是由于外层组件，总是使用 bind() 每次返回新对象，这个相当于没用
            2. useMemo 只监听 activeTabKey，变化时触发更新，从而减少多次触发 Tab 切换。
                WARN: 如果有其他值要在运行时更新，需要增加监听 -> 如果增加监听可能引起性能 -> 约束使用 bind、每次新建 object 代码
 */
export const PageTabHeader: React.FunctionComponent<PageTabHeaderProps> = (props) => {
    let { tabList, onTabChange, activeTabKey, tabExtra, ...pageHeaderProps } = props;
    const memoizedTabs = useMemo(() => (
        <Tabs
            style={{
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'flex-end',
            }}
            size="large"
            tabBarStyle={{
                borderBottom: 0,
                marginBottom: '1px',
                fontWeight: 800,
                color: 'rgba(0, 0, 0, 0.32)',
                display: 'flex',
                alignItems: 'flex-end',
            }}
            activeKey={activeTabKey}
            onChange={onTabChange}>
            {
                tabList.map((tab) => (
                    <TabPane
                        tab={tab.tab}
                        key={tab.key}
                    >
                    </TabPane>
                ))
            }
        </Tabs>
    ), [activeTabKey]);
    return (
        <PageHeader
            { ...pageHeaderProps }
        >
            <div className={'jad-page-layout1-tab-header-children'}>
                {
                    tabList.length > 0 && (
                        memoizedTabs
                    )
                }
                <div>
                    { tabExtra }
                </div>
            </div>
        </PageHeader>
    )
};