open Elmish.HMR

module Main

Fable.Core.JsInterop.importSideEffects "./styles.css"

open Elmish

open Lit
open Lit.Elmish
open Elmish.HMR

type State = { counter: int; name: string }

type Msg =
    | Increment
    | Decrement
    | Reset

let private init _ = { counter = 0; name = "World" }

let private update msg state =
    match msg with
    | Increment ->
        { state with
              counter = state.counter + 1 }
    | Decrement ->
        { state with
              counter = state.counter - 1 }
    | Reset -> init state


let private counter
    (props: {| counter: int
               decrement: unit -> unit
               reset: unit -> unit
               increment: unit -> unit |})
    =
    html
        $"""
        <button @click={fun _ -> props.decrement ()}>-</button>
        <button @click={fun _ -> props.reset ()}>Reset</button>
        <button @click={fun _ -> props.increment ()}>+</button>
        <div>{props.counter}</div>
        """

let view state dispatch =
    let counterEl =
        counter
            {| counter = state.counter
               decrement = fun _ -> dispatch Decrement
               increment = fun _ -> dispatch Increment
               reset = fun _ -> dispatch Reset |}

    html
        $"""
        <div>Hello {state.name}!</div>
        {counterEl}
        """


Program.mkSimple init update view
|> Program.withLit "elmish-lit"
|> Program.run

let private colorCircle =
    FunctionComponent.Of(fun (props : {| Rank : int
                                         Color : Color.Marker.ColorReferences
                                         OnPick : int -> unit |}) ->
        Button.button [ Button.OnClick(fun _ -> props.OnPick props.Rank) ]
            [ str props.Color.Name ]
    , "ColorSelector"
    , equalsButFunctions
    )

prop.classes [if state.Filter = Completed then "is-active"]

prop.classes [(match state.Filter with | Completed -> "is-active" | _ -> "")]

let filterTabs (state: State) (dispatch: Msg -> unit) =
    div ["tabs"; "is-toggle"; "is-fullwidth"] [
        Html.ul [
            Html.li [
                prop.classes [(match state.Filter with | All -> "is-active" | _ -> "")]
                // prop.classes [if highlight = "All" then "is-active"]
                prop.onClick (fun _ -> dispatch ShowAll)
                prop.children [
                    Html.a [
                        prop.text "All"
                    ]
                ]
            ]
            Html.li [
                prop.classes [(match state.Filter with | Completed -> "is-active" | _ -> "")]
                // prop.classes [if state.Filter = Completed then "is-active"]
                prop.onClick (fun _ -> dispatch ShowCompleted)
                prop.children [
                    Html.a [
                        prop.text "Completed"
                    ]
                ]
            ]
            Html.li [
                prop.classes [(match state.Filter with | NotCompleted -> "is-active" | _ -> "")]
                // prop.classes [if state.Filter = NotCompleted then "is-active"]
                prop.onClick (fun _ -> dispatch ShowNotCompleted)
                prop.children [
                    Html.a [
                        prop.text "Not Completed!"
                    ]
                ]
            ]
        ]
    ]

module App

open Elmish
open Elmish.React
open Feliz
open System
open Elmish.HMR

type Todo = {
    Id: Guid 
    Description: string
    Completed: bool
}

type TodoBeingEdited = {
    Id: Guid 
    Description: string
}

type Filter =
    | All
    | Completed
    | NotCompleted

type State = {
    TodoList: Todo list
    NewTodo: string
    TodoBeingEdited: TodoBeingEdited option
    Filter: Filter
}

type Msg = 
    | SetNewTodo of string
    | AddNewTodo
    | ToggleCompleted of Guid 
    | DeleteTodo of Guid
    | StartEditingTodo of Guid 
    | SetEditedDescription of string
    | CancelEdit
    | ApplyEdit
    | ShowAll
    | ShowCompleted
    | ShowNotCompleted


let init(): State = {
    TodoList = [ 
        { Id = Guid.NewGuid(); Description = "Learn F#"; Completed = true } 
        { Id = Guid.NewGuid(); Description = "Learn Elmish"; Completed = false } 
    ]
    NewTodo = ""
    TodoBeingEdited = None
    Filter = All
}

let update msg state = 
    match msg with
    | SetNewTodo todoText -> { state with NewTodo = todoText }
    | AddNewTodo when state.NewTodo = "" -> state
    | AddNewTodo ->
        {
            state with
                NewTodo = ""
                TodoList = List.append state.TodoList [
                    { 
                        Id = Guid.NewGuid()
                        Description = state.NewTodo
                        Completed = false
                    }
                ]
        }
    | DeleteTodo todoId -> 
        {
            state with TodoList = 
                        state.TodoList
                        |> List.filter (fun todo -> todo.Id <> todoId) 
        }
    | ToggleCompleted todoId ->
        {
            state with TodoList = 
                        state.TodoList
                        |> List.map (fun todo ->
                                if todo.Id = todoId 
                                then { todo with Completed = not todo.Completed } 
                                else todo
                            )
        }
    | StartEditingTodo todoId -> 
        {
            state with TodoBeingEdited = 
                        state.TodoList
                        |> List.tryFind (fun todo -> todo.Id = todoId)
                        |> Option.map (fun todoBeingEdited -> { Id = todoId; Description = todoBeingEdited.Description })
        }
    | SetEditedDescription newText ->
        {
            state with TodoBeingEdited =
                        state.TodoBeingEdited 
                        |> Option.map (fun todoBeingEdited -> { todoBeingEdited with Description = newText })
        }
    | ApplyEdit ->
        { 
            state with 
                TodoBeingEdited = None;
                TodoList = 
                        match state.TodoBeingEdited with 
                        | None -> state.TodoList 
                        | Some todoBeingEdited when todoBeingEdited.Description = "" -> state.TodoList
                        | Some todoBeingEdited -> 
                                    state.TodoList
                                    |> List.map (fun todo -> if todo.Id = todoBeingEdited.Id 
                                                                    then { todo with Description = todoBeingEdited.Description} 
                                                                    else todo ) 
        }
    | CancelEdit -> { state with TodoBeingEdited = None}
    | ShowAll -> { state with Filter = All }
    | ShowCompleted -> { state with Filter = Completed }
    | ShowNotCompleted -> { state with Filter = NotCompleted }


let appTitle = 
    Html.p [
        prop.className "title"
        prop.text "Elmish To-Do List"
    ]

let inputField (state: State) (dispatch: Msg -> unit) =
    Html.div [
        prop.classes [ "field"; "has-addons" ]
        prop.children [
            Html.div [
                prop.classes [ "control"; "is-expanded" ]
                prop.children [
                    Html.input [
                        prop.classes [ "input"; "is-medium" ]
                        prop.valueOrDefault state.NewTodo
                        prop.onChange (SetNewTodo >> dispatch)
                        prop.onKeyPress (key.enter, fun event -> dispatch AddNewTodo )
                    ]
                ]
            ]

            Html.div [
                prop.className "control"
                prop.children [
                    Html.button [
                        prop.classes [ "button"; "is-primary"; "is-medium" ]
                        prop.onClick (fun _ -> dispatch AddNewTodo)
                        prop.children [
                            Html.i [
                                prop.classes [ "fa"; "fa-plus" ]
                            ]
                        ]
                    ]
                ]
            ]
        ]
    ]

let div (classes: string list) (children: Fable.React.ReactElement list) =
    Html.div [
        prop.classes classes
        prop.children children
    ]

let renderTodoEdit (todoBeingEdited: TodoBeingEdited) (dispatch: Msg -> unit) =
    div [ "box" ] [
        div [ "columns"; "is-mobile"; "is-vcentered" ] [
            div [ "column" ] [
                div [ "control"; "is-expanded" ] [
                    Html.input [
                        prop.classes [ "input"; ]
                        prop.valueOrDefault todoBeingEdited.Description 
                        prop.onChange (SetEditedDescription >> dispatch)
                        prop.onKeyDown (fun event -> 
                                                match event.key with 
                                                | "Enter" -> dispatch ApplyEdit 
                                                | "Escape" -> dispatch CancelEdit 
                                                | _ ->  ())
                    ]
                ]
            ]
            div [ "column"; "is-narrow" ] [
                div [ "buttons"] [
                    Html.button [
                        prop.classes [ "button"; "is-success"]
                        prop.onClick (fun _ -> dispatch (ApplyEdit))
                        prop.children [
                            Html.i [ prop.classes [ "fa"; "fa-floppy-disk" ] ]
                        ]
                    ]

                    Html.button [
                        prop.classes [ "button"; "is-danger" ]
                        prop.onClick (fun _ -> dispatch CancelEdit)
                        prop.children [
                            Html.i [ prop.classes [ "fa"; "fa-times" ] ]
                        ]
                    ]
                ] 
            ]
        ]
    ]


let renderTodo (todo: Todo) (dispatch: Msg -> unit) =
    div [ "box" ] [
        div [ "columns"; "is-mobile"; "is-vcentered" ] [
            div [ "column" ] [
                Html.p [
                    prop.style [ if todo.Completed then style.textDecoration.lineThrough ]
                    prop.className "subtitle"
                    prop.text todo.Description
                ]
            ]
        

            div [ "column"; "is-narrow" ] [
                div [ "buttons"] [
                    Html.button [
                        prop.classes [ "button"; if todo.Completed then "is-success"]
                        prop.onClick (fun _ -> dispatch (ToggleCompleted todo.Id))
                        prop.children [
                            Html.i [ prop.classes [ "fa"; "fa-check" ] ]
                        ]
                    ]

                    Html.button [
                        prop.classes [ "button"; ]
                        prop.onClick (fun _ -> dispatch (StartEditingTodo todo.Id))
                        prop.children [
                            Html.i [ prop.classes [ "fa"; "fa-pencil" ]]
                        ]
                    ]

                    Html.button [
                        prop.classes [ "button"; "is-danger" ]
                        prop.onClick (fun _ -> dispatch (DeleteTodo todo.Id))
                        prop.children [
                            Html.i [ prop.classes [ "fa"; "fa-trash-can" ] ]
                        ]
                    ]
                ] 
            ]
        ]
    ]

let todoList (state: State) (dispatch: Msg -> unit) = 
    Html.ul [
        prop.children [
            let todos = 
                state.TodoList
                |> List.filter (fun todo -> 
                    match state.Filter with 
                        | Completed -> todo.Completed = true 
                        | NotCompleted -> todo.Completed <> true 
                        | All -> true 
                )
            for todo in todos ->
                    match state.TodoBeingEdited with 
                    | Some todoBeingEdited when todo.Id = todoBeingEdited.Id -> renderTodoEdit todoBeingEdited dispatch
                    | _ -> renderTodo todo dispatch
        ]
    ]

let filterTabs (state: State) (dispatch: Msg -> unit) =
    div ["tabs"; "is-toggle"; "is-fullwidth"] [
        Html.ul [
            Html.li [
                prop.classes [(match state.Filter with | All -> "is-active" | _ -> "")]
                // prop.classes [if highlight = "All" then "is-active"]
                prop.onClick (fun _ -> dispatch ShowAll)
                prop.children [
                    Html.a [
                        prop.text "All"
                    ]
                ]
            ]
            Html.li [
                prop.classes [(match state.Filter with | Completed -> "is-active" | _ -> "")]
                // prop.classes [if state.Filter = Completed then "is-active"]
                prop.onClick (fun _ -> dispatch ShowCompleted)
                prop.children [
                    Html.a [
                        prop.text "Completed"
                    ]
                ]
            ]
            Html.li [
                prop.classes [(match state.Filter with | NotCompleted -> "is-active" | _ -> "")]
                // prop.classes [if state.Filter = NotCompleted then "is-active"]
                prop.onClick (fun _ -> dispatch ShowNotCompleted)
                prop.children [
                    Html.a [
                        prop.text "Not Completed!"
                    ]
                ]
            ]
        ]
    ]

let render (state: State) (dispatch: Msg -> unit) =
    Html.div [
        prop.style [ style.padding 20 ]
        prop.children [
            appTitle
            inputField state dispatch
            filterTabs state dispatch
            todoList state dispatch
        ]
    ]

Program.mkSimple init update render
|> Program.withReactSynchronous "elmish-app"
|> Program.run