module Transparency 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 Msg
    = UserPressedButton


view : () -> Html Msg
view _ =
    layout [ width fill, height fill ] <|
        column
            [ width <| maximum 600 fill
            , centerX
            , centerY
            , padding 20
            , spacing 80
            ]
            [ column [ width fill ]
                [ el [ width fill, height <| px 30, Background.color color.blue ] <|
                    text "1st element (next is transparent 👇)"
                , el [ transparent True, width fill, height <| px 30, Background.color color.blue ] <|
                    text "2nd element"
                , el [ width fill, height <| px 30, Background.color color.blue ] <|
                    text "3rd element"
                ]
            , column [ width fill ]
                [ el [ width fill, height <| px 30, Background.color color.blue ] <|
                    text "1st element"
                , el [ alpha 0.5, width fill, height <| px 30, Background.color color.blue ] <|
                    text "2nd element - alpha 0.5"
                , el [ width fill, height <| px 30, Background.color color.blue ] <|
                    text "3rd element"
                ]
            , column [ width fill ] <|
                [ text "Transparent button (still receives input due to a bug):"
                , el [ width fill, Border.width 2 ] <|
                    Input.button
                        [ transparent True
                        , padding 20
                        , Border.width 2
                        , Border.color color.darkCharcoal
                        ]
                        { onPress = Just UserPressedButton
                        , label = text "Button"
                        }
                ]
            ]


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


update : Msg -> () -> ()
update msg model =
    case msg of
        UserPressedButton ->
            Debug.log "Button pressed" ()


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
    }