import React, { PureComponent } from 'react'
import {Table, Navbar, Nav, NavItem, NavDropdown, MenuItem, Glyphicon, Jumbotron, Button} from 'react-bootstrap'
import {Alert, 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 LoadingIndicator from '../components/LoadingIndicator'

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 = this.props.serverConfig.userinfo_endpoint;
    // console.error("Get userinfo from ", endpoint)
    this.props.httpRequestStart(endpoint)
  }

  fetchCustom() {

  }

  handleAlertDismiss() {

  }

  getErrorMessage() {
    if (this.props.http.error) {
      return (
        <Alert bsStyle="danger" onDismiss={this.handleAlertDismiss}>
          <h4>Error performing HTTP request</h4>
          <p>{this.props.http.error}</p>
        </Alert>
      )
    }
    return null
  }
  render() {
    // console.error("Component", this.props)

    if (!this.props.http) {
      return (
        <p></p>
      )
    }

    let headers = []
    if (this.props.http.response && this.props.http.response.headers) {
      this.props.http.response.headers.forEach((item) => {
        headers.push((
          <tr key={item.key}>
            <td>{item.key}</td>
            <td>{item.value}</td>
          </tr>
        ))
      })
    }

    let bodystr = this.props.http.response ? JSON.stringify(this.props.http.response.body, undefined, 2) : ''
    let loading = null
    if (this.props.http.isLoading) {
      loading = (
        <LoadingIndicator />
      )
    }


    return (
      <Panel header="HTTP Response" eventKey="1" collapsible={true} defaultExpanded={true}>
        <div>
          <p><code>GET</code> request to <code>{this.props.http.url}</code></p>
          { loading }
          {this.getErrorMessage()}
          <Table striped bordered condensed hover>
            <tbody>
              {headers}
            </tbody>
          </Table>
          <pre>{ bodystr }</pre>
        </div>
      </Panel>
    )
  }


}

export default Component