var React = require('react/addons');
var Material = require('material-ui');
var List = Material.List;
var ListDivider = Material.ListDivider;
var ListItem = Material.ListItem;
var Colors = Material.Styles.Colors;
var CustomTheme = require('../components/CustomTheme');
var classNames = require('classnames');

var GuideIndex = React.createClass({

  contextTypes: {
    router: React.PropTypes.func
  },

  transitionTo(payload){
    this.context.router.transitionTo('guide', {section: payload});
  },

  render() {
    return (
      <div className={classNames({'small-only': this.props.onlyMobile})}>
        <List subheader="Profiles"
              subheaderStyle={{color: CustomTheme.getPalette().primary1Color}}>
          <ListItem onClick={() => this.transitionTo('first_steps')} primaryText="First steps" />
          <ListItem onClick={() => this.transitionTo('priority_calls')}
                    primaryText="Priority Calls"/>
          <ListItem onClick={() => this.transitionTo('priority_notifications')}
                    primaryText="Priority Notifications"/>
          <ListItem onClick={() => this.transitionTo('silent_mode')} primaryText="Silent mode"/>
        </List>
        <ListDivider />
        <List subheader="Tips &amp; Tricks"
              subheaderStyle={{color: CustomTheme.getPalette().primary1Color}}>
          <ListItem primaryText="Whatsapp notifications" disabled={true}
                    style={{color: Colors.minBlack}}/>
          <ListItem onClick={() => this.transitionTo('messenger_notifications')}
                    primaryText="Facebook Messenger notifications"/>
        </List>
        <ListDivider />
        <List subheader="Features"
              subheaderStyle={{color: CustomTheme.getPalette().primary1Color}}>
          <ListItem onClick={() => this.transitionTo('ringtones_contacts')}
                    primaryText="Ringtones &amp; Contacts"/>
          <ListItem onClick={() => this.transitionTo('scheduler')} primaryText="Scheduler"/>
          <ListItem primaryText="Notification Widget" disabled={true}
                    style={{color: Colors.minBlack}}/>
        </List>
        <ListDivider />
        <List subheader="More"
              subheaderStyle={{color: CustomTheme.getPalette().primary1Color}}>
          <ListItem primaryText="Permissions" disabled={true}
                    style={{color: Colors.minBlack}}/>
          <ListItem primaryText="Settings" disabled={true}
                    style={{color: Colors.minBlack}}/>
        </List>
      </div>
    )
  }

});

module.exports = GuideIndex;
@@ -413,16 +413,19 @@
 itionTo(
+e, 
 payload)
@@ -426,16 +426,40 @@
 yload)%7B%0A
+    e.preventDefault();%0A
     this
@@ -756,32 +756,36 @@
 %3CListItem on
-Click
+TouchTap
 =%7B(
+e
 ) =%3E this.tr
@@ -795,16 +795,19 @@
 itionTo(
+e, 
 'first_s
@@ -861,32 +861,36 @@
 %3CListItem on
-Click
+TouchTap
 =%7B(
+e
 ) =%3E this.tr
@@ -892,32 +892,34 @@
 is.transitionTo(
+e,
 'priority_calls'
@@ -990,32 +990,36 @@
 %3CListItem on
-Click
+TouchTap
 =%7B(
+e
 ) =%3E this.tr
@@ -1029,16 +1029,18 @@
 itionTo(
+e,
 'priorit
@@ -1135,32 +1135,36 @@
 %3CListItem on
-Click
+TouchTap
 =%7B(
+e
 ) =%3E this.tr
@@ -1174,16 +1174,18 @@
 itionTo(
+e,
 'silent_
@@ -1530,32 +1530,36 @@
 %3CListItem on
-Click
+TouchTap
 =%7B(
+e
 ) =%3E this.tr
@@ -1569,16 +1569,18 @@
 itionTo(
+e,
 'messeng
@@ -1841,32 +1841,36 @@
 %3CListItem on
-Click
+TouchTap
 =%7B(
+e
 ) =%3E this.tr
@@ -1880,16 +1880,18 @@
 itionTo(
+e,
 'rington
@@ -1992,16 +1992,20 @@
 m on
-Click
+TouchTap
 =%7B(
+e
 ) =%3E
@@ -2023,16 +2023,18 @@
 itionTo(
+e,
 'schedul

Change onClick for onTouchTap.