menu

package manik1.manik1

import org.scalajs.dom
import org.scalajs.dom.Event
import cats.implicits._
import manik1.modules.{FrmComparative, FrmInvitationToTender, FrmOrder, FrmReportMaker, FrmLstItems, FrmFallo}
import monix.reactive.Observable
import outwatch.reactive.{LiftSource, SinkObserver, Source}
import monix.execution.Scheduler.Implicits.global
import monix.reactive.subjects.PublishSubject
import outwatch.dom._
import outwatch.dom.dsl.{id, _}
import outwatch.ext.monix._
import outwatch.ext.monix.handler._ // or if you want to use our own reactive library instead of monix: import outwatch.reactive.handler._

object Menu {
  trait Page
  case object Order               extends Page
  case object ReportMakerMenu     extends Page
  case object InvitToTenderMenu   extends Page
  case object FrmComparativeMenu  extends Page
  case object FrmLstItemsMenu     extends Page
  case object FrmFalloMenu     extends Page

  val hashRouter = Handler.create[Page](FrmLstItemsMenu).unsafeRunSync()

  def renderRouter: VDomModifier = hashRouter map {
    case Order =>
      val frm = new FrmOrder
      frm.render
    case ReportMakerMenu =>
      val frm = new FrmReportMaker
      frm.render
    case InvitToTenderMenu =>
      val frm = new FrmInvitationToTender
      frm.render
    case FrmComparativeMenu =>
      val frm = new FrmComparative
      frm.render
    case FrmLstItemsMenu =>
      val frm = new FrmLstItems
      frm.render
    case FrmFalloMenu =>
      val frm = new FrmFallo
      frm.render
  }

  def click(p: Page) = onClick.use(p) --> hashRouter

  def menuItem(txt: String, p: Page) =
    div(li(txt, id := "menuItem" + txt, key := "menuItem" + txt, cls := "itemMenuDropDown", click(p)))

  def subMenu(txt: String, items: Map[String, Page]) =
    li(
      txt,
      id  := "subMenu" + txt,
      key := "subMenu" + txt,
      cls := "menuDropDown",
      div(id := "subMenuGroup" + txt, key := "subMenuGroup" + txt, cls := "menuDropDown2", items.map {
        case (k, v) => menuItem(k, v)
      }.toSeq)
    )

  def render =
    div(
      clear.both,
      id  := "MainSite",
      key := "MainSite",
      div(
        clear.both,
        id  := "mainMenu",
        key := "mainMenu",
        ul(
          subMenu(
            "Adq",
            Map(  "Pedido" -> Order,
                  "Report Maker" -> ReportMakerMenu,
                  "Inv. a Cotiz." -> InvitToTenderMenu,
                  "Cotizaciones"-> FrmComparativeMenu,
                  "Lista Bienes" -> FrmLstItemsMenu,
                  "Fallo" -> FrmFalloMenu,
            )
          )
        )
      ),
      div(
        clear.both,
        id        := "screenSite",
        key       := "screenSite",
        marginTop := "50px",
        /*cls := "twelve wide fluid column",*/

        renderRouter
      )
    )

}