import React, { PureComponent } from 'react'
import {DropdownButton, 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 {

  constructor(props) {
    super(props)
    this.state = {
      customEndpoint: ""
    }
  }

  updateAPIendpoint(e) {
    this.setState({customEndpoint: e.target.value})
  }

  fetchUserinfo() {
    let endpoint = this.props.serverConfig.userinfo_endpoint;
    // console.error("Get userinfo from ", endpoint)
    this.props.httpRequestStart(endpoint)
  }

  fetchCustom() {
    let endpoint = this.state.customEndpoint
    // console.error("Get data from ", endpoint)
    this.props.httpRequestStart(endpoint)
  }

  preselect(key, event) {
    // console.log("Key", key, "event", event)
    this.setState({customEndpoint: key})
  }

  renderDropdownButton() {
    const i = "drpdwn"
    const title = "Load preset URL"
    // console.log("PROPOS", this.props)
    if (this.props.serverConfig && this.props.serverConfig.authorization_endpoint && this.props.serverConfig.authorization_endpoint === 'https://auth.dataporten.no/oauth/authorization') {
      let links = []
      if (this.props.serverConfig.userinfo_endpoint) {
        links.push({
          url: this.props.serverConfig.userinfo_endpoint,
          title: "Userinfo endpoint "
        })
      }
      const cntrl = /^gk_([^_]+)$/i
      this.props.token.scopes.forEach((scope) => {
        if (scope === 'groups') {
          links.push({
            url: "https://groups-api.dataporten.no/groups/me/groups",
            title: "Dataporten groups API: My groups"
          })
        }
        let res = cntrl.exec(scope)
        if (res) {
          links.push({
            url: "https://" + res[1] + ".dataporten-api.no/",
            title: "Dataporten APIGK " + res[1]
          })
          // console.log(res)
        }
      })
      let menuitems = links.map((link) => {
        return (
          <MenuItem key={link.url} eventKey={link.url}>{link.title}</MenuItem>
        )
      })

      return (
        <DropdownButton bsStyle="default" title={title} key={i} id={`dropdown-basic-${i}`} onSelect={this.preselect.bind(this)}>
          {menuitems}
        </DropdownButton>
      );
    }
    return null
  }

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

    if (!this.props.token) {
      return null
    }


    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} defaultExpanded={true}>

        {userinfo}

        <div>
          <p>Fetch data from</p>
          {this.renderDropdownButton()}
          <FormGroup
            className="gutter"
            controlId="formBasicText"
          >
            <FormControl
              type="text"
              bsSize="large"
              placeholder="http://httpjs.net/foo"
              value={this.state.customEndpoint}
              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