var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
var demoMode = true;

var tabs = [
  {
    title: 'Alligator',
    text: <div><p>A large semiaquatic reptile similar to a crocodile but with a broader and shorter head, native to the Americas and China.</p><span className="tag">Real</span><span className="tag">Scaly</span></div>
  },
    {
    title: 'Cat',
    text: <div><p>A small domesticated carnivorous mammal with soft fur, a short snout, and retractile claws. It is widely kept as a pet or for catching mice, and many breeds have been developed.</p><span className="tag">Real</span><span className="tag">Fuzzy</span></div>
  },
    {
    title: 'Manticore',
    text: <div><p>A mythical beast typically depicted as having the body of a lion, the face of a man, and the sting of a scorpion.</p><span className="tag--not">Not Real</span><span className="tag--not">Kinda Mean</span></div>
  }
];


class Tabs extends React.Component{

  constructor(props){
    super(props);
    this.state = {
      current: 0
    }
    this.changeTab = this.changeTab.bind(this);
    this.moveTracker = this.moveTracker.bind(this);
  }
  
  componentDidMount(){
    this.moveTracker();
  }
  
  moveTracker(){
    var title = ReactDOM.findDOMNode(this).querySelector('.tabs__titles__title[data-active="true"]');
    var tracker = ReactDOM.findDOMNode(this).querySelector('.tabs__tracker');
    Velocity(tracker, {width: title.clientWidth, left: title.offsetLeft}, {duration: 1000, easing:  [ 250, 15 ]})
  }
  
  changeTab(e){
    e.stopPropagation();
    this.setState({
      current: e.target.getAttribute('data-index')
    }, function(){
      this.moveTracker();
    })
  }
  
  render(){
    let tabs = this.props.tabs;
    return(
      <div className="tabs">
      <div className="tabs__tracker" />
      <div className="tabs__titles">
        {tabs.map((tab, index, array) =><h2 className="tabs__titles__title" data-active={this.state.current == index} data-index={index} key={'tab-title-' + index} onClick={this.changeTab}>{tab.title}</h2>)}      
      </div>
        <div className="tabs__contents">
         <ReactCSSTransitionGroup transitionName='scale' transitionEnterTimeout={500} transitionLeaveTimeout={500}><div className="tabs__contents__content" key={'tab-text-' + this.state.current}>{tabs[this.state.current].text}</div></ReactCSSTransitionGroup>
      </div>
    </div>
    )
  }
}

ReactDOM.render(<Tabs tabs={tabs}/>, document.getElementsByTagName('body')[0]);
                
if(demoMode){
  var titles = document.querySelectorAll('.tabs__titles__title');
  setTimeout(function(){titles[1].click()}, 1500);
  setTimeout(function(){titles[2].click()}, 3000);
  setTimeout(function(){titles[0].click()}, 4500);
}