import React from 'react';
import store from '../store/configureStore'
import {Link} from 'react-router'

import csgoTwitch from '../json/cs-go-twitch'
import csgoYoutube from '../json/cs-go-youtube'
import dota2twitch from '../json/dota2-twitch'
import dota2youtube from '../json/dota2-youtube'

import {fetchTwitch} from '../actions/fetchTwitch';

const Menu = [
  {
    to: '/',
    name: 'CS GO',
    youtubeJson: csgoYoutube,
    twitchJson: csgoTwitch,
    twitter: 'Kreiz0/lists/csgo'
  },
  {
    to: '/',
    name: 'DOTA2',
    youtubeJson: dota2youtube,
    twitchJson: dota2twitch,
    twitter: 'Kreiz0/lists/dota'
  },
  {
    to: '/Start',
    name: 'Start'
  }
];


export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = ::this.handleClick;
    this.state = {
      activeIndex: []
    };
  }

  handleClick(item, selectedIndex) {
    this.setState({selectedIndex});
    if (item.twitchJson || item.youtubeJson) {
      store.dispatch([
        {
          type: 'LOAD_TWITCH',
          twitchGame: fetchTwitch(item.twitchJson),
        },
        {
          type: 'LOAD_YOUTUBE',
          youtubeGame: item.youtubeJson
        },
        {
          type: 'LOAD_TWITTER',
          twitterGame: item.twitter
        },
      ]);
    }
  }
  render() {
    return (
      <div className="container">
        <header className="header block-style">
          <ul>
            {
              Menu.map((item, index) => {
                return (
                  <li key={index}>
                    <Link to={item.to} className={(this.state.selectedIndex === index) && 'active'}
                          onClick={this.handleClick.bind(this, item, index)}>
                      {item.name}
                    </Link>
                  </li>
                );
              })
            }
          </ul>
        </header>
        {this.props.children}
      </div>
    )
  }
}