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

import WhiteBox from './WhiteBox'

const fontStyling = {
  fontWeight: 'bold',
  fontFamily: 'colfaxBold,Helvetica,Arial,sans-serif'
}

class Component extends PureComponent {

  constructor(props) {
    super(props)
    // console.log("--- props", this.props)

    // With these Location object properties you can access all of these URL components
    //
    // hash - Sets or returns the anchor portion of a URL.
    // host - Sets or returns the hostname and port of a URL.
    // hostname - Sets or returns the hostname of a URL.
    // href - Sets or returns the entire URL.
    // pathname - Sets or returns the path name of a URL.
    // port - Sets or returns the port number the server uses for a URL.
    // protocol - Sets or returns the protocol of a URL.
    // search - Sets or returns the query portion of a URL

    var currentURL = window.location.protocol + '//' + window.location.hostname + (window.location.port ? ':' + window.location.port : '' ) + '/callback'
    // console.log("currentURL", currentURL)

    this.state = {
      overrideToggle: null,
      client_id: "6233aedf-f08a-4112-9a1b-f33c3cd9b396",
      // clientSecret: "",
      redirectURL: currentURL,
      // scopes: "",
      // response_type: "token"
    }
  }

  authenticateStart() {

    let config = Object.assign({}, this.props.serverConfig, this.state)
    console.error("Authenticaiton start with config", config)
    this.props.authenticateStart(config)
  }

  logoutStart() {
    this.props.logoutStart()
  }

  updateFieldHandler(field) {
    return (e) => {
      const upd = {
        [field]: e.target.value
      }
      this.props.updateConfig(upd)
      // this.setState(upd)
    }
  }

  actTogglePanel = (e) => {
    e.preventDefault()
    e.stopPropagation()
    if (this.state.overrideToggle === null) {
      this.setState({overrideToggle: !(this.props.expanded)})
    } else {
      this.setState({overrideToggle: !(this.state.overrideToggle === true)})
    }
  }


  render() {
    // console.log("X This props", this.props)
    // console.log("X This state", this.state)

    let authorizationEndpoint = ''
    if (this.props.serverConfig) {
      authorizationEndpoint = this.props.serverConfig.authorization_endpoint
    }

    let tokenEndpoint = ''
    if (this.props.serverConfig) {
      tokenEndpoint = this.props.serverConfig.token_endpoint
    }

    let userinfoEndpoint = ''
    if (this.props.serverConfig) {
      userinfoEndpoint = this.props.serverConfig.userinfo_endpoint
    }

    let clientId = ''
    if (this.props.serverConfig && typeof this.props.serverConfig.client_id !== 'undefined') {
      clientId = this.props.serverConfig.client_id
      this.state.client_id = this.props.serverConfig.client_id
      console.error("Setting clientid to serverconfig", clientId)
    } else if (this.state && this.state.client_id) {
      clientId = this.state.client_id
    }

    let clientSecret = ''

    let scopes = ''
    if (this.props.serverConfig) {
      scopes = this.props.serverConfig.scopes
    }

    let expanded = (this.state.overrideToggle === true) || this.props.expanded
    return (
      <Panel eventKey="2" collapsible={true} expanded={expanded}>
        <Panel.Heading onClick={this.actTogglePanel} className={"panel-title"} style={fontStyling}>
          Configuration
        </Panel.Heading>
        <Panel.Collapse>
          <Panel.Body>
            <form>
              <h3>Server configuration</h3>

              <h4>OAuth Authorization endpoint</h4>
              <FormGroup>
                <FormControl id="inputAuthorization" type="text" value={authorizationEndpoint}
                             onChange={this.updateFieldHandler.bind(this)("authorization_endpoint")}/>
              </FormGroup>

              <h4>OAuth Token endpoint</h4>
              <FormGroup>
                <FormControl id="inputToken" type="text" value={tokenEndpoint}
                             onChange={this.updateFieldHandler.bind(this)("token_endpoint")}/>
              </FormGroup>

              <h4>Userinfo Endpoint</h4>
              <FormGroup>
                <FormControl id="inputUserinfo" type="text" value={userinfoEndpoint}
                             onChange={this.updateFieldHandler.bind(this)("userinfo_endpoint")}/>
              </FormGroup>

              <h3>Client configuration</h3>

              <h4>Client ID</h4>
              <FormGroup>
                <FormControl id="inputClientid" type="text" bsSize="large" value={clientId}
                             onChange={this.updateFieldHandler.bind(this)("client_id")}/>
              </FormGroup>

              {/*
          <h4>Client secret</h4>
          <FormGroup>
              <FormControl type="text" bsSize="large" value={clientSecret} onChange={this.updateFieldHandler.bind(this)("client_secret")} />
          </FormGroup>
        */}
              <h4>Scopes</h4>
              <FormGroup>
                <FormControl type="text" bsSize="large" value={scopes}
                             onChange={this.updateFieldHandler.bind(this)("scopes")}/>
              </FormGroup>

              <FormGroup controlId="response_type">
                <ControlLabel>Response Type</ControlLabel>
                <FormControl componentClass="select" placeholder="select" value={this.state.response_type}
                             onChange={this.updateFieldHandler.bind(this)("response_type")}>
                  <option value="token">OAuth Implicit Grant (token)</option>
                  <option value="id_token token">OpenID Connect Implicit Flow (id_token token)</option>
                </FormControl>
              </FormGroup>

              <h4>Redirect URI</h4>
              <p>When you configure your client, please register the following redirect uri:</p>
              <p><code>{this.state.redirectURL}</code></p>

              <div>
                <Button id="btnAuthenticate" onClick={this.authenticateStart.bind(this)} bsStyle="primary">
                  <FontAwesome name='sign-in'/> Authenticate
                </Button>
                &nbsp;
                <Button id="btnWipe" onClick={this.logoutStart.bind(this)} bsStyle="danger">
                  <FontAwesome name='sign-out'/> Wipe token
                </Button>
              </div>
            </form>
          </Panel.Body>
        </Panel.Collapse>
      </Panel>
    )
  }
}

export default Component