module View.Payments.Add
  ( addPayment
  ) where

import Html as H exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import Reads exposing (readInt)
import Result exposing (..)

import ServerCommunication as SC exposing (serverCommunications)

import Update exposing (..)
import Update.LoggedView exposing (..)
import Update.LoggedView.Add exposing (..)

import Model exposing (Model)
import Model.View.Payment.Add exposing (..)
import Model.Translations exposing (getMessage)
import Model.View.LoggedView exposing (LoggedView)

import View.Events exposing (onSubmitPrevDefault)
import View.Icon exposing (renderIcon)

import Utils.Maybe exposing (isJust)
import Utils.Either exposing (toMaybeError)

addPayment : Model -> LoggedView -> Html
addPayment model loggedView =
  H.form
    [ class "add"
    , case (validateName loggedView.add.name model.translations, validateCost loggedView.add.cost model.translations) of
        (Ok name, Ok cost) ->
          let action =
                case loggedView.add.frequency of
                  Punctual -> SC.AddPayment loggedView.me name cost
                  Monthly -> SC.AddMonthlyPayment name cost
          in onSubmitPrevDefault serverCommunications.address action
        (resName, resCost) ->
          onSubmitPrevDefault actions.address (UpdateLoggedView <| UpdateAdd <| AddError (toMaybeError resName) (toMaybeError resCost))
    ]
    [ addPaymentName loggedView.add
    , addPaymentCost model loggedView.add
    , paymentFrequency model loggedView.add
    , button
        [ type' "submit" ]
        [ text (getMessage "Add" model.translations)]
    ]

addPaymentName : AddPayment -> Html
addPaymentName addPayment =
  div
    [ class ("name " ++ (if isJust addPayment.nameError then "error" else "")) ]
    [ input
        [ id "nameInput"
        , value addPayment.name
        , on "input" targetValue (Signal.message actions.address << UpdateLoggedView << UpdateAdd << UpdateName)
        , maxlength 20
        ]
        []
    , label
        [ for "nameInput" ]
        [ renderIcon "shopping-cart" ]
    , case addPayment.nameError of
        Just error ->
          div [ class "errorMessage" ] [ text error ]
        Nothing ->
          text ""
    ]

addPaymentCost : Model -> AddPayment -> Html
addPaymentCost model addPayment =
  div
    [ class ("cost " ++ (if isJust addPayment.costError then "error" else "")) ]
    [ input
        [ id "costInput"
        , value addPayment.cost
        , on "input" targetValue (Signal.message actions.address << UpdateLoggedView << UpdateAdd << UpdateCost)
        , maxlength 7
        ]
        []
    , label
        [ for "costInput" ]
        [ text (getMessage "MoneySymbol" model.translations) ]
    , case addPayment.costError of
        Just error ->
          div [ class "errorMessage" ] [ text error ]
        Nothing ->
          text ""
    ]

paymentFrequency : Model -> AddPayment -> Html
paymentFrequency model addPayment =
  div
    [ class "frequency"
    , onClick actions.address (UpdateLoggedView << UpdateAdd <| ToggleFrequency)
    ]
    [ div
        [ class ("punctual" ++ if addPayment.frequency == Punctual then " selected" else "") ]
        [ text (getMessage "Punctual" model.translations) ]
    , div
        [ class ("monthly" ++ if addPayment.frequency == Monthly then " selected" else "") ]
        [ text (getMessage "Monthly" model.translations) ]
    ]