namespace TJLaskuri.Core.Views

open System
open Falco.Markup
open Elem
open Attr
open Text

module Document =
    let view documentBody =
        html [ lang "fi" ] [
            head [] [ 
                meta [ charset "utf-8" ]
                meta [ name "viewport"; content "width=device-width" ]
                Elem.title [] [ raw "Aamukampa" ]
                script [ type' "module"; src "/js/app.js" ] [] 
                link [ rel "stylesheet"; href "/styles.css" ]
                ]
            body [] [
                documentBody
            ]
        ]

module Main =
    type Model = {
        TimeLeft : TimeSpan
        TimeCompleted : TimeSpan
    }

    let view model =
        main [] [
            div [ class' "counter" ] [
                Elem.span [ class' "counter_title" ] [
                    raw "Tänään jäljellä"
                ]
                Elem.span [ class' "counter_value" ] [
                    enc (string <| Math.Ceiling model.TimeLeft.TotalDays)
                ]
                Elem.span [ class' "counter_mornings" ] [
                    raw " aamua"
                ]
            ]

            div [ class' "progress-bar" ] [
                let p = 100.0 * (1.0 - model.TimeLeft / (model.TimeLeft + model.TimeCompleted))
                let cssWidth = sprintf "%s%%" (p.ToString("F2"))

                div [
                    class' "progress-bar_value"
                    style <|
                        sprintf "background-color: green; width: %s"
                            cssWidth
                ] [
                    span <| sprintf "%s %%" (p.ToString("F2"))
                ]
            ]

            Elem.p [
                style "text-align: center; font-size: 1.5rem;"
            ] [
                enc "2/25 347"
            ]

            // div [] [
            //     Elem.label [ for' "kontingent-select" ] [ raw "Saapumiserä:" ]
            //     select [ id "kontingent-select" ] [
            //         option [ value "1/25" ] [ enc "1/25" ]
            //         option [ value "2/25" ] [ enc "2/25" ]
            //         option [ value "1/26" ] [ enc "1/26" ]
            //         option [ value "2/26" ] [ enc "2/26" ]
            //     ]
            // ]

            // div [] [
            //     Elem.p [] [
            //         span "Tunteina"
            //         enc (string model.TimeLeft.TotalHours)
            //     ]
            //     Elem.p [] [
            //         span "Sekunteina"
            //         enc (string model.TimeLeft.TotalSeconds)
            //     ]
            //     Elem.p [] [
            //         span "Aamuja ohi "
            //         enc (string <| Math.Floor model.TimeCompleted.TotalDays)
            //     ]
            // ]
        ]