import React from 'react';
import {Tabs as BTabs, TabsProps as BootstrapTabsProps, Tab, Row, Col, Nav} from 'react-bootstrap';

interface TabProps extends BootstrapTabsProps {
  tabs: any[];
  vertical?: boolean;
}

const Tabs = ({tabs, vertical, ...props}: TabProps) => {
  return vertical ? (
    <Tab.Container {...props}>
      <Row>
        <Col sm={3}>
          <Nav variant="pills" className="flex-column">
            {
              tabs.map(item => (
                <Nav.Item key={item.eventKey}>
                  <Nav.Link eventKey={item.eventKey}>
                    {item.title}
                  </Nav.Link>
                </Nav.Item>
              ))
            }
          </Nav>
        </Col>
        <Col sm={9}>
          <Tab.Content>
            {
              tabs.map(item => (
                <Tab.Pane key={item.eventKey} eventKey={item.eventKey}>
                  {item.component}
                </Tab.Pane>
              ))
            }
          </Tab.Content>
        </Col>
      </Row>
    </Tab.Container>
  ) : (
    <BTabs {...props}>
      {
        tabs.map(item => (
          <Tab
            key={item.eventKey}
            eventKey={item.eventKey}
            title={item.title}
            disabled={item.disabled}
          >
            {item.component}
          </Tab>
        ))
      }
    </BTabs>
  );
};

export default Tabs;
export {Tabs, TabProps};