import Dependencies
import Elementary
import Foundation
import SharedModels

struct UserDetail: HTML, Sendable {
  @Dependency(\.dateFormatter) var dateFormatter

  let user: User?

  var classString: String {
    user != nil ? "float" : ""
  }

  var display: String {
    user != nil ? "block" : "hidden"
  }

  var content: some HTML {
    div(
      .id("float"),
      .class(classString),
      .style("display: \(display);")
    ) {
      if let user {
        Button.close(id: "float")
        form {
          div(.class("row")) {
            makeLabel(for: "username", value: "Username:")
            input(.type(.text), .name("username"), .value(user.username))
            makeLabel(for: "email", value: "Email:")
            input(.type(.email), .name("email"), .value(user.username))
          }
          div(.class("row")) {
            div(.style("display: inline-block;")) {
              h3(.class("label")) { "Created:" }
              h3 { dateFormatter.formattedDate(user.createdAt) }
            }
            div(.style("display: inline-block;")) {
              h3(.class("label")) { "Updated:" }
              h3 { dateFormatter.formattedDate(user.updatedAt) }
            }
          }
        }
        div(.class("btn-row user-buttons")) {
          Button.danger { "Delete" }
        }
      }
    }
  }

  func makeLabel(
    for name: String,
    value: String
  ) -> some HTML {
    label(.for(name)) { h3 { value } }
  }

  func row(_ label: String, _ value: String) -> some HTML<HTMLTag.tr> {
    tr {
      td(.class("label")) { h3 { label } }
      td { h3 { value } }
    }
  }
}

extension DateFormatter {

  func formattedDate(_ date: Date?) -> String {
    guard let date else { return "" }
    return string(from: date)
  }
}