import React from 'react';
import { checkDeepEquals } from '../../UtilitiesFunctions/objectUtilities';
import PropTypes from 'prop-types';
import { TabsWrap } from './tabsStyledComponent';

class Tabs extends React.Component {
  render() {
    var ComputedComponent = null;
    var tabs = this.props.tabs.map((tab, k) => {
      var classNameDerived = 'tab';
      let style = Object.assign({}, this.props.tabStyle ? this.props.tabStyle : {});
      if (this.props.selected && this.props.selected.label && (tab.label == this.props.selected.label)) {
        classNameDerived += ' selected';
        ComputedComponent = tab.component;
        this.props.selectedTabStyle &&
          Object.keys(this.props.selectedTabStyle).map(key => {
            style[key] = this.props.selectedTabStyle[key];
          })
      }
      return <div
        style={style}
        key={k}
        className={classNameDerived}
        onClick={() => this.props.onChange(tab)}>
        {tab['label']}
      </div>
    })
    return (
      <div style={{ 'width': '100%' }}>
        <TabsWrap className="tab-header" width={this.props.width}>
          {tabs}
        </TabsWrap>
        <div className="dynamicComponent" style={{ width: (this.props.componentWidth?this.props.componentWidth:this.props.width) }}><ComputedComponent {...this.props.selectedTabProps} /></div>
      </div>
    );
  }
};

Tabs.propTypes = {
  tabs: PropTypes.array,
  selected: PropTypes.object,
  onChange: PropTypes.func
}

module.exports = { Tabs }

