import React from 'react'
import Loading from '../loading'
import Sidebar from 'app/containers/sidebar'

function by_name(a,b){
  return a.name.localeCompare( b.name )
}

const SidebarSections = React.createClass({
  getInitialState(){
    return {service_menu: undefined}
  },
  get_screen_data(screen_id){
    return this.props.serverboard.screens.find( (s) => s.id == screen_id )
  },
  screen_choose_service(screen, candidates){
    if (this.state.service_menu && this.state.service_menu.screen.id == screen.id)
      this.setState({service_menu: undefined}) // toggle off
    else
      this.setState({service_menu: {screen, candidates}})
  },
  handleSectionChange(section, data){
    if (section.indexOf('/')>=0){
      const screen=this.get_screen_data(section)
      console.log(screen, screen.traits.length==0)
      if (!screen.traits || screen.traits.length==0 || data)
        this.props.goto({pathname: `/s/${section}/`, state: data})
      else{
        const candidates = this.props.serverboard.services.filter( (s) => {
          for (let trait of screen.traits){
            if (s.traits.includes(trait))
              return true
            }
          return false
        })
        console.log("Candidate services are %o", candidates.map( (s) => s.name ))
        this.screen_choose_service(screen, candidates)
      }
    }
    else{
      this.props.goto(`/serverboard/${this.props.serverboard.shortname}/${section}`)
    }
  },
  render(){
    const props=this.props
    let self=this
    function MenuItem(menu_props){
      let klass="item"
      let current=[]
      if (menu_props.section==props.section){
        klass+=" active"
        current=(
          <i className="icon angle right floating right"/>
        )
      }
      if (menu_props.icon){
        current=(
          <i className={`icon ${menu_props.icon}`}/>
        )
      }
      return (
        <a className={klass} onClick={() => self.handleSectionChange(menu_props.section, menu_props.data)}>
        {menu_props.children}
        {current}
        </a>
      )
    }

    const service_menu=this.state.service_menu

    return (
      <div className="ui vertical menu sections">
        <h3 className="ui item header">{props.serverboard.name}</h3>
        <MenuItem section="overview">Overview</MenuItem>
        <MenuItem section="services">Services</MenuItem>
        <MenuItem section="rules">Rules</MenuItem>
        <MenuItem section="settings">Settings</MenuItem>
        <div className="ui divider"/>
        {props.serverboard.screens.sort(by_name).map( (s) => (service_menu && service_menu.screen.id == s.id) ? (
          <div>
            <MenuItem section={s.id} data-tooltip={s.description} icon="caret down">{s.name}</MenuItem>
            <div className="menu">
              {service_menu.candidates.map( (service) => (
                <MenuItem section={s.id} data={{service}} data-tooltip={service.description}>{service.name}</MenuItem>
              ))}
            </div>
          </div>
        ) : (
          <MenuItem section={s.id} data-tooltip={s.description} icon={s.traits.length>0 ? "caret right" : undefined}>{s.name}</MenuItem>
        ))}
      </div>
    )
    //<MenuItem section="permissions">Permissions</MenuItem>
    //<MenuItem section="logs">Logs</MenuItem>
  }
})

const Serverboard=React.createClass({
  render(){
    const props=this.props
    console.log(props)
    if (!props.serverboard)
      return (
        <Loading>
        Serverboard information.
        </Loading>
      )

    let section = props.params.section || 'default'
    let Section = require(`../../containers/serverboard/${section}`).default

    return (
      <div className="ui central with menu">
        <Sidebar/>
        <SidebarSections
          section={props.params.section}
          serverboard={props.serverboard}
          goto={props.goto}
          />
        <div className="ui central white background">
          <Section serverboard={props.serverboard} subsection={props.params.subsection} location={props.location}/>
        </div>
      </div>
    )
  }
})

export default Serverboard

@@ -96,16 +96,74 @@
 sidebar'
+%0Aimport %7Bmerge%7D from 'app/utils'%0Aimport rpc from 'app/rpc'
 %0A%0Afuncti
@@ -932,17 +932,272 @@
 %7C%7C data)
+%7B
 %0A
+        if (data.service)%7B%0A          rpc.call(%22service.info%22, %5Bdata.service.uuid%5D).then( (service) =%3E %7B // May need full info%0A            this.props.goto(%7Bpathname: %60/s/$%7Bsection%7D/%60, state: merge(data, %7Bservice%7D) %7D)%0A          %7D)%0A        %7D%0A        else%0A  
         
@@ -1255,16 +1255,24 @@
  data%7D)%0A
+      %7D%0A
       el

Fix screens with _pw data