import React, { Component, PropTypes } from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';

import {List, ListItem} from 'material-ui/List';
import {lightGreen500} from 'material-ui/styles/colors';
import IconButton from 'material-ui/IconButton';
import ContentAddBox from 'material-ui/svg-icons/content/add-box';
import {Toolbar, ToolbarGroup, ToolbarSeparator, ToolbarTitle} from 'material-ui/Toolbar'
import AutoComplete from 'material-ui/AutoComplete';

import s from './ModuleList.css';

class ModuleList extends Component {

    handleUpdateInput = (value) => {
        this.setState({
          dataSource: [
            value,
            value + value,
            value + value + value,
          ],
        });
     };

    render() {
        const rightIconButton = (
            <IconButton><ContentAddBox color={lightGreen500} /></IconButton>
        );

        var listItems = this.props.modules.map(function(module, i) {
            return (
                <ListItem
                key={i}
                primaryText={module.code + i}
                secondaryText={module.name}
                rightIconButton={rightIconButton}
                />
            );
        });

        return (
            <div>
                <div style={{position: 'fixed', 'zIndex': 10, left: '15px', right: '15px'}}>
                    <AutoComplete
                      hintText="Search for modules..."
                      dataSource={this.props.modules}
                      onUpdateInput={this.handleUpdateInput}
                      floatingLabelText="Module Search"
                      fullWidth={true}
                    />
                </div>
                <div style={{height: '70px'}}></div>
                <List style={{position: 'fixed', width: '100%', height: '80%', overflow: 'scroll'}}>
                    {listItems}
                </List>
            </div>
        );
    }
}

export default withStyles(s)(ModuleList);

@@ -481,80 +481,627 @@
 e';%0A
-%0Aimport s from './ModuleList.css';%0A%0Aclass ModuleList extends Component %7B
+import Dialog from 'material-ui/Dialog';%0Aimport FlatButton from 'material-ui/FlatButton';%0A%0Aimport s from './ModuleList.css';%0A%0Aclass ModuleList extends Component %7B%0A    constructor(props) %7B%0A        super(props);%0A%0A        this.state = %7B%0A            open: false,%0A        %7D;%0A    %7D%0A%0A    handleOpen = (module) =%3E %7B%0A        var title = module.code + ' ' + module.name;%0A        this.setState(%7Bopen: true, dialogTitle: title%7D);%0A    %7D;%0A%0A    handleClose = () =%3E %7B%0A        this.setState(%7Bopen: false%7D);%0A    %7D;%0A%0A    handleListButtonTouch = (module, e) =%3E %7B%0A        e.stopPropagation();%0A        // TODO handle list button touch%0A    %7D;
 %0A%0A  
@@ -1325,33 +1325,64 @@
     
-const rightIconButt
+// Actions shown on the dialog%0A        const acti
 on
+s
  = 
-(
+%5B
 %0A   
@@ -1395,71 +1395,140 @@
    %3C
-Icon
+Flat
 Button
-%3E%3CContentAddBox color=%7BlightGreen500%7D /%3E%3C/IconButton%3E
+%0A            label=%22Add to Timetable%22%0A            primary=%7Btrue%7D%0A            onTouchTap=%7Bthis.handleClose%7D%0A            /%3E,
 %0A   
@@ -1532,20 +1532,63 @@
         
-)
+%5D
 ;%0A%0A
+        // Create the list of module cells%0A
         
@@ -1842,31 +1842,275 @@
 Button=%7B
-rightIconButton
+%0A                    %3CIconButton onClick=%7B(e) =%3E this.handleListButtonTouch(module, e)%7D%3E%0A                        %3CContentAddBox color=%7BlightGreen500%7D /%3E%0A                    %3C/IconButton%3E%0A                %7D%0A                onClick=%7B() =%3E this.handleOpen(module)
 %7D%0A      
@@ -2146,16 +2146,22 @@
        %7D
+, this
 );%0A%0A    
@@ -2839,16 +2839,494 @@
 %3C/List%3E%0A
+                %3CDialog%0A                  title=%7Bthis.state.dialogTitle%7D%0A                  actions=%7Bactions%7D%0A                  modal=%7Bfalse%7D%0A                  open=%7Bthis.state.open%7D%0A                  onRequestClose=%7Bthis.handleClose%7D%0A                  autoScrollBodyContent=%7Btrue%7D%0A                %3E%0A                    %3Cdiv%3EDont panic, the module codes shown in the list are combined with their key but the dialog just gets the module code only.%3C/div%3E%0A                %3C/Dialog%3E%0A
         

Add dialog to show module info