package outwatchapp.components

import colibri.ext.monix._
import com.softwaremill.tagging._
import monix.bio._
import monix.eval.Coeval
import monix.{eval => me}
import outwatch._
import outwatch.dsl._
import outwatch.reactive.handlers.monix._
import outwatchapp.AppTypes
import outwatchapp.implicits._
import outwatchapp.ui.components.todo.Todo
import outwatchapp.ui.components.todo.TodoListStore
import outwatchapp.util.reactive.store.Store
import sttp.client._

sealed trait RequestDemo
object RequestDemo {
  def request(query: String)(implicit backend: AppTypes.Backend) = basicRequest
    .get(
      uri"https://jsonplaceholder.typicode.com/todos/${query.toIntOption.getOrElse(0)}"
    )
    .send()
    .flatMap {
      _.body match {
        case Right(value) =>
          me.Task(println(value)) >> me.Task(value)
        case Left(error) =>
          me.Task(println(error)) >> me.Task(error)

      }
    }
  def apply(todoStore: Store[TodoListStore.Action, TodoListStore.State])(
      implicit backend: AppTypes.Backend
  ): Task[HtmlVNode @@ RequestDemo] =
    Task.deferAction(implicit s =>
      for {
        requestSub <- Handler.createF[Task, String]("empty")
        todoContent <- Handler.createF[Task, String]
      } yield div(
        // cls := "col-lg-8 bd-example",
        div(cls := "alert alert-danger", "Some Error Occured!"),
        div(
          form(
            h4(cls := "form-title", "User Finder"),
            div(
              cls := "form-group",
              label(
                color := "hsla(0,0%,100%,0.8)",
                forId := "httpInput",
                "Enter an id: "
              ),
              input(
                idAttr := "httpInput",
                typ := "text",
                cls := "form-control",
                placeholder := "0",
                onInput.value --> requestSub
              )
            ),
            div(
              cls := "form-group",
              label(
                color := "hsla(0,0%,100%,0.8)",
                "Enter content for todo"
              ),
              input(
                cls := "form-control",
                onInput.value --> todoContent
              ),
              button(
                cls := "btn",
                cls := "btn-info form-control",
                "Add Todo",
                onClick.preventDefault.foreachSync(_ =>
                  Coeval(println("Clicked"))
                ),
                onClick(
                  todoContent.map(TodoListStore.Add)
                ) --> todoStore.sink
              )
            )
          )
        ),
        div(
          p(
            cls := "text-white",
            requestSub
              .doOnNext(str => me.Task(println(str)))
              .mapEval(request)
              .map(div(_)),
            div(
              "Todos: ",
              todoStore
                .map { case (a, s) => s.todos }
                // .doOnNextF { case (a, s) => Coeval(println(s)) }
                .distinctUntilChanged
                .map(renderTodos)
            )
          )
        )
      ).taggedWith[RequestDemo]
    )

  def renderTodos(todos: Seq[Todo]) = div(
    ul(
      todos.map(todo => li(div(s"id: ${todo.id} content: ${todo.content}")))
    )
  )
}