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


const defaultHost = "https://auth.dataporten.no"

class Component extends PureComponent {

  constructor(props) {
    super(props)
    this.state = {
      hostname: defaultHost
    }
  }

  discoveryStart(e) {
    console.log("Setting hostname", this.state.hostname)
    console.log(this.props)
    this.props.discoveryStart(this.state.hostname)
  }

  updateHostfield(e) {
    console.log("Updating hostname to ", e.target.value)
    this.setState({hostname: e.target.value})
  }

  handleAlertDismiss() {
    console.error("TODO: Dismiss alert.")
    // this.setState({hostname: e.target.value})
  }

  getErrorMessage() {
    if (this.props.serverError) {
      console.log(typeof this.props.serverError)
      console.error(this.props.serverError)
      return (
        <Alert bsStyle="danger" onDismiss={this.handleAlertDismiss}>
          <h4>Error performing OAuth Discovery</h4>
          <p>{this.props.serverError.toString()}</p>
          <p>
            <span> or </span>
            <Button onClick={this.handleAlertDismiss}>Hide error</Button>
          </p>
        </Alert>
      )
    }
    return null
  }

  render() {
    console.log("This state", this.props)
    let errorMessage = null
    if (this.props.serverError) {
      errorMessage = (
        <div>
          <h2>Error performing OAuth Discovery</h2>
          <p>{this.props.serverError}</p>
        </div>
      )
    }

    return (
      <Panel header="OAuth Service Discovery" eventKey="1" collapsible={true} expanded={true}>
        <FormGroup
          className="gutter"
          controlId="formBasicText"
        >
          <h4>OAuth Server hostname</h4>
          <FormControl
            type="text"
            bsSize="large"
            defaultValue={this.state.hostname}
            placeholder="https://auth.yourplatform.org/"
            onChange={this.updateHostfield.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>
        {this.getErrorMessage()}
        <div>
          <Button onClick={this.discoveryStart.bind(this)} bsStyle="primary">
            <FontAwesome name='magic' />  Discovery OAuth Provider
          </Button>
        </div>
      </Panel>
    )
  }

}

export default Component