module Graphics.Input where
{-| This module is for creating input widgets such as buttons and text fields.
All functions in this library report to a [`Signal.Input`](Signal#customSignal).

# Basic Input Elements

To learn about text fields, see the
[`Graphics.Input.Field`](Graphics-Input-Field) library.

@docs button, customButton, checkbox, dropDown

# Clicks and Hovers
@docs clickable, hoverable

-}

import Signal
import Graphics.Element (Element)
import Native.Graphics.Input


{-| Create a standard button. The following example begins making a basic
calculator:

    type Keys = Number Int | Plus | Minus | Clear

    keys : Signal.Channel Keys
    keys = Signal.channel Clear

    calculator : Element
    calculator =
        flow right
          [ button (Signal.send keys (Number 1)) "1"
          , button (Signal.send keys (Number 2)) "2"
          , button (Signal.send keys    Plus   ) "+"
          ]

If the user presses the "+" button, `keys.signal` will update to `Plus`. If the
users presses "2", `keys.signal` will update to `(Number 2)`.
-}
button : Signal.Message -> String -> Element
button =
  Native.Graphics.Input.button


{-| Same as `button` but lets you customize buttons to look however you want.

    click : Signal.Channel
    click = Signal.channel ()

    prettyButton : Element
    prettyButton =
        customButton (Signal.send click ())
            (image 100 40 "/button_up.jpg")
            (image 100 40 "/button_hover.jpg")
            (image 100 40 "/button_down.jpg")
-}
customButton : Signal.Message -> Element -> Element -> Element -> Element
customButton =
  Native.Graphics.Input.customButton


{-| Create a checkbox. The following example creates three synced checkboxes:

    check : Signal.Channel Bool
    check = Signal.channel False

    boxes : Bool -> Element
    boxes checked =
        let box = container 40 40 middle (checkbox (Signal.send check) checked)
        in
            flow right [ box, box, box ]

    main : Signal Element
    main = boxes <~ Signal.subscribe check
-}
checkbox : (Bool -> Signal.Message) -> Bool -> Element
checkbox =
  Native.Graphics.Input.checkbox


{-| Create a drop-down menu.  The following drop-down lets you choose your
favorite British sport:

    type Sport = Football | Cricket | Snooker

    sport : Signal.Channel (Maybe Sport)
    sport = Signal.channel Nothing

    sportDropDown : Element
    sportDropDown =
        dropDown (Signal.send sport)
          [ (""        , Nothing)
          , ("Football", Just Football)
          , ("Cricket" , Just Cricket)
          , ("Snooker" , Just Snooker)
          ]

If the user selects "Football" from the drop down menue, `Signal.subscribe sport`
will update to `Just Football`.
-}
dropDown : (a -> Signal.Message) -> List (String, a) -> Element
dropDown =
  Native.Graphics.Input.dropDown


{-| Detect mouse hovers over a specific `Element`. In the following example,
we will create a hoverable picture called `cat`.

    hover : Signal.Channel Bool
    hover = Signal.channel False

    cat : Element
    cat =
      image 30 30 "/cat.jpg"
        |> hoverable (Signal.send hover)

When the mouse hovers above the `cat` element, `hover.signal` will become
`True`. When the mouse leaves it, `hover.signal` will become `False`.
-}
hoverable : (Bool -> Signal.Message) -> Element -> Element
hoverable =
  Native.Graphics.Input.hoverable


{-| Detect mouse clicks on a specific `Element`. In the following example,
we will create a clickable picture called `cat`.

    type Picture = Cat | Hat

    picture : Signal.Channel Picture
    picture = Signal.channel Cat

    cat : Element
    cat =
      image 30 30 "/cat.jpg"
        |> clickable (Signal.send picture Cat)

    hat : Element
    hat =
      image 30 30 "/hat.jpg"
        |> clickable (Signal.send picture Hat)

When the user clicks on the `cat` element, `picture.signal` receives
an update containing the value `Cat`. When the user clicks on the `hat` element,
`picture.signal` receives an update containing the value `Hat`. This lets you
distinguish which element was clicked. In a more complex example, they could be
distinguished with IDs or more complex data structures.
-}
clickable : Signal.Message -> Element -> Element
clickable =
  Native.Graphics.Input.clickable