module FixedHeadersTable exposing (..)

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


colorTable : Element msg
colorTable =
    let
        headerAttrs =
            [ Font.bold
            , Font.color color.blue
            , Border.widthEach { bottom = 2, top = 0, left = 0, right = 0 }
            , Border.color color.blue
            ]
    in
    column
        [ width <| maximum 500 fill
        , height <| px 300
        , spacing 10
        , padding 5
        , Border.width 2
        , Border.rounded 6
        , Border.color color.blue
        ]
        [ row [ width fill ]
            [ el ((width <| fillPortion 2) :: headerAttrs) <| text "Color"
            , el ((width <| fillPortion 1) :: headerAttrs) <| text "Sample"
            ]

        -- workaround for a bug: it's necessary to wrap `table` in an `el`
        -- to get table height attribute to apply
        , el [ width fill ] <|
            table
                [ width fill
                , height <| px 250
                , scrollbarY
                , spacing 10
                ]
                { data = colorData
                , columns =
                    [ { header = none
                      , width = fillPortion 2
                      , view = .name >> text >> el [ centerY ]
                      }
                    , { header = none
                      , width = fillPortion 1
                      , view =
                            \rec ->
                                el
                                    [ width fill
                                    , height <| px 40
                                    , Background.color rec.color
                                    ]
                                    none
                      }
                    ]
                }
        ]


main : Html msg
main =
    layout [ width fill, height fill, padding 50 ] <|
        column [ width fill, spacing 10 ]
            [ text "Scroll to see more rows:"
            , colorTable
            ]


colorData : List { color : Color, name : String }
colorData =
    [ { color = color.darkCharcoal, name = "Black" }
    , { color = color.blue, name = "Blue" }
    , { color = color.green, name = "Green" }
    , { color = color.orange, name = "Orange" }
    , { color = color.red, name = "Red" }
    , { color = color.darkCharcoal, name = "Black" }
    , { color = color.blue, name = "Blue" }
    , { color = color.green, name = "Green" }
    , { color = color.orange, name = "Orange" }
    , { color = color.red, name = "Red" }
    , { color = color.darkCharcoal, name = "Black" }
    , { color = color.blue, name = "Blue" }
    , { color = color.green, name = "Green" }
    , { color = color.orange, name = "Orange" }
    , { color = color.red, name = "Red" }
    ]


color =
    { blue = rgb255 0x72 0x9F 0xCF
    , darkCharcoal = rgb255 0x2E 0x34 0x36
    , green = rgb255 0x20 0xBF 0x55
    , lightBlue = rgb255 0xC5 0xE8 0xF7
    , lightGrey = rgb255 0xE0 0xE0 0xE0
    , orange = rgb255 0xF2 0x64 0x19
    , red = rgb255 0xAA 0x00 0x00
    , white = rgb255 0xFF 0xFF 0xFF
    }