package hello.world

import slinky.core._
import slinky.core.annotations.react
import slinky.core.facade.ReactElement
import slinky.web.html._

import scala.scalajs.js
import scala.scalajs.js.annotation.{JSImport, ScalaJSDefined}

@JSImport("resources/App.css", JSImport.Default)
@js.native
object AppCSS extends js.Object

@JSImport("resources/logo.svg", JSImport.Default)
@js.native
object ReactLogo extends js.Object

@react object RouteAlt extends ExternalComponent {
  type Props = typings.reactDashRouterLib.reactDashRouterMod.RouteProps
  override val component = typings.reactDashRouterDashDomLib.reactDashRouterDashDomLibComponents.Route[ReactComponentClass[_]]
}

@react object App {

  type Props = Unit

  import typings.reactLib.ScalableSlinky._
  import typings.reactDashRouterDashDomLib.reactDashRouterDashDomLibComponents._
  import typings.reactDashRouterLib.reactDashRouterMod.RouteProps
  private val css = AppCSS

  val component = FunctionalComponent[Props] { _ =>

    def home = div(
      h2("Home")
    )

    def about = div(
      h2("About")
    )

    def topics = div(
      h2("Topics")
    )

    BrowserRouter.noprops(
      div(
        ul(
          li(Link.props(LinkProps(to = "/"))("Home")),
          li(Link.props(LinkProps(to = "/about"))("About")),
          li(Link.props(LinkProps(to = "/topics"))("Topics"))
        ),
        hr(),
        RouteAlt(RouteProps(exact = true, path = "/", render = _ => home: ReactElement)),
        RouteAlt(RouteProps(path = "/about", render = _ => about: ReactElement)),
        RouteAlt(RouteProps(path = "/topics", render = _ => topics: ReactElement)),

        // Original from React Router basic example, to be converted
        // <Route exact path="/" component={Home} />
        // <Route path="/about" component={About} />
        // <Route path="/topics" component={Topics} />
      )
    )

  }

}