module Main exposing (main)

import Html exposing (..)
import Html.Events exposing (onClick)


main =
    Html.beginnerProgram
        { model = initialModel
        , view = view
        , update = update
        }


type State
    = Open
    | Closed


type alias Model =
    { state : State, values : List String }


initialModel : Model
initialModel =
    { state = Open
    , values = fruits
    }


fruits : List String
fruits =
    [ "bananas"
    , "apples"
    , "oranges"
    , "peaches"
    , "strawberries"
    ]


view : Model -> Html Msg
view model =
    case model.state of
        Open ->
            viewOpen model

        Closed ->
            viewClosed


viewOpen : Model -> Html Msg
viewOpen model =
    div []
        [ p [ onClick CloseSelect ] [ text "Click to close" ]
        , ul [] (List.map dropdownItem model.values)
        ]


viewClosed : Html Msg
viewClosed =
    div []
        [ p [ onClick OpenSelect ] [ text "Click to open" ]
        ]


dropdownItem : String -> Html a
dropdownItem value =
    li [] [ text value ]


type Msg
    = OpenSelect
    | CloseSelect


update : Msg -> Model -> Model
update msg model =
    case msg of
        OpenSelect ->
            { model | state = Open }

        CloseSelect ->
            { model | state = Closed }

module Main exposing (main)

import Html exposing (..)
import Html.Events exposing (onClick)


main =
    Html.beginnerProgram
        { model = initialModel
        , view = view
        , update = update
        }


type State
    = Open
    | Closed


type alias Model =
    { state : State
    , values : List String
    , selected : Maybe String
    }


initialModel : Model
initialModel =
    { state = Open
    , values = fruits
    , selected = Nothing
    }


fruits : List String
fruits =
    [ "bananas"
    , "apples"
    , "oranges"
    , "peaches"
    , "strawberries"
    ]


view : Model -> Html Msg
view model =
    case model.state of
        Open ->
            viewOpen model

        Closed ->
            viewClosed model


viewOpen : Model -> Html Msg
viewOpen model =
    div []
        [ dropdownHead model.selected CloseSelect
        , ul [] (List.map dropdownItem model.values)
        ]


viewClosed : Model -> Html Msg
viewClosed model =
    div []
        [ dropdownHead model.selected OpenSelect
        ]


dropdownItem : String -> Html a
dropdownItem value =
    li [] [ text value ]


dropdownHead : Maybe String -> Msg -> Html Msg
dropdownHead selected msg =
    case selected of
        Nothing ->
            p [ onClick msg ] [ text "Click to toggle" ]

        Just value ->
            p [ onClick msg ] [ text value ]


type Msg
    = OpenSelect
    | CloseSelect


update : Msg -> Model -> Model
update msg model =
    case msg of
        OpenSelect ->
            { model | state = Open }

        CloseSelect ->
            { model | state = Closed }

Add the concept of a "selected" value
Add the concept of a "selected" value

The whole point of this is to be able to select values. Since it's
possible for no values to be selected, we wrap it in `Maybe`.

The view gets trickier because there are now 4 ways to render the
dropdown:

Open vs Closed each with the appropriate click handler and displaying
the selected text or the help tip if nothing is selected.

To accomplish this, we extract a `dropdownHead` function that deals with
selected vs no selection. Since we already know whether the dropdown is
open or not, we just pass in the `Msg` type we want for the click
handler.

Because we're now handling whether an item is selected or not, the
closed view is no longer static.
