import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';

import { List, ListItem } from 'material-ui/List';
import RaisedButton from 'material-ui/RaisedButton';
import DeleteIcon from 'material-ui/svg-icons/action/delete';
import CenteredWrapper from '~/components/centered-wrapper';

class OverviewPage extends Component {
    render() {
        const { tournaments } = this.props;

        return (
            <CenteredWrapper>
                <h1>Registered tournaments</h1>
                {!tournaments.length &&
                    <p>No registered tournaments yet</p>
                }
                {tournaments.length > 0 &&
                    <List>
                        {tournaments.map((tournament, index) =>
                            <ListItem
                                key={index}
                                primaryText={tournament.title}
                                rightIcon={<DeleteIcon />}
                            />,
                        )}
                    </List>
                }
                <RaisedButton label="New tournament" primary />
            </CenteredWrapper>
        );
    }
}

OverviewPage.propTypes = {
    tournaments: PropTypes.arrayOf(
        PropTypes.shape({
            title: PropTypes.string.isRequired,
        }),
    ),
};

const mapStateToProps = state => ({
    tournaments: state.tournaments.tournaments,
});

export default connect(mapStateToProps)(OverviewPage);

@@ -86,16 +86,57 @@
 edux';%0A%0A
+import Dialog from 'material-ui/Dialog';%0A
 import %7B
@@ -231,16 +231,63 @@
 utton';%0A
+import TextField from 'material-ui/TextField';%0A
 import D
@@ -441,16 +441,540 @@
 onent %7B%0A
+    constructor() %7B%0A        super();%0A%0A        this.state = %7B%0A            newTournamentDialogOpen: false,%0A        %7D;%0A%0A        this.onOpenDialog = this.onOpenDialog.bind(this);%0A        this.onCreateNewTournament = this.onCreateNewTournament.bind(this);%0A    %7D%0A%0A    onOpenDialog() %7B%0A        this.setState(%7B%0A            newTournamentDialogOpen: true,%0A        %7D);%0A    %7D%0A%0A    onCreateNewTournament() %7B%0A        // TODO: Create a new tournament%0A%0A        this.setState(%7B%0A            newTournamentDialogOpen: false,%0A        %7D);%0A    %7D%0A%0A
     rend
@@ -995,16 +995,28 @@
  const %7B
+%0A           
  tournam
@@ -1019,16 +1019,25 @@
 rnaments
+,%0A       
  %7D = thi
@@ -1046,16 +1046,267 @@
 props;%0A%0A
+        const %7B%0A            newTournamentDialogOpen,%0A        %7D = this.state;%0A%0A        const dialogActions = %5B%0A            %3CRaisedButton%0A                label=%22Create%22%0A                onTouchTap=%7Bthis.onCreateNewTournament%7D%0A            /%3E,%0A        %5D;%0A%0A
         
@@ -1979,16 +1979,36 @@
 edButton
+%0A                   
  label=%22
@@ -2026,18 +2026,335 @@
 ent%22
- primary /
+%0A                    onTouchTap=%7Bthis.onOpenDialog%7D%0A                    primary%0A                /%3E%0A                %3CDialog open=%7BnewTournamentDialogOpen%7D actions=%7BdialogActions%7D%3E%0A                    %3Ch2%3ECreate a new tournament!%3C/h2%3E%0A                    %3CTextField floatingLabelText=%22Tournament name%22 /%3E%0A                %3C/Dialog
 %3E%0A  

Add UI support for creating tournaments