import React, { Component } from 'react';
import { Github } from 'react-social-github';
import './Playground.css';
import './github-markdown.css';
import 'whatwg-fetch';

import TextField from 'material-ui/TextField';
import RaisedButton from 'material-ui/RaisedButton';
import SelectField from 'material-ui/SelectField';
import MenuItem from 'material-ui/MenuItem';
import Toggle from 'material-ui/Toggle';

const styles = {
  block: {
    maxWidth: 200,
  },
  toggle: {
    marginBottom: 16,
  },
  thumbOff: {
    backgroundColor: '#ffcccc',
  },
  trackOff: {
    backgroundColor: '#ff9d9d',
  },
  thumbSwitched: {
    backgroundColor: 'red',
  },
  trackSwitched: {
    backgroundColor: '#ff9d9d',
  },
  labelStyle: {
    color: 'red',
  },
  customWidth: {
    width: 260,
  }
};

const types = [
  { value: 'widget', label: 'Widget' },
  { value: 'link', label: 'Link' },
  { value: 'button', label: 'Button' }
];

const fabCorners = [
  { value: 'top-left', label: 'Top Left' },
  { value: 'top-right', label: 'Top Right' },
  { value: 'bottom-left', label: 'Bottom Left' },
  { value: 'bottom-right', label: 'Bottom Right' }
];

class Playground extends Component {

  constructor(props) {
    super(props);
    this.config = {
      type: 'widget',
      user: 'vandreleal',
      org: '',
      repo: ''
    };
    this.state = {
        type: 'widget',
        fab: false,
        fabCorner: 'bottom-right',
        user: '',
        org: '',
        repo: '',
        fabToggleVisible: false,
        fabCornersVisible: false,
        iconColor: '',
        iconWidth: '',
        iconHeight: ''
    };
  }

  handleChange(name, event, key, value) {
    let nValue = typeof value !== 'undefined' ? value : key;
    this.config[name] = nValue;

    let delta = {};
    if(name === 'type') {
        delta.fabToggleVisible = nValue === 'button';
        delta.fabCornersVisible = nValue === 'button' && this.config.fab === true;
    }

    if(name === 'fab') {
        delta.fabCornersVisible = this.config.type === 'button' && this.config.fab === true && nValue === true;
    }
    this.setState(delta);
  };

  update() {
    this.setState(this.config);
  }

  render() {
    let ghProps = {
        type: this.state.type,
        fab: this.state.fab,
        fabCorner: this.state.fabCorner,
        iconColor: this.state.iconColor,
        iconWidth: this.state.iconWidth,
        iconHeight: this.state.iconHeight,
        tooltipOnHover: true
    };

    if(typeof this.state.repo === 'string' && this.state.repo.length>0) {
        ghProps.repo = this.state.repo;
    }

    if(typeof this.state.user === 'string' && this.state.user.length>0) {
        ghProps.user = this.state.user;
    }

    if(typeof this.state.org === 'string' && this.state.org.length>0) {
        ghProps.org = this.state.org;
    }

    let gh = <Github
            { ...ghProps }
            key={this.state.org + ':' + this.state.user + '/' + this.state.repo}>
        </Github>;

    return (
      <div className="playground">

        <div className="pure-g">
          <div className="pure-u-1 pure-u-md-1-3">
            <label className="form-label">Basic Github Info</label>
            <section className="form-section">
              <TextField hintText="User" onChange={this.handleChange.bind(this, 'user')} />
              <TextField hintText="Org" onChange={this.handleChange.bind(this, 'org')} />
              <TextField hintText="Repo" onChange={this.handleChange.bind(this, 'repo')} />
            </section>
          </div>

          <div className="pure-u-1 pure-u-md-1-3">
            <section className="form-section">
              <div>
                  <SelectField value={this.config.type} floatingLabelText="Type" style={styles.customWidth} onChange={this.handleChange.bind(this, 'type')}>
                      {
                          types.map((vtype, index) => {
                              return <MenuItem value={vtype.value} primaryText={vtype.label} key={index} />;
                          })
                      }
                  </SelectField>

                  {
                    this.state.fabToggleVisible ? <div style={styles.block}>
                        <Toggle
                        label="FAB"
                        labelPosition="right"
                        style={styles.toggle}
                        onToggle={this.handleChange.bind(this, 'fab')}
                        defaultToggled={this.config.fab}
                        />
                    </div> : null
                  }
              </div>

              <RaisedButton className="form-button" label="Update" primary={true} onClick={this.update.bind(this)} />
            </section>
          </div>

          <div className="pure-u-1 pure-u-md-1-3">
            <section className="form-section">
              {
                this.state.fabCornersVisible ?
                <div>
                    <SelectField value={this.config.fabCorner} floatingLabelText="Fab Corner" style={styles.customWidth} onChange={this.handleChange.bind(this, 'fabCorner')}>
                    {
                        fabCorners.map((vtype, index) => {
                            return <MenuItem value={vtype.value} primaryText={vtype.label} key={index} />;
                        })
                    }
                    </SelectField>

                    <TextField hintText="Icon Color" onChange={this.handleChange.bind(this, 'iconColor')} />
                    <TextField hintText="Icon Width" onChange={this.handleChange.bind(this, 'iconWidth')} />
                    <TextField hintText="Icon Height" onChange={this.handleChange.bind(this, 'iconHeight')} />
                </div> : null
               }
            </section>
          </div>

          <div className="pure-u-1 pure-u-md-2-3">

          </div>

          <div className="pure-u-1 pure-u-md-1-3">
            <section className="form-centered">
              { gh }
            </section>
          </div>
        </div>

      </div>
    );
  }
}

export default Playground;

@@ -2082,24 +2082,25 @@
 true;%0A    %7D%0A
+%0A
     this.set
@@ -2363,16 +2363,23 @@
 nWidth: 
+Number(
 this.sta
@@ -2390,16 +2390,17 @@
 conWidth
+)
 ,%0A      
@@ -2413,16 +2413,23 @@
 Height: 
+Number(
 this.sta
@@ -2441,16 +2441,17 @@
 onHeight
+)
 ,%0A      
@@ -3215,33 +3215,8 @@
 tion
- className=%22form-section%22
 %3E%0A  
@@ -3603,33 +3603,8 @@
 tion
- className=%22form-section%22
 %3E%0A  
@@ -4744,32 +4744,32 @@
 pure-u-md-1-3%22%3E%0A
+
             %3Csec
@@ -4776,33 +4776,8 @@
 tion
- className=%22form-section%22
 %3E%0A  

Fix Numbers