module UserEntry

open System
open Feliz
open Fable.DateFunctions
open Fetch
open Thoth.Json

open Zanaptak.TypedCssClasses

// Configure type provider to use generated Tailwind classes.
// Naming.Verbatim is required for PurgeCSS bundle reduction, see https://tailwindcss.com/docs/optimizing-for-production
type tw =
    CssClasses<
        source = "./content/tailwind-source.css"
        , naming = Naming.Verbatim
        , commandFile = "node"
        , argumentPrefix = "./tailwind-process.js ./tailwind.config.js"
        , resolutionFolder = "."
        //, logFile = "TypedCssClasses.log" // uncomment to enable logging
    >

type State =
    | LoadingScore
    | ErrorFetchingScore
    | LoadedScore of string
    | NoScore

type Score = { Name: string; Time: string }

type ScoreApiResponse = Score list

let GetUserScore (scores: Score list) (username: string) =
    scores
    |> List.tryFind (fun u -> u.Name = username)
    |> function
        | Some (x) -> LoadedScore(x.Time)
        | None -> NoScore

[<ReactComponent>]
let UserEntry (username: string, currentDate: DateTime) =

    let (score, setScore) = React.useState (LoadingScore)

    React.useEffect
        (fun () ->
            printfn $"Current Date == {currentDate}"

            fetch $"""https://acicchetti.dev/crossword/v1/{currentDate.Format "yyyy-MM-dd"}""" []
            |> Promise.bind (fun res -> res.text ())
            |> Promise.map
                (fun txt ->
                    let decoded =
                        Decode.Auto.fromString<ScoreApiResponse> (txt, caseStrategy = CamelCase)

                    match decoded with
                    | Ok (apiResponse) ->
                        printfn $"""got {apiResponse}"""
                        let score = GetUserScore apiResponse username
                        setScore (score)
                    | Error (_) -> setScore (ErrorFetchingScore))
            |> ignore),
    [| box currentDate |]

    Html.div [ prop.classes [tw.``mx-auto``]
               prop.children [ Html.div [ prop.text
                                              $"""{username} - {match score with
                                                                | LoadingScore -> "Loading"
                                                                | ErrorFetchingScore -> "Error Fetching Score"
                                                                | LoadedScore s -> s
                                                                | NoScore -> "No Score"}""" ] ] ]