module Main where
import Data.Void
import Data.Tuple
import Data.Either

import Control.Monad.Eff
import Control.Plus
import DOM

import Halogen
import Halogen.Signal
import Halogen.Component

import qualified Halogen.HTML as H
import qualified Halogen.HTML.Attributes as A
import qualified Halogen.HTML.Events as A

import qualified Halogen.Themes.Bootstrap3 as B

import qualified Halogen.HTML.Events as E
import qualified Halogen.HTML.Events.Handler as E
import qualified Halogen.HTML.Events.Monad as E

foreign import appendToBody
  "function appendToBody(node) {\
  \  return function() {\
  \    document.body.appendChild(node);\
  \  };\
  \}" :: forall eff. Node -> Eff (dom :: DOM | eff) Node

data State = State Number

-- | Inputs to the state machine
data Input = Tick

ui :: forall p eff. Component p (E.Event _) Input Input
ui = component (render <$> stateful (State 0) update)
  where
  render :: State -> H.HTML p (E.Event _ Input)
  render (State n) =
    H.div [ A.class_ B.container
          , E.onClick (E.input_ Tick)
          , A.initializer (do E.yield Tick
                              E.yield Tick
                              E.yield Tick
                              empty) ]

    ([ H.h1 [ A.id_ "header" ] [ H.text "counter" ]
    , H.p [A.initializer (do pure Tick
                         )]
      [ H.text (show n) ]] <>
     (if n > 5
      then [H.p_ [H.text "More than five"]]
      else []))



  update :: State -> Input -> State
  update (State n) Tick = State (n + 1)

main = onLoad $ void do
  Tuple node driver <- runUI ui
  appendToBody node