package com.example.playscalajsreact.route

import org.scalajs.dom
import japgolly.scalajs.react._
import japgolly.scalajs.react.vdom.html_<^._
import japgolly.scalajs.react.extra._
import japgolly.scalajs.react.extra.router._
import com.example.playscalajsreact.component.HelloWorldSJSRComponent
import com.example.playscalajsreact.component.MenuComponent
import com.example.playscalajsreact.component.Top
import com.example.playscalajsreact.component.Top2
import com.example.playscalajsreact.model.MyGlobalState
import com.example.playscalajsreact.component.Middle2



object AppRouter {
  import com.example.playscalajsreact.route.Page._

  final case class Props(state: StateSnapshot[MyGlobalState])

  private def layout(c: RouterCtl[Page], r: ResolutionWithProps[Page, Props])(
      appState: Props
  ) =
    <.div(
      MenuComponent(appState.state, c),
      r.renderP(appState)
    )

  val x = <.ol(
    ^.id := "my-list",
    ^.lang := "en",
    ^.margin := 8.px,
    <.li("Item 1"),
    <.li("Item 2")
    // HelloWorldSJSRComponent("Hello", 18)
  )

  val routerConfig = RouterWithPropsConfigDsl[Page, Props].buildConfig { dsl =>
    import dsl._
    (emptyRule
      | staticRoute(root, Home) ~> render(x)
      | dynamicRouteCT(
        ("#user" / string("[a-zA-Z0-9]{1,20}") / "age" / int)
          .caseClass[Person]
      ) ~> dynRender((page: Person) => {
        HelloWorldSJSRComponent(page.user, page.age)
      })
      | staticRoute("#hello", Hello) ~> render(<.div("TODO"))
      | staticRoute("#editor", Editor) ~> render(Top.Comp())
      | staticRoute("#test", Test) ~> renderP(p => Middle2.Props("Aege", p.state).render)
      | staticRedirect("#hey") ~> redirectToPage(Hello)(
        SetRouteVia.HistoryReplace
      ))
      .notFound(redirectToPage(Home)(SetRouteVia.HistoryReplace))
      .renderWithP(layout)
  }

  val router =
    RouterWithProps(BaseUrl("http://localhost:8080/"), AppRouter.routerConfig)
}