module LoggedIn.Category.Table exposing
  ( view
  )

import Dict exposing (..)
import Date exposing (Date)
import String exposing (append)

import FontAwesome
import View.Color as Color

import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)

import Dialog
import Dialog.AddCategory.Model as AddCategory
import Dialog.AddCategory.View as AddCategory

import Tooltip

import Msg exposing (Msg)

import LoggedData exposing (LoggedData)

import LoggedIn.Msg as LoggedInMsg

import View.Date as Date
import LoggedIn.View.Format as Format

import Model.User exposing (getUserName)
import Model.Category as Category exposing (CategoryId, Category)
import Model.PaymentCategory as PaymentCategory
import Model.Translations exposing (getMessage)

view : LoggedData -> Html Msg
view loggedData =
  let categories =
        loggedData.categories
          |> Dict.toList
          |> List.sortBy (.name << Tuple.second)
  in  div
        [ class "table" ]
        [ div
            [ class "lines" ]
            ( headerLine loggedData :: List.map (paymentLine loggedData) categories)
        , if List.isEmpty (Dict.toList loggedData.categories)
            then
              div
                [ class "emptyTableMsg" ]
                [ text <| getMessage loggedData.translations "NoCategories" ]
            else
              text ""
        ]

headerLine : LoggedData -> Html Msg
headerLine loggedData =
  div
    [ class "header" ]
    [ div [ class "cell name" ] [ text <| getMessage loggedData.translations "Name" ]
    , div [ class "cell category" ] [ text <| getMessage loggedData.translations "Color" ]
    , div [ class "cell" ] []
    , div [ class "cell" ] []
    , div [ class "cell" ] []
    ]

paymentLine : LoggedData -> (CategoryId, Category) -> Html Msg
paymentLine loggedData (categoryId, category) =
  div
    [ class "row" ]
    [ div
        [ class "cell category" ]
        [ text category.name ]
    , div
        [ class "cell category" ]
        [ span
            [ class "tag"
            , style [("background-color", category.color)]
            ]
            [ text category.color ]
        ]
    , div
        [ class "cell button" ]
        [ let currentDate = Date.fromTime loggedData.currentTime
          in  AddCategory.button
                loggedData
                (AddCategory.initialClone loggedData.translations category)
                "CloneCategory"
                (FontAwesome.clone Color.chestnutRose 18)
                (Just (getMessage loggedData.translations "Clone"))
        ]
    , div
        [ class "cell button" ]
        [ AddCategory.button
            loggedData
            (AddCategory.initialEdit loggedData.translations categoryId category)
            "EditCategory"
            (FontAwesome.pencil Color.chestnutRose 18)
            (Just (getMessage loggedData.translations "Edit"))
        ]
    , div
        [ class "cell button" ]
        [ if PaymentCategory.isCategoryUnused categoryId loggedData.paymentCategories
            then
              let dialogConfig =
                    { className = "deleteCategoryDialog"
                    , title = getMessage loggedData.translations "ConfirmCategoryDelete"
                    , body = always <| text ""
                    , confirm = getMessage loggedData.translations "Confirm"
                    , confirmMsg = always <| Msg.Dialog <| Dialog.UpdateAndClose <| Msg.DeleteCategory categoryId
                    , undo = getMessage loggedData.translations "Undo"
                    }
              in  button
                    (  Tooltip.show Msg.Tooltip (getMessage loggedData.translations "Delete")
                    ++ [ onClick (Msg.Dialog <| Dialog.Open dialogConfig) ]
                    )
                    [ FontAwesome.trash Color.chestnutRose 18 ]
          else
            span
              ( Tooltip.show Msg.Tooltip (getMessage loggedData.translations "UsedCategory") )
              [ FontAwesome.trash Color.silver 18 ]
        ]
    ]