import React, { PureComponent } from 'react'
import {Navbar, Nav, NavItem, NavDropdown, MenuItem, Glyphicon, Jumbotron, Button} from 'react-bootstrap'
import {Row, Col, Collapse, FormControl, FormGroup, ControlLabel, HelpBlock, PanelGroup, Panel} from 'react-bootstrap'
import FontAwesome from 'react-fontawesome'

import HostnameController from '../containers/HostnameController'
import ServerConfigController from '../containers/ServerConfigController'
import WhiteBox from './WhiteBox'


import moment from 'moment'
import 'moment/locale/nb';
// import 'moment/locale/en';

moment.locale("en");


export function expiresText(expires) {
  var expiresM = moment.unix(expires)
  return expiresM.fromNow()
}

class Component extends PureComponent {

  updateAPIendpoint() {


  }

  fetchUserinfo() {
    let endpoint = "";

  }

  fetchCustom() {

  }

  render() {
    console.error("Component", this.props)

    if (!this.props.token) {
      return (
        <p>Not ready. No token found.</p>
      )
    }



    let userinfo = null
    if (this.props.serverConfig.userinfo_endpoint) {
      userinfo = (
        <div>
          <p>Fetch userinfo from <code>{this.props.serverConfig.userinfo_endpoint}</code></p>
          <Button onClick={this.fetchUserinfo.bind(this)} bsStyle="default">
            <FontAwesome name='arrow-circle-o-right' /> Get userinfo
          </Button>
        </div>
      )
    }

    return (
      <Panel header="HTTP Client using OAuth Access Token" eventKey="1" collapsible={true} expanded={true}>

        {userinfo}

        <div>
          <p>Fetch userinfo from</p>
          <FormGroup
            className="gutter"
            controlId="formBasicText"
          >
            <FormControl
              type="text"
              bsSize="large"
              placeholder="http://httpjs.net/foo"
              onChange={this.updateAPIendpoint.bind(this)}
            />
            <HelpBlock>Fill out the hostname of your OAuth server. Will only work if your OAuth server support OpenID Connect Discovery. If not, please enter configuration manually.</HelpBlock>
          </FormGroup>

          <Button onClick={this.fetchCustom.bind(this)} bsStyle="default">
            <FontAwesome name='arrow-circle-o-right' /> Perform HTTP call
          </Button>
        </div>

      </Panel>
    )
  }


}

export default Component