import Html exposing (..)
import Html.Attributes exposing(..)
import Html.Events exposing(..)
import Signal exposing(..)

--MODEL
type alias Model = {
  blueClicks : Int,
  redClicks : Int,
  greenClicks : Int
}

initialModel : Model
initialModel = Model 0 0 0


--UPDATE
type Action = NoOp
  | BlueClick
  | RedClick
  | GreenClick


update : Action -> Model -> Model
update action model =
  case action of
    NoOp ->
      model

    BlueClick ->
      { model | blueClicks <- model.blueClicks + 1 }

    RedClick ->
      { model | redClicks <- model.redClicks + 1 }

    GreenClick ->
      { model | greenClicks <- model.greenClicks + 1 }


--VIEW
buttonStyle : String -> Attribute
buttonStyle colour =
  style [
    ("margin", "10px")
    , ("display", "block")
    , ("width", "150px")
    , ("height", "40px")
    , ("background-color", colour)
    , ("color", "#ffffff")]


totalClicks : Model -> String
totalClicks model =
  (toString (model.blueClicks + model.redClicks + model.greenClicks))


view : Address Action -> Model -> Html
view address model =
  div [] [
    button [
      (buttonStyle "blue"),
      onClick address BlueClick
      ] [ text ("Blue Clicked: " ++ (toString model.blueClicks)) ],

    button [(buttonStyle "red"),
      onClick address RedClick ] [ text ("Red Clicked: " ++ (toString model.redClicks)) ],

    button [(buttonStyle "green"),
      onClick address GreenClick ] [ text ("Green Clicked: " ++ (toString model.greenClicks)) ],

    div [] [
      text ("Total Clicks: " ++ (totalClicks model))
    ]
  ]

--WIRING
actions : Mailbox Action
actions =
  Signal.mailbox NoOp

model : Signal Model
model =
  Signal.foldp update initialModel actions.signal


main =
  Signal.map (view actions.address) model