/* eslint jsx-a11y/anchor-is-valid: 0 */
import React from 'react';
import { connect } from 'redux-bundler-react';
import ErrorBoundary from '../utils/error-boundary';
import classnames from 'classnames';
import SouthRegionTab from './south-region-tab';

class SouthRegion extends React.Component {  
  constructor(props){
    super(props);
    this.state = {
      activeTab: 0
    }
    this.setActiveTab = this.setActiveTab.bind(this);
  }

  setActiveTab(i){
    this.setState({ activeTab: i });
  }

  render(){
    const { activeTab } = this.state;
    const { height, southRegionChildren } = this.props;
    return (
      <div 
        className="south-container" 
        style={{position:'relative', height: height, left:0, right:0, bottom:0}}
      >

        <ErrorBoundary>
          <div id="south-panel-content">
            <ul className="cm-nav cm-nav-tabs">
              {
                southRegionChildren.map((child, i) => {
                  
                  const activeClass = classnames({
                    "active": i === activeTab
                  })
                  const displayName = child.displayName || 'TABLE';

                  return (
                    <SouthRegionTab 
                      key={child.uid} 
                      idx={i} 
                      activeClass={activeClass}
                      displayName={displayName} 
                      child={child} 
                      onSelect={this.setActiveTab} 
                    />
                  )
                })
              }
            </ul>
            {
              southRegionChildren.map((child, i) => {
                const Comp = child.component;
                const options = child.options || {};
                const panelClass = classnames({
                  "hidden": i !== activeTab
                })
                return (
                  <div className={panelClass} key={i}>
                    <Comp key={child.uid} {...options}/>
                  </div>
                )
              })
            }
          </div>
        </ErrorBoundary>

      </div>
    )
  }
}

export default connect(
  'selectSouthRegionChildren',
  SouthRegion
);