module Pagination exposing (..)

import Element exposing (..)
import Element.Background as Background
import Element.Border as Border
import Element.Font as Font
import Html exposing (Html)


type ButtonPosition
    = First
    | Mid
    | Last


button position label =
    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
        ]
    <|
        el [ centerX, centerY ] <|
            text label


main : Html msg
main =
    layout [ width <| minimum 600 fill, height fill ] <|
        row
            [ centerX
            , centerY
            , Border.rounded 6
            , Border.shadow { offset = ( 0, 0 ), size = 3, blur = 10, color = color.lightGrey }
            ]
            [ button First "⬅️ Prev"
            , button Mid "1"
            , button Mid "2"
            , button Mid "3"
            , button Mid "4"
            , button Mid "5"
            , button Last "Next ➡️"
            ]


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
    }