import React, { PropTypes } from 'react';

import './SettingsPage.css';
import Background from '../Background';
import BrandTitle from '../BrandTitle';
import Placemat from '../Placemat';
import ProfileSummary from '../ProfileSummary';
import ContentText from '../Text/ContentText';
import Navigation from '../Navigation';
import TitleText from '../Text/TitleText';
import ErrorText from '../Text/ErrorText';
import PageContent from '../PageContent';
import classNames from 'classnames';
import ProductPreview from '../Product/ProductPreview';

import StateService from '../../services/StateService';
import ProductService from '../../services/ProductService';
import NotificationStore from '../../stores/NotificationStore';

import mui from 'material-ui';
let ThemeManager = new mui.Styles.ThemeManager();
let List = mui.List;
let ListItem = mui.ListItem;
let CircularProgress = mui.CircularProgress;
let RaisedButton = mui.RaisedButton;

export default class SettingsPage extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      isBusyDeleting: false
    }
  }

  static childContextTypes = {
    muiTheme: React.PropTypes.object
  }

  getChildContext() {
    return {
      muiTheme: ThemeManager.getCurrentTheme()
    };
  }

  deleteSettings() {
    this.setState( {isBusyDeleting: true });
    StateService.resetState();
  }

  openLibraryDir () {
    StateService.openLibraryDirectory();
  }

  render() {
    var panelStyle = {
      width: this.props.panelWidth + "px"
    }

    var placematStyle = {
      width: this.props.panelWidth + "px",
      padding: "10px"
    }

    return (
      <div>
        <Background animate={false} />
        <Navigation currentPage="settings" />
        <PageContent width={88}>
          <div className = "SettingsPage-content">
          <div className = "SettingsPage-panel" style={panelStyle}>
            <Placemat width={this.props.panelWidth}>
              <div className="SettingsPage-description"> Click here to remove your settings file and library directory. WARNING: this will delete all user settings and downloaded content.
            </div></Placemat>
            <RaisedButton primary={true} label="Nuke settings" style = {panelStyle} onClick={ () => {this.deleteSettings()} } disabled={this.state.isBusyDeleting} />
          </div>

          <div className = "SettingsPage-panel" style={panelStyle}>
            <Placemat width={this.props.panelWidth}>
            <div className="SettingsPage-description">Click here to browse your library directory. </div></Placemat>
            <RaisedButton secondary={true} label="Browse downloaded content" style={panelStyle} onClick = { () => {this.openLibraryDir() }} />
          </div>
          </div>
        </PageContent>
      </div>
    );
  }
}

SettingsPage.propTypes = {
    title: PropTypes.string
  };
SettingsPage.defaultProps = { panelWidth: 400 };

@@ -931,16 +931,41 @@
 dButton;
+%0Alet Dialog = mui.Dialog;
 %0A%0Aexport
@@ -1117,173 +1117,666 @@
   %7D%0A
-  %7D%0A%0A  static childContextTypes = %7B%0A    muiTheme: React.PropTypes.object%0A  %7D%0A%0A  getChildContext() %7B%0A    return %7B%0A      muiTheme: ThemeManager.getCurrentTheme()%0A    %7D
+%0A    this.handleShowConfirmDialog = this.handleShowConfirmDialog.bind(this);%0A    this.handleConfirmDialogConfirm = this.handleConfirmDialogConfirm.bind(this);%0A    this.handleConfirmDialogDismiss = this.handleConfirmDialogDismiss.bind(this);%0A  %7D%0A%0A  static childContextTypes = %7B%0A    muiTheme: React.PropTypes.object%0A  %7D%0A%0A  getChildContext() %7B%0A    return %7B%0A      muiTheme: ThemeManager.getCurrentTheme()%0A    %7D;%0A  %7D%0A%0A  handleShowConfirmDialog() %7B%0A    this.refs.confirmDialog.show();%0A  %7D%0A%0A  handleConfirmDialogConfirm() %7B%0A    this.refs.confirmDialog.dismiss();%0A    this.deleteSettings();%0A  %7D%0A%0A  handleConfirmDialogDismiss() %7B%0A    this.refs.confirmDialog.dismiss()
 ;%0A  
@@ -2274,16 +2274,342 @@
 h=%7B88%7D%3E%0A
+          %3CDialog%0A            ref=%22confirmDialog%22%0A            title=%22Are you sure?%22%0A            actions=%7B%5B%0A              %7B text: 'Cancel', onTouchTap: this.handleConfirmDialogDismiss %7D,%0A              %7B text: 'OK', onTouchTap: this.handleConfirmDialogConfirm, ref: 'submit' %7D%0A            %5D%7D%0A            actionFocus=%22submit%22 /%3E%0A
         
@@ -3087,39 +3087,36 @@
 ck=%7B
- () =%3E %7Bthis.deleteSettings()%7D 
+this.handleShowConfirmDialog
 %7D di

add confirm dialog on nuke settings