import Elementary
import ElementaryHTMX
import SharedModels

struct VendorDetail: HTML {

  let vendor: Vendor

  var content: some HTML {
    Float(shouldDisplay: true) {
      VendorForm(.formOnly(vendor))
      BranchTable(branches: vendor.branches ?? [])
      div(.class("row btn-row")) {
        button(.class("btn-done")) { "Done" }
        button(.class("danger")) { "Delete" }
      }
    }
  }

  struct BranchTable: HTML {
    let branches: [VendorBranch]

    var content: some HTML {
      div {
        form(
          .id("branch-form"),
          .custom(name: "hx-on::after-request", value: "if(event.detail.successful) this.reset();")
        ) {
          div(.class("row"), .style("margin: 0;")) {
            input(.type(.text), .class("col-10"), .placeholder("Branch Name"), .required)
            button(
              .type(.submit),
              .class("btn-secondary"),
              .style("float: right; padding: 10px 50px;"),
              .hx.target("#branch-table"),
              .hx.swap(.beforeEnd)
            ) { "+" }
          }
        }
        table {
          thead {
            tr {
              th(.class("label col-11")) { "Branch Location" }
              th(.class("col-1")) {}
            }
          }
          tbody(.id("branch-table")) {
            for branch in branches {
              Row(branch: branch)
            }
          }
        }
      }
    }

    struct Row: HTML {
      let branch: VendorBranch

      var content: some HTML<HTMLTag.tr> {
        tr {
          td(.class("col-11")) { branch.name }
          td(.class("col-1")) { Button.danger { "Delete" } }
        }
      }
    }
  }

}