import React from 'react';
import { Tabs } from 'antd';
import { linkTo, getMap } from '../../services/Tools';

export default function(props) {
  const { tabs = [], active, rightElement } = props;
  const tabMap = getMap(tabs, 'key');
  return (
    <div id={props.id} className="tab-right-layout">
      <div className="body-element">
        {tabs.length > 0 && (
          <Tabs
            activeKey={active}
            onTabClick={key => {
              linkTo(tabMap[key].path);
            }}
          >
            {tabs.map(tab => {
              return <Tabs.TabPane tab={tab.name} key={tab.key} />;
            })}
          </Tabs>
        )}
        {props.children}
      </div>
      {!!rightElement && <div className="right-element">{rightElement}</div>}
    </div>
  );
}
