import React from 'react'
import _ from 'underscore'
import { DropdownButton, MenuItem, Label } from 'react-bootstrap'
import './GraphSettings.css'
import Popup from './PopupSettings'
import { pathGraph, basicGraph, schemas, nodeNames } from './requests'

var emptyState = {
  nodeNames: [],
  fromNode: '',
  graph: {
    nodeNames: [],
    edges: []
  },
  showHops: false,
  toNode: '',
  hops: {
    parents: 1,
    cousin: 1,
    child: 1
  },
  selectedSchema: ''
}

class GraphSettings extends React.Component {
  constructor (props, context) {
    super(props, context)

    this.onChangeStartNode = this.onChangeStartNode.bind(this)
    this.selectSchema = this.selectSchema.bind(this)
    this.onChangeToNode = this.onChangeToNode.bind(this)
    this.loadInitialGraph = this.loadInitialGraph.bind(this)
    this.updateHops = this.updateHops.bind(this)
    this.graphFingerprint = this.graphFingerprint.bind(this)
    this.state = emptyState
  }
  // this serves as a config 'fingerprint' to know if the d3 visualisation should be redrawn from scratch or just updated
  graphFingerprint (schema, from, to, parents, cousin, child) {
    return `${schema}:${from}:${to}:${parents}:${cousin}:${child}`
  }

  loadInitialGraph (startNode, endNode, parentHops, cousinHops, childHops) {
    let requestUri = endNode === 'none' ? basicGraph(this.state.selectedSchema, startNode, 0, 0, 1) : pathGraph(this.state.selectedSchema, startNode, endNode)

    fetch(requestUri)
      .then(response => response.json())
      .then(g => {
        let schema = this.state.selectedSchema

        let f = this.graphFingerprint(schema, startNode, endNode, parentHops, cousinHops, childHops)
        this.props.graphData(g, this.state.selectedSchema, f)
      })
      .then(g => {
        var s = this.state
        s['hops']['parents'] = parentHops
        s['hops']['cousin'] = cousinHops
        s['hops']['child'] = childHops
        s['fromNode'] = startNode
        s['toNode'] = endNode
        s['graph'] = g
        s['showHops'] = endNode === 'none' && startNode !== 'none'
        this.setState(s)
      })
  }

  selectSchema (schema) {
    var s = this.state
    s['selectedSchema'] = schema
    fetch(nodeNames(schema))
      .then(response => response.json())
      .then(nodeNames => {
        s['fromNode'] = s['toNode'] = 'none'
        s['nodeNames'] = nodeNames
        this.setState(s)
      })
  }

  updateHops (parentHops, cousinHops, childHops) {
    this.loadInitialGraph(
      this.state.fromNode,
      this.state.toNode,
      parentHops,
      cousinHops,
      childHops)
  }

  onChangeToNode (eventKey) {
    this.loadInitialGraph(this.state.fromNode,
      eventKey,
      this.state.hops.parents,
      this.state.hops.cousin,
      this.state.hops.child)
  }

  onChangeStartNode (eventKey) {
    this.loadInitialGraph(eventKey, this.state.toNode,
      this.state.hops.parents,
      this.state.hops.cousin,
      this.state.hops.child)
  }

  componentDidMount () {
    fetch(schemas())
      .then(response => response.json())
      .then(schemas => {
        let s = this.state
        s['schemas'] = schemas
        this.setState(s)
      })
  }

  render () {
    var schemas = _.map(this.state.schemas, (x, k) => <MenuItem key={k} eventKey={x}>{x}</MenuItem>)

    var items = _.map(this.state.nodeNames, (x, k) => <MenuItem key={k} eventKey={x.id}>{x.id}</MenuItem>)

    var fromItems = items.slice()
    fromItems.unshift(<MenuItem key='divider' divider />)
    fromItems.unshift(<MenuItem key='none' eventKey='none'>none</MenuItem>)

    items.unshift(<MenuItem key='anotherdivider' divider />)
    items.unshift(<MenuItem key='none' eventKey='none'>none</MenuItem>)

    return (
      <div>
        <div className="graph-menu">
          <div className="startendnode-dropdown">
            <div>
              <Label>Schemas</Label>
              <DropdownButton className="schemas-dropdown" onSelect={this.selectSchema} id="schemas" title={this.state.selectedSchema}>
                {schemas}
              </DropdownButton>
            </div>
            <div className="source-dropdown-div">
              <Label>Source Node</Label>
              <DropdownButton className="node-dropdown" onSelect={this.onChangeStartNode} id="namesFrom" title={this.state.fromNode}>
                {fromItems}
              </DropdownButton>
            </div>
            <div>
              <Label>Destination Node</Label>
              <DropdownButton className="node-dropdown" onSelect={this.onChangeToNode} id="namesTo" title={this.state.toNode}>
                {items}
              </DropdownButton>

            </div>
            <Popup isDisabled={!this.state.showHops} parentHops={this.state.hops.parents} childHops={this.state.hops.child} cousinHops={this.state.hops.cousin} updateHops={this.updateHops}/>
          </div>

        </div>
      </div>
    )
  }
}

export default GraphSettings