var React = require('react');
var Link = require('react-router').Link;

// The root component for the homepage
var HomePage = React.createClass({
    render: function () {
        console.log("HOME");
        console.log(this.context);
        return (
            <div id="home-page">

                <div id="welcome-title">Welcome to Mock</div>

                <div id="create-team">
                    <h1>Create a new team:</h1>
                    <input type="text" placeholder="MyTeamName" ref="teamname"/>
                    <button onClick={this.createTeam} >Create</button>
                </div>

                <div id="existing-teams">
                    <h2>or view an existing team:</h2>
                    <TeamsList />
                </div>

            </div>
        );
    },
    createTeam: function (e) {
        e.preventDefault();
        //FIXME: Implement
        var newTeamName = React.findDOMNode(this.refs.teamname).value.trim();
    }
});

// The list of all existing teams
var TeamsList = React.createClass({
    getInitialState: function () {
        return {teams: []};
    },
    componentDidMount: function () {
        $.ajax({
            url: "/api/teams",
            dataType: "json",
            success: function (data) {
                this.setState({teams: data});
            }.bind(this),
            error: function (xhr, status, err) {
                console.error(status, err.toString());
            }
        });
    },
    render: function () {
        var rows = [];
        $.each(this.state.teams, function (index, value) {
            rows.push(<TeamRow name={value} />);
        });
        return (
            <ul id="teams-list">
              {rows}
            </ul>
        );
    }
});

// A single team item on the page
var TeamRow = React.createClass({
    render: function () {
        console.log("TEAM ROW");
        console.log(this.context);
        return (
            <li className="team-item block">
                <Link to="team" params={{teamID: this.props.name}}>{this.props.name}</Link>
            </li>
        );
    }
});

module.exports = HomePage;