module View.Page
  ( page
  ) where

import List

import Graphics.Collage (..)
import Graphics.Element (Element)
import Color (..)
import Text (..)
import Text
import Html (..)
import Html.Attributes (..)
import Html.Attributes as A
import Json.Encode (string)

import Model.Vec2 (Vec2)
import Model.Player (..)
import Model.Game (Game)
import Model.Point (..)
import Model.Board (boardSize)
import Model.Config (..)

page : Game -> Html
page game =
  div
    []
    [ h1 [] [ text "cAtchVoid" ]
    , div
        [ id "game" ]
        [ fromElement << displayGame <| game ]
    , p
        []
        [ text "Catch the points of your color, avoid the other points." ]
    , p
        []
        [ text "Use the arrow keys to move and 'e' to change your color." ]
    , a
        [ href "https://github.com/guyonvarch/catchvoid" ]
        [ img
            [ A.style
                [ ("position", "absolute")
                , ("top", "0")
                , ("right", "0")
                , ("border", "0")
                ]
            , src "https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67"
            , alt "Fork me on GitHub"
            , property "data-canonical-src" (string "https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png")
            ]
            []
        ]
    ]

displayGame : Game -> Element
displayGame {time, score, player, cloud, bestScore} =
  let whitePointForms = List.map (pointForm time (configColor White)) (cloud.points White)
      blackPointForms = List.map (pointForm time (configColor Black)) (cloud.points Black)
      forms = boardForms
              ++ playerForms player
              ++ whitePointForms
              ++ blackPointForms
              ++ scoreForms score
              ++ bestScoreForms bestScore
  in  collage (truncate boardSize.x) (truncate boardSize.y) forms

boardForms : List Form
boardForms = [filled boardColor (rect boardSize.x boardSize.y)]

boardColor : Color
boardColor = rgb 103 123 244

playerForms : Player -> List Form
playerForms player =
  let playerColor = configColor player.config
  in  [circleForm player.pos playerSize playerColor]

playerColor : Color
playerColor = rgb 224 224 224

pointForm : Float -> Color -> Point -> Form
pointForm time color point =
  let pos = pointMove point time
  in  circleForm pos pointSize color

configColor : Config -> Color
configColor config =
  case config of
    White -> rgb 240 240 240
    Black -> rgb 14 17 33

circleForm : Vec2 -> Float -> Color -> Form
circleForm pos size color =
  let outline = circle size
        |> filled outlineColor
      inside = circle (size - 1)
        |> filled color
  in  group [outline, inside]
        |> move (pos.x, pos.y)

outlineColor : Color
outlineColor = rgb 34 34 34

scoreForms : Int -> List Form
scoreForms score =
  let text = (toString score)
      scorePos = { x = 0.0, y = boardSize.y / 2 - 30 }
  in  [textForm text scorePos centered]

bestScoreForms : Int -> List Form
bestScoreForms bestScore =
  if(bestScore > 0) then
    let text = "Record: " ++ (toString bestScore)
        pos =
          { x = -boardSize.x / 2 + 100
          , y = -boardSize.y / 2 + 30
          }
    in  [textForm text pos leftAligned]
  else []

textForm : String -> Vec2 -> (Text -> Element) -> Form
textForm content pos alignment =
  let textElement = fromString content
        |> Text.height 30
        |> typeface ["calibri", "arial"]
        |> Text.color textColor
        |> bold
        |> alignment
  in  textElement
        |> toForm
        |> move (pos.x, pos.y)

textColor : Color
textColor = rgb 14 17 33