package demo.examples

import com.acework.js.components.bootstrap.Modal.{N, B, S, P}
import com.acework.js.components.bootstrap._
import japgolly.scalajs.react.ReactComponentC.{ReqProps, ConstProps}
import japgolly.scalajs.react._
import japgolly.scalajs.react.vdom.prefix_<^._
import org.scalajs.dom.raw.HTMLElement
import org.scalajs.dom.{Node, document}

/**
 * Created by weiyin on 21/03/15.
 */
object ContainedModal {

  val containerRef: RefSimple[TopNode] = Ref[HTMLElement]("container")

  def containedModel = {
    Modal.Modal(bsStyle = Styles.primary, title = "Contained Modal": ReactNode, animation = true,
      onRequestHide = () => ())(
        <.div(^.className := "modal-body",
          <.h4("Text in a modal"),
          <.p("Elit est explicabo ipsum eaque dolorem blanditiis doloribus sed id ipsam, beatae, rem fuga id earum? Inventore et facilis obcaecati.")
        ),
        <.div(^.className := "modal-footer",
          // FIXME link onClick to onRequestHide
          Button(Button.Button(), "Close"))
      )
  }

  class Backend(val scope: BackendScope[Unit, Unit])

  val trigger = ReactComponentB[Unit]("Trigger")
    .stateless
    .backend(new Backend(_))
    .render((_, _, B) => {

    <.div(^.className := "modal-container", ^.height := 300, ^.ref := containerRef,
      ModalTrigger.ModalTrigger(modal = containedModel,
        container = new ReferencedContainer(containerRef, B.scope))(
          Button(Button.Button(bsStyle = Styles.primary, bsSize = Sizes.lg), "Launch contained modal")
        )
    )
  }).
    buildU

}