module Tabs exposing (..)

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


type Tab
    = First
    | Second
    | Third


type Msg
    = UserSelectedTab Tab


type alias Model =
    Tab


view : Model -> Html Msg
view selectedTab =
    layout [ width fill, height fill ] <|
        row
            [ centerX, centerY ]
            [ tabEl First selectedTab
            , tabEl Second selectedTab
            , tabEl Third selectedTab
            ]


tabEl : Tab -> Tab -> Element Msg
tabEl tab selectedTab =
    let
        isSelected =
            tab == selectedTab

        padOffset =
            if isSelected then
                0

            else
                2

        borderWidths =
            if isSelected then
                { left = 2, top = 2, right = 2, bottom = 0 }

            else
                { bottom = 2, top = 0, left = 0, right = 0 }

        corners =
            if isSelected then
                { topLeft = 6, topRight = 6, bottomLeft = 0, bottomRight = 0 }

            else
                { topLeft = 0, topRight = 0, bottomLeft = 0, bottomRight = 0 }
    in
    el
        [ Border.widthEach borderWidths
        , Border.roundEach corners
        , Border.color color.blue
        , onClick <| UserSelectedTab tab
        ]
    <|
        el
            [ centerX
            , centerY
            , paddingEach { left = 30, right = 30, top = 10 + padOffset, bottom = 10 - padOffset }
            ]
        <|
            text <|
                case tab of
                    First ->
                        "First"

                    Second ->
                        "Second"

                    Third ->
                        "Third"


update : Msg -> Model -> Model
update (UserSelectedTab t) _ =
    t


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