module RadioSelection exposing (..)

import Browser
import Element exposing (..)
import Element.Background as Background
import Element.Border as Border
import Element.Font as Font
import Element.Input as Input
import Html exposing (Html)


type alias Model =
    Direction


type Direction
    = Up
    | Down
    | Left
    | Right


type Msg
    = UserChoseDirection Direction


view : Model -> Html Msg
view model =
    layout [ padding 50 ] <|
        column [ spacing 50 ]
            [ Input.radio
                [ padding 10
                , spacing 20
                ]
                { onChange = UserChoseDirection
                , selected = Just model
                , label = Input.labelAbove [] <| text "Radio selection"
                , options =
                    [ Input.option Down <| text "👇"
                    , Input.option Up <| text "👆"
                    , Input.option Left <| text "👈🏾"
                    , Input.option Right <| text "👉🏾"
                    ]
                }
            , Input.radioRow
                [ padding 10
                , spacing 20
                ]
                { onChange = UserChoseDirection
                , selected = Just model
                , label = Input.labelAbove [] <| text "Radio selection in a row"
                , options =
                    [ Input.option Down <| text "👇"
                    , Input.option Up <| text "👆"
                    , Input.option Left <| text "👈🏾"
                    , Input.option Right <| text "👉🏾"
                    ]
                }
            , Input.radioRow
                [ padding 10
                , spacing 30
                ]
                { onChange = UserChoseDirection
                , selected = Just model
                , label = Input.labelAbove [] <| text "Radio selection with a custom look"
                , options =
                    [ Input.optionWith Down <| radioOption "👇"
                    , Input.optionWith Up <| radioOption "👆"
                    , Input.optionWith Left <| radioOption "👈🏾"
                    , Input.optionWith Right <| radioOption "👉🏾"
                    ]
                }
            ]


radioOption : String -> Input.OptionState -> Element msg
radioOption label state =
    row [ spacing 10 ]
        [ el
            [ width <| px 30
            , height <| px 30
            , centerY
            , padding 4
            , Border.rounded 6
            , Border.width 2
            , Border.color color.blue
            ]
          <|
            el
                [ width fill
                , height fill
                , Border.rounded 4
                , Background.color <|
                    case state of
                        Input.Idle ->
                            color.white

                        Input.Focused ->
                            color.lightGrey

                        Input.Selected ->
                            color.lightBlue
                ]
                none
        , text label
        ]


update : Msg -> Model -> Model
update (UserChoseDirection d) _ =
    d


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


color =
    { blue = rgb255 0x72 0x9F 0xCF
    , darkCharcoal = rgb255 0x2E 0x34 0x36
    , lightBlue = rgb255 0xC5 0xE8 0xF7
    , lightGrey = rgb255 0xE0 0xE0 0xE0
    , white = rgb255 0xFF 0xFF 0xFF
    }