library(htmxr)
library(ggplot2)
library(dplyr)

bootstrap_css <- tags$link(
  rel = "stylesheet",
  href = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css",
  integrity = "sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB",
  crossorigin = "anonymous"
)

diamond_data <- function(cut_filter = "all") {
  data <- if (cut_filter == "all") {
    diamonds |> slice_head(n = 20)
  } else {
    diamonds |>
      filter(cut == cut_filter) |>
      slice_head(n = 20)
  }
  data |>
    mutate(price = paste0("$", price))
}

#* @get /
#* @parser none
#* @serializer html
function() {
  hx_page(
    hx_head(
      title = "Diamonds explorer",
      bootstrap_css
    ),
    tags$div(
      class = "container py-5",
      style = "max-width: 750px",
      tags$h1(
        class = "mb-1",
        "Diamonds Explorer"
      ),
      tags$p(
        class = "text-muted mb-4",
        "htmx + plumber2"
      ),
      tags$div(
        class = "card mb-4 border-primary",
        tags$div(
          class = "card-body",
          hx_select_input(
            id = "cut",
            label = "Filter by cut:",
            choices = c(
              "All" = "all",
              "Fair",
              "Good",
              "Very Good",
              "Premium",
              "Ideal"
            ),
            selected = "all",
            class = "form-select",
            get = "/rows",
            trigger = "change",
            target = "#tbody"
          )
        )
      ),

      tags$div(
        class = "card",
        tags$div(
          class = "card-body p-0",
          hx_table(
            columns = c("cut", "color", "clarity", "price"),
            col_labels = c("Cut", "Color", "Clarity", "Price"),
            tbody_id = "tbody",
            class = "table table-striped table-hover mb-0",
            thead_class = "table-dark",
            get = "/rows",
            trigger = "load",
            swap = "innerHTML"
          )
        )
      )
    )
  )
}

#* @get /rows
#* @query cut:string("all")
#* @parser none
#* @serializer none
function(query) {
  hx_table_rows(
    diamond_data(query$cut),
    columns = c("cut", "color", "clarity", "price")
  )
}
