import Elementary
import ElementaryHTMX
import SharedModels

struct PurchaseOrderForm: HTML {

  let purchaseOrder: PurchaseOrder?
  let shouldShow: Bool

  init(purchaseOrder: PurchaseOrder? = nil, shouldShow: Bool = false) {
    self.purchaseOrder = purchaseOrder
    self.shouldShow = shouldShow
  }

  var content: some HTML {
    Float(shouldDisplay: shouldShow, resetURL: "/purchase-orders") {
      if shouldShow {
        if purchaseOrder != nil {
          p {
            span(.class("label"), .style("margin-right: 15px;")) { "Note:" }
            span { i(.style("font-size: 1em;")) {
              "Vendor and Employee can not be changed once a purchase order has been created."
            } }
          }
        }
        form(
          .hx.post("/purchase-orders"),
          .hx.target("#purchase-order-table"),
          .hx.swap(.afterBegin),
          .custom(
            name: "hx-on::after-request",
            value: "if(event.detail.successful) toggleContent('float')"
          )
        ) {
          div(.class("row")) {
            label(
              .for("customer"), .class("label col-2"), .style("margin-right: 15px; margin-bottom: 5px;")
            ) { "Customer:" }
            input(
              .type(.text), .class("col-3"),
              .name("customer"), .placeholder("Customer"),
              .value(purchaseOrder?.customer ?? ""),
              .required, .autofocus
            )
            label(
              .for("workOrder"), .class("label col-2"), .style("margin-right: 15px; margin-bottom: 5px;")
            ) { "Work Order:" }
            input(
              .type(.text), .class("col-4"),
              .name("workOrder"), .placeholder("Work Order: (12345)"),
              .value("\(purchaseOrder?.workOrder != nil ? String(purchaseOrder!.workOrder!) : "")")
            )
          }
          div(.class("row")) {
            label(
              .for("materials"), .class("label col-2"), .style("margin-right: 15px; margin-bottom: 5px;")
            ) { "Materials:" }
            input(
              .type(.text), .class("col-3"),
              .name("materials"), .placeholder("Materials"),
              .value(purchaseOrder?.materials ?? ""),
              .required
            )
            label(
              .for("vendorBranchID"), .class("label col-2"), .style("margin-right: 15px; margin-bottom: 5px;")
            ) { "Vendor:" }
            if purchaseOrder == nil {
              div(
                .class("col-4"),
                .hx.get("/purchase-orders/create/vendor-branch-select"),
                .hx.target("this"),
                .hx.swap(.outerHTML.transition(true).swap("0.5s")),
                .hx.trigger(.event(.revealed)),
                .hx.indicator(".hx-indicator")
              ) {
                Img.spinner().attributes(.class("hx-indicator"), .style("float: left;"))
              }
            } else {
              input(
                .type(.text), .class("col-4"),
                .name("vendorBranchID"),
                .value("\(purchaseOrder!.vendorBranch.vendor.name) - \(purchaseOrder!.vendorBranch.name)"),
                .disabled
              )
            }
          }
          div(.class("row")) {
            label(
              .for("createdForID"), .class("label col-2"), .style("margin-right: 15px; margin-bottom: 5px;")
            ) { "Employee:" }
            if purchaseOrder == nil {
              div(
                .class("col-3"),
                .hx.get("/purchase-orders/create/employee-select"),
                .hx.target("this"),
                .hx.swap(.outerHTML.transition(true).swap("0.5s")),
                .hx.trigger(.event(.revealed)),
                .hx.indicator(".hx-indicator")
              ) {
                Img.spinner().attributes(.class("hx-indicator"), .style("float: left;"))
              }
            } else {
              input(
                .type(.text), .class("col-3"),
                .value(purchaseOrder!.createdFor.fullName),
                .disabled
              )
            }
            label(
              .for("truckStock"), .class("label col-2"), .style("margin-right: 15px; margin-bottom: 5px;")
            ) { "Truck Stock:" }
            if purchaseOrder?.truckStock == true {
              input(
                .type(.checkbox), .class("col-2"), .name("truckStock"), .style("margin-top: 20px;"), .checked
              )
            } else {
              input(
                .type(.checkbox), .class("col-2"), .name("truckStock"), .style("margin-top: 20px;")
              )
            }
          }
          div(.class("btn-row")) {
            button(.class("btn-primary"), .type(.submit)) { buttonLabel }
            if purchaseOrder != nil {
              Button.danger { "Delete" }
            }
          }
        }
      }
    }
  }

  private var buttonLabel: String {
    guard purchaseOrder != nil else { return "Create" }
    return "Update"
  }

  struct VendorSelect: HTML {
    let vendorBranches: [VendorBranch.Detail]

    var content: some HTML<HTMLTag.select> {
      select(.name("vendorBranchID"), .class("col-4")) {
        for branch in vendorBranches {
          option(.value(branch.id.uuidString)) { "\(branch.vendor.name) - \(branch.name)" }
        }
      }
    }
  }

  struct EmployeeSelect: HTML {
    let employees: [Employee]

    var content: some HTML<HTMLTag.select> {
      select(.name("createdForID"), .class("col-3")) {
        for employee in employees {
          option(.value(employee.id.uuidString)) { employee.fullName }
        }
      }
    }
  }
}