import Elementary
import ElementaryHTMX
import SharedModels

struct VendorDetail: HTML {

  let vendor: Vendor

  var content: some HTML {
    Float(shouldDisplay: true) {
      VendorForm(.formOnly(vendor))
      h2(.style("margin-left: 20px; font-size: 1.5em;"), .class("label")) { "Branches" }
      branchForm
      branches
    } closeButton: {
      Button.close(id: "float")
        .attributes(
          .hx.get(route: .vendor(.shared(.index(withBranches: true)))),
          .hx.pushURL(true),
          .hx.target(.body),
          .hx.swap(.outerHTML)
        )
    }
  }

  // TODO: What route for here??
  var branchForm: some HTML {
    form(
      .id("branch-form"),
      .hx.post("/vendors/\(vendor.id)/branches"),
      .hx.target("#branches"),
      .hx.swap(.beforeEnd),
      .custom(name: "hx-on::after-request", value: "if(event.detail.successful) this.reset();")
    ) {
      input(
        .type(.text), .class("col-9"), .name("name"), .placeholder("Add branch..."), .required,
        .hx.post(route: .vendorBranch(.index(for: vendor.id))),
        .hx.trigger(.event(.keyup).changed().delay("800ms")),
        .hx.target("#branches"),
        .hx.swap(.beforeEnd) // ,
        // .custom(name: "hx-on::after-request", value: "if(event.detail.successful) this.reset();")
      )
      button(
        .type(.submit),
        .class("btn-secondary"),
        .style("float: right; padding: 10px 50px;"),
        .hx.target("#branch-table"),
        .hx.swap(.beforeEnd)
      ) { "+" }
    }
  }

  var branches: some HTML {
    ul(.id("branches")) {
      for branch in vendor.branches ?? [] {
        BranchRow(branch: branch)
      }
    }
  }

  struct BranchRow: HTML {
    let branch: VendorBranch

    var content: some HTML<HTMLTag.li> {
      li(.id("branch_\(branch.id)"), .class("branch-row")) {
        span(.class("label")) { branch.name.capitalized }
        button(
          .class("btn"),
          .hx.delete(route: .vendorBranch(.delete(id: branch.id))),
          .hx.target("#branch_\(branch.id)"),
          .hx.swap(.outerHTML.transition(true).swap("0.5s"))
        ) {
          img(.src("/images/trash-can.svg"), .width(30), .height(30), .style("margin-top: 5px;"))
        }
      }
    }
  }

}