module Table exposing (..)

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


colorTable : Element msg
colorTable =
    let
        headerAttrs =
            [ Font.bold
            , Font.color color.blue
            , Border.widthEach { bottom = 1, top = 0, left = 0, right = 0 }
            , Border.color color.lightGrey
            ]
    in
    table [ width shrink, spacing 10 ]
        { data = colorData
        , columns =
            [ { header = el headerAttrs <| text "Color name"
              , width = fillPortion 2
              , view = .name >> text >> el [ centerY ]
              }
            , { header = el headerAttrs <| text "Color sample"
              , 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 ] 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 =
    { 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
    }