module Checkbox 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 =
    Bool


type Msg
    = UserToggledCheckbox Bool


view : Model -> Html Msg
view model =
    layout [ padding 50 ] <|
        column [ spacing 50 ]
            [ Input.checkbox [ Font.size 20 ]
                { onChange = UserToggledCheckbox
                , icon = Input.defaultCheckbox
                , checked = model
                , label = Input.labelRight [] <| text "Default checkbox"
                }
            , Input.checkbox [ Font.size 48 ]
                { onChange = UserToggledCheckbox
                , icon = checkboxIcon
                , checked = model
                , label = Input.labelRight [] <| text "Yes or no?"
                }
            , Input.checkbox [ width shrink, Font.size 20 ]
                { onChange = UserToggledCheckbox
                , icon = labelledCheckboxIcon
                , checked = model
                , label =
                    Input.labelHidden <|
                        if model then
                            "On"

                        else
                            "Off"
                }
            ]


checkboxIcon : Bool -> Element msg
checkboxIcon isChecked =
    el
        [ width <| px 40
        , height <| px 40
        , centerY
        , padding 4
        , Border.rounded 6
        , Border.width 2
        , Border.color color.blue
        ]
    <|
        el
            [ width fill
            , height fill
            , Border.rounded 4
            , Background.color <|
                if isChecked then
                    color.lightBlue

                else
                    color.white
            ]
            none


labelledCheckboxIcon : Bool -> Element msg
labelledCheckboxIcon isChecked =
    let
        knob =
            el
                [ width <| px 36
                , height <| px 36
                , Border.rounded 18
                , Border.width 2
                , Border.color color.blue
                , Background.color color.white
                ]
                none
    in
    el
        [ width <| px 100
        , height <| px 48
        , centerY
        , padding 4
        , Border.rounded 6
        , Border.width 2
        , Border.color color.blue
        , Background.color <|
            if isChecked then
                color.lightBlue

            else
                color.white
        ]
    <|
        row [ width fill ] <|
            if isChecked then
                [ el [ centerX ] <| text "On", knob ]

            else
                [ knob, el [ centerX ] <| text "Off" ]


update : Msg -> Model -> Model
update _ model =
    not model


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