import React, { useState } from 'react';
import { Card } from 'antd';
import { useLocalStorageState } from 'ahooks';
import { CardProps, CardTabListType } from 'antd/es/card';
import styles from './index.less';

export interface TabsCardProps extends CardProps {
  tabList: CardTabListType[];
  contentList: Record<string, React.Component> | Function;
  tabLocalStorageKey?: string;
}

const TabsCard: React.FC<TabsCardProps> = props => {
  const {
    tabList,
    onTabChange,
    activeTabKey,
    contentList,
    defaultActiveTabKey = '',
    tabLocalStorageKey = 'lins-government-tabs',
    ...rest
  } = props;
  const [state, setState] = useLocalStorageState(
    tabLocalStorageKey,
    defaultActiveTabKey,
  );

  const realActiveTabKey = activeTabKey ? activeTabKey : state;

  const handleTabChange = (key: string) => {
    setState(key);
    onTabChange?.(key);
  };

  const renderContent = () => {
    if (typeof contentList === 'function') {
      return contentList(realActiveTabKey);
    } else {
      return contentList[realActiveTabKey];
    }
  };
  return (
    <div className={styles.main}>
      <Card
        bordered={false}
        defaultActiveTabKey={defaultActiveTabKey}
        activeTabKey={realActiveTabKey}
        tabList={tabList}
        onTabChange={handleTabChange}
        {...rest}
      >
        {renderContent()}
      </Card>
    </div>
  );
};
TabsCard.defaultProps = {};

export default TabsCard;