class TabbedArea extends React.Component{


  constructor(props) {
    super(props)

    this.handleClick = this.handleClick.bind(this);
    this.state = {
      activeIndex: this.props.activeIndex || 0
    };
  }

  componentWillReceiveProps(nextProps){
    if (this.state.activeIndex !== nextProps.activeIndex) {
      this.setState({
        activeIndex: nextProps.activeIndex
      });
    }
  }

  handleClick(index, e) {
    e.preventDefault();
    this.setState({
      activeIndex: index
    });
  }

  tabNodes() {
    return (_.map(this.props.children, (child, index) => {
        let className = classNames({'active': this.state.activeIndex === index});
          return (
            <li key={index} onClick={(e) => this.handleClick(index, e)}>
              <a className={className} href="#">{child.props.display}</a>
            </li>
          )
        }
      )
    )
  }

  contentNodes() {
    return (
      _.map(this.props.children, (child, index) => {
        if(this.state.activeIndex === index) {
          return (
            <div className="TabPane" key={index}>
              {child.props.children}
            </div>
          )
        }
      }
      )
    )
  }

  render() {

    return (
      <div className={`${styles.ParcelResultsTrackingHistory} col-md-12`}>
        <ul className="nav nav-tabs" id="navTabs">
          {this.tabNodes()}
        </ul>
        <section>
          {this.contentNodes()}
        </section>
      </div>
    );
  }

}

export default TabbedArea;

describe('Given the Tabbed Area component is rendered', () => {


  describe('Initial Snapshots', () => {
    let component
    beforeEach(() => {
      component = shallow(<TabbedArea />)
    })
    it('should be as expected', () => {
      expect(shallowToJson(component)).toMatchSnapshot()
    })
  })

  describe('I click on the second tab', () => {
    let component
    let tab2

    component = shallow(<TabbedArea/>)
    tab2 = component.find('ul li').at(1);
    tab2.simulate('click');

    describe('the content of the second tab is rendered', () => {
      component.update();

      it('should match the snapshot', () => {
        expect(shallowToJson(component)).toMatchSnapshot()
      });

    });

  });

  describe('Clicking on the tab', () => {
    const wrapper = mount(<TabbedArea/>)
    const handleClick = jest.spyOn(wrapper.instance(), 'handleClick');
    wrapper.update();
    const tab = wrapper.find('ul#navTabs li').first()
    tab.simulate('click')

    it('will call handleClick', () => {
      expect(handleClick).toBeCalled();
    });
  });

})