import React, { PropTypes } from 'react';
import ReactMixin from 'react-mixin';
import './RequestForm.css';
import classNames from 'classnames';

import ContentText from '../Text/ContentText';

import BugReportService from '../../services/BugReportService';

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

export default class RequestForm extends React.Component {

  constructor() {
    super();
    this.state = {
      title: '',
      url: ''
    };

    this.handleRequestFormClick = this.handleRequestFormClick.bind(this);
    this.handleRequestFormSubmit = this.handleRequestFormSubmit.bind(this);
    this.handleRequestFormClose = this.handleRequestFormClose.bind(this);
  }

  static propTypes = {
    title: PropTypes.string
  };

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

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

  handleRequestFormClick() {
    this.refs.requestDialog.show();
  }

  handleRequestFormSubmit() {
    BugReportService.submitGameRequest(this.state.title, this.state.url);
    this.refs.requestDialog.dismiss();
  }

  handleRequestFormClose() {
    this.refs.requestDialog.dismiss();
  }

  render() {
    return (
      <div>
        <Dialog
          ref="requestDialog"
          title="Send us a game request"
          actions={[
            { text: 'Cancel', onTouchTap: this.handleRequestFormClose },
            { text: 'Submit', onTouchTap: this.handleRequestFormSubmit, ref: 'submit' }
          ]}
          actionFocus="submit">
          <div className="RequestForm-container">
            <p>Is there a game you'd love to see on Kimochi? Let us know!</p>
            <p>Better yet, reach out to the game dev know yourself! We spend a lot of our time coding, so we could really use your help to spread to word. Comment on blogs, post on forums, message on Twitter - it all helps!</p>
            <TextField
              hintText="Game title"
              multiLine={true}
              fullWidth={true}
              valueLink={this.linkState('title')} />
            <TextField
              hintText="Game/publisher website"
              multiLine={true}
              fullWidth={true}
              valueLink={this.linkState('url')} />
          </div>
        </Dialog>
      </div>
    );
  }
}

ReactMixin(RequestForm.prototype, React.addons.LinkedStateMixin);

import React, { PropTypes } from 'react';
import ReactMixin from 'react-mixin';
import './RequestForm.css';
import classNames from 'classnames';

import ContentText from '../Text/ContentText';

import BugReportService from '../../services/BugReportService';

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

export default class RequestForm extends React.Component {

  constructor() {
    super();
    this.state = {
      title: '',
      url: ''
    };

    this.handleRequestFormClick = this.handleRequestFormClick.bind(this);
    this.handleRequestFormSubmit = this.handleRequestFormSubmit.bind(this);
    this.handleRequestFormClose = this.handleRequestFormClose.bind(this);
  }

  static propTypes = {
    title: PropTypes.string
  };

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

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

  handleRequestFormClick() {
    this.refs.requestDialog.show();
  }

  handleRequestFormSubmit() {
    BugReportService.submitGameRequest(this.state.title, this.state.url);
    this.refs.requestDialog.dismiss();
  }

  handleRequestFormClose() {
    this.refs.requestDialog.dismiss();
  }

  render() {
    return (
      <div>
        <Dialog
          ref="requestDialog"
          title="Send us a game request"
          actions={[
            { text: 'Cancel', onTouchTap: this.handleRequestFormClose },
            { text: 'Submit', onTouchTap: this.handleRequestFormSubmit, ref: 'submit' }
          ]}
          actionFocus="submit">
          <div className="RequestForm-container">
            <p>Don't see your favorite game on Kimochi? We spend a lot of time coding and can use your help with adding new games! Reach out to game developers and let them know to contact us. Comment on blogs, post on forums, message on Twitter - it all helps!</p>
            <p>Tell us what content you're most excited about so that we know what to look for.</p>
            <TextField
              hintText="Game title"
              multiLine={true}
              fullWidth={true}
              valueLink={this.linkState('title')} />
            <TextField
              hintText="Game/publisher website"
              multiLine={true}
              fullWidth={true}
              valueLink={this.linkState('url')} />
          </div>
        </Dialog>
      </div>
    );
  }
}

ReactMixin(RequestForm.prototype, React.addons.LinkedStateMixin);

update game request copy