/**
 * imui.Tab.TabNav
 * @author jero
 * @date 2016-07-21
 */
import React from 'react';
import classnames from 'classnames';
// @require '../style/index.scss'

export default class TabNav extends React.Component {

  state = {
    active: this.props.active,
  };

  componentWillReceiveProps(nextProps) {
    this.setState({
      active: nextProps.active,
    });
  }

  onTabClick = (next) => {
    const { active } = this.state;
    const { onTabClick, onActive, onBeforeActive } = this.props;

    onTabClick(next, +active);

    if (next !== +active && onBeforeActive(next, +active) !== false) {
      this.setState({
        active: next,
      });
      onActive(next, +active);
    }
  };

  createTabs = (panels, active, tabScene) => {
    const tabs = [];
    panels = panels.forEach ? panels : [panels];
    panels.forEach((panel, index) => {
      const cls = classnames({
        active: index === +active,
      });
      const tab = panel && panel.props.tab;
      const h = 'javascript:void(0);'; // eslint-disable-line

      if (tab) {
        let aTag = (
          <a
            href={h}
            key={index}
            onClick={() => this.onTabClick(index, tab)}
            className={cls}
          >
            {tab}
          </a>);

        if (tabScene === 'center') {
          tabs.push(
            <span key={index} className={`im-tab-hd--wrap split-${panels.length}`}>
              {aTag}
            </span>
          );
        } else {
          tabs.push(aTag);
        }
      }
    });

    return tabs;
  };

// @todo tabScene == side, 左侧导航,垂直样式
  render() {
    const { panels, tabType, tabScene } = this.props;
    const { active } = this.state;
    const tabs = this.createTabs(panels, active, tabScene);
    const cls = classnames({
      'im-tab-hd': 1,
      [`im-tab-hd--${tabType}`]: 1,
      [`im-tab-hd--${tabScene}`]: 1,
    });

    return (
      <div className={cls}>
        {tabs}
      </div>
    );
  }
}