import Haste
import Haste.DOM
import Haste.Events

import Pages

main = do
    a      <- mkInput 4 "0"
    op     <- newTextElem "+"
    b      <- mkInput 4 "0"
    eq     <- newTextElem "="
    result <- newElem "span"

    row documentBody [a,op,b,eq,result]

    setStyle documentBody "text-align" "center"

    calculator a b result  -- To show the initial result
    onEvent a KeyUp $ \_ -> calculator a b result
    onEvent b KeyUp $ \_ -> calculator a b result

calculator a b result = do
    ma <- getValue a
    mb <- getValue b
    case (ma, mb) of
      (Just a', Just b') -> set result [ prop "innerHTML" =: toString (a' + b' :: Int) ]
      _                  -> return ()