import React from 'react';
import { Tab, TabProps } from './Tab';
import { TabList, TabListProps } from './TabList';
import { TabPanel, TabPanelProps } from './TabPanel';
import { TabContent, TabContentProps } from './Tabcontent';
import { TabProvider } from './context';

export interface ITabs {
  activeKey?: string;
  defaultActiveKey?: string;
  onSelect?(eventKey: any, event: React.SyntheticEvent): void;
  [x: string]: any;
}

export interface TabSubComponentProps {
  Content: React.FC<TabContentProps>;
  Tab: React.FC<TabProps>;
  List: React.FC<TabListProps>;
  Panel: React.FC<TabPanelProps>;
}

export const Tabs: React.FC<ITabs> & TabSubComponentProps = (props) => {
  const { defaultActiveKey, onSelect } = props;

  return (
    <TabProvider onSelect={onSelect} defaultActiveKey={defaultActiveKey}>
      <React.Fragment>{props.children}</React.Fragment>
    </TabProvider>
  );
};

Tabs.Tab = Tab;
Tabs.List = TabList;
Tabs.Panel = TabPanel;
Tabs.Content = TabContent;