-- | `App.HomeInterface` presents the website and its features.
module App.SimpleInput where

import Prelude (Unit, ($))

-- import Data.Either (Either(..))
-- import Data.Maybe (Maybe(..), maybe)
-- import Data.Tuple (Tuple(..))
import Effect.Aff.Class (class MonadAff)
import Halogen as H
import Halogen.HTML as HH
-- import Halogen.HTML.Events as HE
import Halogen.HTML.Properties as HP

import Bulma as Bulma

type Input = Unit
data Action = UpdateStuff String

data Query a = DoNothing a
type Output = Unit
type Slot = H.Slot Query Output

type State = { stuff :: String }

component :: forall m. MonadAff m => H.Component Query Input Output m
component =
  H.mkComponent
    { initialState
    , render
    , eval: H.mkEval $ H.defaultEval
        { handleAction = handleAction
        }
    }

handleAction :: forall m. MonadAff m => Action -> H.HalogenM State Action () Output m Unit
handleAction = case _ of
  UpdateStuff val -> H.modify_ _ { stuff = val }

initialState :: forall input. input -> State
initialState _ = { stuff: "" }

render :: forall m. State -> H.ComponentHTML Action () m
render state
  = HH.div_
      [ Bulma.hero_danger "A simple input" "Nothing much to see"
      , Bulma.section_small [ render_stuff ]
      ]
  where
    -- Some helpers.
    title = Bulma.h3
    p = Bulma.p
    b x = Bulma.column_ [ Bulma.box x ]

    render_stuff = Bulma.columns_ [ b [ title "stuff"
                                      , stuff_input
                                      ]
                                  , b [ title "value"
                                      , p state.stuff
                                      ]
                                  ]

    stuff_input
      = Bulma.box_input "stuff" "stuff" "stuff"
          UpdateStuff
          state.stuff
          true
          should_be_disabled
    should_be_disabled = (if true then (HP.enabled true) else (HP.disabled true))