Main.elm

module Main exposing (main)

import Browser
import Html exposing (Html, button, div, option, select, text)
import Html.Attributes exposing (selected, value)
import Html.Events exposing (onClick, onInput)


type alias Model =
    { selected : Maybe OptionX }


initialModel : Model
initialModel =
    { selected = Nothing }


type OptionX
    = A
    | B
    | C


fromOptionX : OptionX -> String
fromOptionX op =
    case op of
        A ->
            "Option A"

        B ->
            "Option B"

        C ->
            "Option C"


fromString : String -> Maybe OptionX
fromString label =
    case label of
        "Option A" ->
            Just A

        "Option B" ->
            Just B

        "Option C" ->
            Just C

        _ ->
            Nothing


toMsg : String -> Msg
toMsg label =
    case label of
        "Option A" ->
            ShowOptionA

        "Option B" ->
            ShowOptionB

        "Option C" ->
            ShowOptionC

        _ ->
            NoOption


type alias DropDown a =
    { getId : a -> String
    , getDisplayText : a -> String
    , items : List a
    , selectedItemId : String
    , onSelectionChanged : String -> Msg
    }


type Msg
    = NoOption
    | ShowOptionA
    | ShowOptionB
    | ShowOptionC


dropDown : String -> List (Html Msg) -> (String -> Msg) -> Html Msg
dropDown label options onInputMsg =
    div []
        [ div []
            [ text label ]
        , div []
            [ select
                [ onInput onInputMsg ]
                options
            ]
        ]


option_ : DropDown a -> a -> Html Msg
option_ dropdown_ item =
    let
        id =
            dropdown_.getId item
    in
    option
        [ value id
        , selected (id == dropdown_.selectedItemId)
        ]
        [ text (dropdown_.getDisplayText item) ]


emptyOption : String -> Html Msg
emptyOption selectedItemId =
    option [ value "", selected ("" == selectedItemId) ] [ text "" ]


renderSelectedOptionX : Maybe OptionX -> Html Msg
renderSelectedOptionX selectedOp =
    case selectedOp of
        Just A ->
            div []
                [ text "A (named /ˈeɪ/, plural As, A's, as, a's or aes[nb 1]) is the first letter and the first vowel of the modern English alphabet and the ISO basic Latin alphabet.[1] It is similar to the Ancient Greek letter alpha, from which it derives.[2] The uppercase version consists of the two slanting sides of a triangle, crossed in the middle by a horizontal bar. The lowercase version can be written in two forms: the double-storey a and single-storey ɑ. The latter is commonly used in handwriting and fonts based on it, especially fonts intended to be read by children, and is also found in italic type. In English grammar, 'a', and its variant 'an', is an indefinite article."
                ]

        Just B ->
            div []
                [ text "B or b (pronounced /biː/ BEE)[1][2] is the second letter of the Latin-script alphabet. It represents the voiced bilabial stop in many languages, including English. In some other languages, it is used to represent other bilabial consonants."
                ]

        Just C ->
            div []
                [ text "C is the third letter in the English alphabet and a letter of the alphabets of many other writing systems which inherited it from the Latin alphabet. It is also the third letter of the ISO basic Latin alphabet. It is named cee (pronounced /siː/) in English.[1]"
                ]

        Nothing ->
            div [] [ text "Nope" ]


update : Msg -> Model -> Model
update msg model =
    case msg of
        NoOption ->
            model

        ShowOptionA ->
            { model | selected = Just A }

        ShowOptionB ->
            { model | selected = Just B }

        ShowOptionC ->
            { model | selected = Just C }


exampleDropDown : DropDown OptionX
exampleDropDown =
    { getId = fromOptionX
    , getDisplayText = fromOptionX
    , items = [ A, B, C ]
    , selectedItemId = ""
    , onSelectionChanged = toMsg
    }


view : Model -> Html Msg
view model =
    div []
        [ dropDown
            "Select an option:"
            (emptyOption exampleDropDown.selectedItemId :: (exampleDropDown.items |> List.map (option_ exampleDropDown)))
            exampleDropDown.onSelectionChanged
        , div []
            [ renderSelectedOptionX model.selected ]
        ]


main : Program () Model Msg
main =
    Browser.sandbox
        { init = initialModel
        , view = view
        , update = update
        }