import React, { useMemo } from 'react';

import Wrap from '../wrap/Wrap';
import { Tabs } from 'antd';

const { TabPane } = Tabs;

import '../g.scss';

function LabelTabs(props: ILabelTabs) {
  const {
    title = 'lable',
    value,
    change,
    tabsList=[],
    paddingSize = 'normal',
    tabsRender,
    wrapStyle = { padding: '6px 20px 6px 20px' }
  } = props;

  const Dom = useMemo(() => {
    return (
      <Wrap wrapStyle={wrapStyle}>
        <div className="zl-large-sreen-unit-tabs-wrap">
          <Tabs
            defaultActiveKey={value}
            tabPosition="top"
            onChange={(activeKey) => change?.(activeKey, 'tabs')}
          >
            {Array.isArray(tabsList) &&
              tabsList?.length > 0 &&
              tabsList?.map((item) => {
                return (
                  <TabPane tab={item?.tabTitle} key={item?.key}>
                    {item?.tabContent.map((item2) => {
                      return tabsRender(item2, item);
                    })}
                  </TabPane>
                );
              })}
          </Tabs>
        </div>
      </Wrap>
    );
  }, [title, value, tabsList, paddingSize]);

  return Dom;
}

export default LabelTabs;

export interface ILabelTabs {
  title?: string | number;
  value?: string | number;
  change?: Function;
  size?: string;
  paddingSize?: string;
  tabsList?: ITabs[];
  tabsRender?: Function;
  wrapStyle?: React.CSSProperties;
}
export interface ITabs {
  key?: string;
  tabTitle?: string;
  tabContent: any;
}