/* @flow */
import React from 'react' 
var LocalStorageMixin = require('react-localstorage'); 

const state_key = "togglol-api-state";

class ApiKeyInput extends React.Component {
    constructor(props) {
        super(props);
        
        if(localStorage.getItem(state_key) == null) {
            this.state = {
            value: ''
            };    
        }
        else {
            var savedState = JSON.parse(localStorage.getItem(state_key));
            this.state = savedState;   
        }
    }

    componentDidMount() {
        this.enterApiKey(this.state.value);
    }

    render() {
        return(
            <div className="row">
                <div className="col-md-6 offset-md-3">
                    <div className="input-group input-group-lg">
                        <input value={this.state.value} maxlength="32" id="apikeyInput" placeholder="Your Toggl API token" className="form-control" type="text" onChange={(e) => this.onChange(e)}/>
                        <span className="input-group-btn">
                            <button className="btn btn-primary" onClick={this.handleLoadPress.bind(this)}>Login</button>
                        </span>
                    </div>
                    <div className="text-xs-center">
                        <a target="_blank" href="https://toggl.com/app/profile">Find your API token here</a>
                    </div>
                </div>
            </div>
            );
    }

    onChange(event) {
        var apiKey = event.target.value;
        this.enterApiKey(apiKey);
    }
    
    enterApiKey(apiKey) {
        // Store state
        var newState = {value: apiKey};
        this.setState(newState);
        localStorage.setItem(state_key, JSON.stringify(newState));

        // Send action
        this.props.onSet(apiKey);
        
    }

    handleLoadPress(event) {
        event.preventDefault();
        this.props.onLoad();
    }
}

ApiKeyInput.propTypes = {  
  onSet: React.PropTypes.func.isRequired,
  onLoad: React.PropTypes.func.isRequired
}

var inputStyle = {
    width: '300px'
}

export default ApiKeyInput
@@ -685,18 +685,18 @@
 me=%22col-
-md
+lg
 -6 offse
@@ -701,10 +701,10 @@
 set-
-md
+lg
 -3%22%3E

Improve responsive design of ApiKeyInput