module Screen.Leaderboard exposing (..)

{-| Widget module for a leaderboard page.
-}

import Api.Elo exposing (EloStat, Leaderboard)
import Element exposing (Element)
import Element.Font
import Layout
import Pixels exposing (Pixels)
import Program exposing (ViewBox)
import Quantity exposing (Quantity)
import Theme
import Element.Background
import Element.Border
import Color


view : ViewBox Leaderboard -> Element msg
view data =
    let
        boardWidth =
            data.size.width
                |> Quantity.toFloatQuantity
                |> Quantity.multiplyBy (2/3)
                |> Quantity.floor
                |> Quantity.clamp (Pixels.pixels 600) (Pixels.pixels 1800)
                |> Pixels.inPixels
                |> Element.px
                |> Element.width
    in
    data.model.players
        |> List.map (viewEloStat { flavor = data.flavor })
        |> Element.column [ Element.centerX, boardWidth ]
        |> List.singleton
        |> (::) (
                Element.text data.model.name
                    |> Element.el
                        [ Element.centerX, Element.Font.size 50 ]
            )
        |> Element.column
            [ Element.padding 15
            , Element.spacing 30
            , Element.width <| Element.px <| Pixels.inPixels data.size.width 
            ]


viewEloStat : { flavor : Theme.Flavor } -> EloStat -> Element msg
viewEloStat data stat =
    Element.row
        [ Element.Background.color (Theme.mantleUI data.flavor)
        , Element.Border.rounded 5
        , Element.padding 10
        , Element.spacing 5
        , Element.width Element.fill
        ]
        [ Element.column
            [ Element.centerY, Element.spacing 5, Element.width Element.fill ]
            [ Element.text stat.name
                |> Element.el [ Element.Font.size 30 ]
            , Element.el
                [ Element.Font.color (Theme.subtext0UI data.flavor)
                , Element.Font.size 15
                ]
                (Element.text stat.url)
            ]

        -- Bar to push the rest to the right
        , Element.column [ Element.width Element.fill ] []
        , field { text = "ELO", value = stat.elo, color = Theme.lavenderUI data.flavor }
            |> Element.el [ Element.paddingEach { top = 0, bottom = 0, left = 0, right = 15 } ]
        , field { text = "WINS", value = stat.wins, color = Theme.greenUI data.flavor }
        , field { text = "DRAWS", value = stat.draws, color = Theme.subtext0UI data.flavor }
        , field { text = "LOSSES", value = stat.losses, color = Theme.redUI data.flavor }
        ]

field : { text : String, value : Int, color : Element.Color } -> Element msg
field { text, value, color } =
    Element.column
        [ Element.Font.color color
        , Element.spacing 3
        , Element.width (Element.px 70)
        ]
        [ String.fromInt value
            |> Element.text
            |> Element.el [ Element.centerX, Element.Font.size 25 ]
        , text
            |> Element.text
            |> Element.el [ Element.centerX, Element.Font.size 15 ]
        ]