package com.example.playscalajsreact.component
import com.example.playscalajsreact.model.MyGlobalState
import japgolly.scalajs.react.vdom.VdomElement
import japgolly.scalajs.react.Callback
import japgolly.scalajs.react._
import japgolly.scalajs.react.vdom.html_<^._
import com.example.playscalajsreact.route.AppRouter
import japgolly.scalajs.react.extra.router.RouterCtl
import com.example.playscalajsreact.route.Page
import com.example.playscalajsreact.route.Page._
import japgolly.scalajs.react.extra.StateSnapshot
import com.example.playscalajsreact.model.User

object MenuComponent {
  case class State(myGlobalState: MyGlobalState = MyGlobalState())
  case class Props(state: StateSnapshot[MyGlobalState], c: RouterCtl[Page])

  class Backend($ : BackendScope[Props, Unit]) {
    
    def render(props: Props): VdomElement =
    {
      val name = props.state.value.user.getOrElse(User.empty).username
      <.ul(
          Array(
            Menu("Home", Home),
            Menu("Hello", Hello),
            Menu(name, Person(name, 0)),
            Menu("Editor", Editor),
            Menu("Test", Test)
          ).toTagMod { item =>
            {
              <.li(
                ^.key := item.name,
                <.a(
                  item.name,
                  props.c setOnClick item.route,
                  ^.color := "red"
                )
              )
            }
          }
        )
    }
  }

  private val component = ScalaComponent
    .builder[Props]("menu")
    // .initialState(State())
    .renderBackend[Backend]
    // .componentDidMount($ => $.backend.refresh($.state))
    .build

  def apply(state: StateSnapshot[MyGlobalState], c: RouterCtl[Page]) = component(Props(state, c))
}