import React, {PropTypes} from 'react';
import TaskList from './TaskList.jsx';
import {AppCanvas, RaisedButton, Styles} from 'material-ui';
import lightTheme from 'material-ui/lib/styles/raw-themes/light-raw-theme';

export default React.createClass({
  propTypes: {
    tasks: PropTypes.array.isRequired,
    onAddTask: PropTypes.func.isRequired,
    onClear: PropTypes.func.isRequired
  },

  getDefaultProps() {
    return {
      tasks: []
    };
  },

  childContextTypes: {
    muiTheme: React.PropTypes.object
  },

  getChildContext() {
    return {
      muiTheme: Styles.ThemeManager.getMuiTheme(lightTheme)
    };
  },

  render() {
    let {onAddTask, onClear, tasks} = this.props;
    return (
      <div className="example-page">
        <h1>Learning Flux</h1>
        <p>
          Below is a list of tasks you can implement to better grasp the patterns behind Flux.<br />
          Most features are left unimplemented with clues to guide you on the learning process.
        </p>

        <TaskList tasks={tasks} />

        <RaisedButton label="Add Task" primary={true} onClick={onAddTask} />
        <RaisedButton label="Clear List" secondary={true} onClick={onClear} />
      </div>
    );
  }
});