module RadioButtonGroup 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 ButtonPosition
    = First
    | Mid
    | Last


type Msg
    = UserChoseDirection Direction


view : Model -> Html Msg
view model =
    layout [ padding 50 ] <|
        Input.radioRow
            [ Border.rounded 6
            , Border.shadow
                { offset = ( 0, 0 ), size = 3, blur = 10, color = color.lightGrey }
            ]
            { onChange = UserChoseDirection
            , selected = Just model
            , label =
                Input.labelAbove
                    [ paddingEach { bottom = 20, top = 0, left = 0, right = 0 } ]
                <|
                    text "Choose best direction"
            , options =
                [ Input.optionWith Down <| button First "👇"
                , Input.optionWith Up <| button Mid "👆"
                , Input.optionWith Left <| button Mid "👈"
                , Input.optionWith Right <| button Last "👉"
                ]
            }


button position label state =
    let
        borders =
            case position of
                First ->
                    { left = 2, right = 2, top = 2, bottom = 2 }

                Mid ->
                    { left = 0, right = 2, top = 2, bottom = 2 }

                Last ->
                    { left = 0, right = 2, top = 2, bottom = 2 }

        corners =
            case position of
                First ->
                    { topLeft = 6, bottomLeft = 6, topRight = 0, bottomRight = 0 }

                Mid ->
                    { topLeft = 0, bottomLeft = 0, topRight = 0, bottomRight = 0 }

                Last ->
                    { topLeft = 0, bottomLeft = 0, topRight = 6, bottomRight = 6 }
    in
    el
        [ paddingEach { left = 20, right = 20, top = 10, bottom = 10 }
        , Border.roundEach corners
        , Border.widthEach borders
        , Border.color color.blue
        , Background.color <|
            if state == Input.Selected then
                color.lightBlue

            else
                color.white
        ]
    <|
        el [ centerX, centerY ] <|
            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
    }