module Slider exposing (..)

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


type Msg
    = UserMovedSlider1 Float
    | UserMovedSlider2 Int


type alias Model =
    { value1 : Float, value2 : Int }


view : Model -> Html Msg
view model =
    layout [ width fill, height fill ] <|
        column
            [ width fill, padding 50, spacing 40 ]
            [ Input.slider
                [ width fill
                , height <| px 30
                , behindContent <|
                    -- Slider track
                    el
                        [ width fill
                        , height <| px 3
                        , centerY
                        , Background.color color.blue
                        , Border.rounded 2
                        ]
                        Element.none
                ]
                { onChange = UserMovedSlider1
                , label =
                    Input.labelAbove [] <|
                        text ("Floating point value: " ++ String.fromFloat model.value1)
                , min = 0
                , max = 100
                , step = Nothing
                , value = model.value1
                , thumb = Input.defaultThumb
                }
            , Input.slider
                [ height <| px 30
                , behindContent <|
                    -- Slider track
                    el
                        [ width fill
                        , height <| px 20
                        , centerY
                        , Background.color color.blue
                        , Border.rounded 6
                        ]
                        Element.none
                ]
                { onChange = round >> UserMovedSlider2
                , label =
                    Input.labelAbove [] <|
                        text ("Integer value: " ++ String.fromInt model.value2)
                , min = 0
                , max = 100
                , step = Just 10
                , value = toFloat model.value2
                , thumb =
                    Input.thumb
                        [ width <| px 60
                        , height <| px 24
                        , Border.width 2
                        , Border.rounded 6
                        , Border.color color.darkCharcoal
                        , Background.color color.white
                        ]
                }
            ]


init : Model
init =
    { value1 = 50, value2 = 50 }


update : Msg -> Model -> Model
update msg model =
    case msg of
        UserMovedSlider1 v ->
            { model | value1 = v }

        UserMovedSlider2 v ->
            { model | value2 = v }


main : Program () Model Msg
main =
    Browser.sandbox
        { init = init
        , 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
    }