text: import React, { cloneElement } from "react"
  import PropTypes from "prop-types"
  /*
  Note: As a plugin example, relative to main repo,
  we do not include "setSearch" in the Component,
  which requires import {parseSearch, serializeSearch} from core-utils
  */
  
  export default class Topbar extends React.Component {
  
    static propTypes = {
      layoutActions: PropTypes.object.isRequired
    }
  
    constructor(props, context) {
      super(props, context)
      this.state = { url: props.specSelectors.url(), selectedIndex: 0 }
    }
  
    componentWillReceiveProps(nextProps) {
      this.setState({ url: nextProps.specSelectors.url() })
    }
  
    onUrlChange =(e)=> {
      let {target: {value}} = e
      this.setState({url: value})
    }
  
    loadSpec = (url) => {
      this.props.specActions.updateUrl(url)
      this.props.specActions.download(url)
    }
  
    onUrlSelect =(e)=> {
      let url = e.target.value || e.target.href
      this.loadSpec(url)
      this.setSelectedUrl(url)
      e.preventDefault()
    }
  
    downloadUrl = (e) => {
      this.loadSpec(this.state.url)
      e.preventDefault()
    }
  
    setSelectedUrl = (selectedUrl) => {
      const configs = this.props.getConfigs()
      const urls = configs.urls || []
  
      if(urls && urls.length) {
        if(selectedUrl)
        {
          urls.forEach((spec, i) => {
            if(spec.url === selectedUrl)
              {
                this.setState({selectedIndex: i})
              }
          })
        }
      }
    }
  
    componentDidMount() {
      const configs = this.props.getConfigs()
      const urls = configs.urls || []
  
      if(urls && urls.length) {
        var targetIndex = this.state.selectedIndex
        let primaryName = configs["urls.primaryName"]
        if(primaryName)
        {
          urls.forEach((spec, i) => {
            if(spec.name === primaryName)
              {
                this.setState({selectedIndex: i})
                targetIndex = i
              }
          })
        }
  
        this.loadSpec(urls[targetIndex].url)
      }
      // instantiate wowMode state for topBar
      // note that this will be an issue if topbar is not rendered (different customization)
      // should probably create a (visible:hidden) component that renders alongside topBar to instantiate from
      this.props.wowModeActions.setFactionHorde()
    }
  
    onFilterChange =(e) => {
      let {target: {value}} = e
      this.props.layoutActions.updateFilter(value)
    }
  
    render() {
      let { getComponent, specSelectors, getConfigs } = this.props
      const Button = getComponent("Button")
      const Link = getComponent("Link")
      const WowLogo = getComponent("WowLogo", true)
      const WowFaction = getComponent("WowFaction", true)
  
      let isLoading = specSelectors.loadingStatus() === "loading"
      let isFailed = specSelectors.loadingStatus() === "failed"
  
      let inputStyle = {}
      if(isFailed) inputStyle.color = "red"
      if(isLoading) inputStyle.color = "#aaa"
  
      const { urls } = getConfigs()
      let control = []
      let formOnSubmit = null
      const { wowModeSelectors } = this.props
      let isFactionHorde = wowModeSelectors.getIsFactionHorde()
  
      if(urls) {
        let rows = []
        urls.forEach((link, i) => {
          rows.push(<option key={i} value={link.url}>{link.name}</option>)
        })
  
        control.push(
          <label className="select-label" htmlFor="select"><span>Select a definition</span>
            <select id="select" disabled={isLoading} onChange={ this.onUrlSelect } value={urls[this.state.selectedIndex].url}>
              {rows}
            </select>
          </label>
        )
      }
      else {
        formOnSubmit = this.downloadUrl
        control.push(<input className="download-url-input" type="text" onChange={ this.onUrlChange } value={this.state.url} disabled={isLoading} style={inputStyle} />)
        let btnClassColor;
        if (!isFactionHorde) {
          btnClassColor = `download-url-button download-url-button-alliance`
          control.push(<Button className={btnClassColor} onClick={ this.downloadUrl }>Well Met!</Button>)
        } else {
          btnClassColor = `download-url-button download-url-button-horde`
          control.push(<Button className={btnClassColor} onClick={ this.downloadUrl }>Lok'tar!</Button>)
        }
      }
  
      return (
        <div className="topbar topbar-wowmode">
          <div className="wrapper">
            <div className="topbar-wrapper">
              <Link className="topbar-wowmode-text">
                <WowLogo />
                <span className="">WoWMode</span>
              </Link>
              <WowFaction />
              <form className="download-url-wrapper" onSubmit={formOnSubmit}>
                {control.map((el, i) => cloneElement(el, { key: i }))}
              </form>
              <div className="topbar-spacer"></div>
            </div>
          </div>
        </div>
      )
    }
  }
  
  Topbar.propTypes = {
    specSelectors: PropTypes.object.isRequired,
    specActions: PropTypes.object.isRequired,
    getComponent: PropTypes.func.isRequired,
    getConfigs: PropTypes.func.isRequired
  }
  