module View.Game
  ( renderGame
  ) where

import Html exposing (Html)
import Svg exposing (..)
import Svg.Attributes exposing (..)
import List

import Time exposing (Time)

import Model.Vec2 exposing (Vec2)
import Model.Player exposing (..)
import Model.Game exposing (Game)
import Model.Point exposing (..)
import Model.Config exposing (..)
import Model.Round exposing (..)
import Model.Level exposing (..)
import Model.Color exposing (htmlOutput)

import View.Round exposing (roundView)

renderGame : Game -> Html
renderGame game =
  let renderPoints config = List.map (renderPoint game.boardSize game.time config) (game.cloud.points config)
  in  svg
        [ width "100%"
        , height "100%"
        , Svg.Attributes.style ("background-color: " ++ backgroundColor ++ ";")
        , viewBox ("0 0 " ++ (toString game.boardSize.x) ++ " " ++ (toString (game.boardSize.y + headerHeight)))
        ]
        [ renderBoard game.currentScore
        , renderPlayer game.boardSize game.player
        , g [] (renderPoints White)
        , g [] (renderPoints Black)
        , renderScore game.boardSize game.time game.rounds game.currentScore
        , hideNewPoints game.boardSize
        , renderHeader game
        ]

headerHeight : Float
headerHeight = 115

renderHeader : Game -> Svg
renderHeader game =
  g
    []
    [ rect
        [ width "100%"
        , height (toString headerHeight)
        , fill "#1B203F"
        ]
        []
    , text'
        [ x "10"
        , y "45"
        , fontSize "36"
        , fill "white"
        , fontWeight "bold"
        ]
        [ text "cAtchVoid" ]
    , text'
        [ fill "white"
        , fontSize "12"
        , fontStyle "italic"
        ]
        [ tspan
            [ x (toString (game.boardSize.x / 2))
            , y "75"
            , textAnchor "middle"
            ]
            [ text "Catch the points of your color, avoid the other points." ]
        , tspan
            [ x (toString (game.boardSize.x / 2))
            , y "92"
            , textAnchor "middle"
            ]
            [ text "Use the arrow keys to move and 'e' to change your color." ]
        ]
    , ( case maybeBestRound game.rounds of
          Nothing ->
            text ""
          Just bestRound ->
            text'
              [ fill "yellow"
              , x "355"
              , y "38"
              , fontSize "13"
              ]
              [ tspan
                  [ textAnchor "middle" ]
                  [ text ("Top: " ++ roundView bestRound) ]
              ]
      )
    ]

backgroundColor : String
backgroundColor = "#1B203F"

renderBoard : Int -> Svg
renderBoard currentScore =
  rect
    [ y (toString headerHeight)
    , width "100%"
    , height "100%"
    , fill (htmlOutput (progressiveColor currentScore))
    ]
    []

renderPlayer : Vec2 -> Player -> Svg
renderPlayer boardSize player =
  renderCircle boardSize player.pos playerSize (playerColor player.config)

playerColor : Config -> String
playerColor config =
  case config of
    White -> "#F0F0F0"
    Black -> "#0E1121"

renderPoint : Vec2 -> Float -> Config -> Point -> Svg
renderPoint boardSize time config point =
  let pos = pointMove point time
  in  renderCircle boardSize pos pointSize (playerColor config)

pointColor : Config -> String
pointColor config =
  case config of
    White -> "white"
    Black -> "black"

renderCircle : Vec2 -> Vec2 -> Float -> String -> Svg
renderCircle boardSize pos size color =
  circle
    [ cx (toString (pos.x + boardSize.x / 2))
    , cy (toString (-1 * pos.y + boardSize.y / 2 + headerHeight))
    , r (toString size)
    , fill color
    ]
    []

renderScore : Vec2 -> Time -> List Round -> Int -> Svg
renderScore boardSize currentRoundTime rounds score =
  let scorePos =
        { x = 0.0
        , y = boardSize.y / 2 - 35
        }
  in  if currentRoundTime < 5000
        then
          case List.head rounds of
            Just round ->
              renderText boardSize scorePos (roundView round)
            Nothing ->
              renderText boardSize scorePos (toString score)
        else
          renderText boardSize scorePos (toString score)

renderText : Vec2 -> Vec2 -> String -> Svg
renderText boardSize pos content =
  text'
    [ x (toString (pos.x + boardSize.x / 2))
    , y (toString (-1 * pos.y + boardSize.y / 2 + headerHeight))
    , fontFamily "calibri"
    , fontSize "24"
    , color "#0E1121"
    , fontWeight "bold"
    ]
    [ tspan
        [ textAnchor "middle" ]
        [ text content ]
    ]

hideNewPoints : Vec2 -> Svg
hideNewPoints boardSize =
  let size =
        (pointAwayDist boardSize) + pointSize - (Basics.max boardSize.x boardSize.y) / 2
          |> toString
  in  g
        []
        [ rect
            [ x ("-" ++ size)
            , width size
            , height "100%"
            , fill backgroundColor
            ]
            []
        , rect
            [ x (toString boardSize.x)
            , width size
            , height "100%"
            , fill backgroundColor
            ]
            []
        , rect
            [ y ("-" ++ size)
            , width "100%"
            , height size
            , fill backgroundColor
            ]
            []
        , rect
            [ y (toString (boardSize.y + headerHeight))
            , width "100%"
            , height size
            , fill backgroundColor
            ]
            []
        ]