import e, { forwardRef as h } from "react";
import { EuiSwitch as x } from "@elastic/eui";
import { useForm as p } from "react-hook-form";
const t = {
  dot: "after:content-['*'] after:ml-0.5 after:text-red-500",
  error: "ring-red-500 ring-1",
  disabled: "cursor-not-allowed",
  container: "relative mb-4 mt-3 flex items-center",
  errorMessage: "text-sm text-red-500 mt-2",
  checkboxLabel: "block overflow-hidden h-6 rounded-full bg-gray-300",
  checkboxContainer: "relative w-10 mr-2 align-middle select-none mt-2",
  iconContainer: "absolute flex border border-transparent left-0 top-0 h-full w-10",
  icon: "flex items-center justify-center rounded-tl rounded-bl z-10 text-gray-400 text-lg h-full w-full",
  checkbox: "checked:bg-blue-500 checked:right-0 focus:outline-none right-4 duration-200 ease-in absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer",
  default: "text-base relative flex w-64 rounded-md py-2 px-4 bg-white text-gray-700 placeholder-gray-400 text-base focus:outline-none focus:ring-1 focus:border-transparent border"
}, v = h(
  ({ disabled: c, dot: s, error: a, icon: u, label: b, name: r, type: l = "text", options: d, ...i }, m) => {
    const {
      register: f,
      formState: { errors: w }
    } = p();
    let n;
    return l === "select" && (n = /* @__PURE__ */ e.createElement("select", {
      "aria-required": s,
      "aria-invalid": !!a,
      className: `${t.default} ${c ? t.disabled : ""}
             ${a ? t.error : "border-gray-300"}
          `,
      disabled: c,
      id: r,
      name: r,
      ref: m,
      ...i
    })), l === "textarea" && (n = /* @__PURE__ */ e.createElement("textarea", {
      "aria-required": s,
      "aria-invalid": !!a,
      className: `${t.default} ${c ? t.disabled : ""}
             ${a ? t.error : "border-gray-300"}
          `,
      disabled: c,
      id: r,
      name: r,
      ref: m,
      ...i
    })), l === "switch" && (n = /* @__PURE__ */ e.createElement(x, {
      showLabel: !1,
      onChange: onChange1,
      compressed: !0,
      ...i
    })), l === "tags" && (n = /* @__PURE__ */ e.createElement("div", {
      className: "grid grid-cols-4 gap-4"
    }, d && (d == null ? void 0 : d.map((o, g) => o.disabled ? /* @__PURE__ */ e.createElement("label", {
      className: "relative flex items-center justify-center px-4 py-3 text-sm font-medium text-gray-200 uppercase border rounded-md cursor-not-allowed group hover:bg-gray-50 focus:outline-none sm:flex-1 sm:py-6 bg-gray-50"
    }, /* @__PURE__ */ e.createElement("input", {
      type: "radio",
      name: r,
      value: o.value,
      className: "sr-only",
      "aria-labelledby": "size-choice-0-label"
    }), /* @__PURE__ */ e.createElement("span", {
      id: "size-choice-0-label"
    }, " ", o.label, " "), /* @__PURE__ */ e.createElement("span", {
      "aria-hidden": "true",
      className: "absolute border-2 border-gray-200 rounded-md pointer-events-none -inset-px"
    }, /* @__PURE__ */ e.createElement("svg", {
      className: "absolute inset-0 w-full h-full text-gray-200 stroke-2",
      viewBox: "0 0 100 100",
      preserveAspectRatio: "none",
      stroke: "currentColor"
    }, /* @__PURE__ */ e.createElement("line", {
      x1: "0",
      y1: "100",
      x2: "100",
      y2: "0",
      vectorEffect: "non-scaling-stroke"
    })))) : /* @__PURE__ */ e.createElement("label", {
      className: "relative flex items-center justify-center px-4 py-3 text-sm font-medium text-gray-900 uppercase bg-white border rounded-md shadow-sm cursor-pointer group hover:bg-gray-50 focus:outline-none sm:flex-1 sm:py-6"
    }, /* @__PURE__ */ e.createElement("input", {
      name: r,
      value: o.value,
      ...f(r),
      type: "radio"
    }), /* @__PURE__ */ e.createElement("span", {
      id: `${r}-choice-${g}-label`
    }, " ", o.label, " "), /* @__PURE__ */ e.createElement("span", {
      className: "absolute rounded-md pointer-events-none -inset-px",
      "aria-hidden": "true"
    })))))), l === "checkbox" && (n = /* @__PURE__ */ e.createElement("div", {
      className: t.checkboxContainer
    }, /* @__PURE__ */ e.createElement("input", {
      "aria-required": s,
      "aria-invalid": !!a,
      className: `${t.checkbox} ${c ? t.disabled : ""}`,
      disabled: c,
      id: r,
      name: r,
      type: "checkbox",
      ...i
    }), /* @__PURE__ */ e.createElement("span", {
      className: t.checkboxLabel
    }))), l !== "checkbox" && l !== "select" && l !== "textarea" && l !== "tags" && (n = /* @__PURE__ */ e.createElement("div", {
      className: "relative"
    }, /* @__PURE__ */ e.createElement("div", {
      className: t.iconContainer
    }, /* @__PURE__ */ e.createElement("div", {
      className: t.icon
    }, u)), /* @__PURE__ */ e.createElement("input", {
      "aria-required": s,
      "aria-invalid": !!a,
      className: `${t.default} ${u ? "pl-12" : ""}
               ${a ? t.error : "border-gray-300"}
               ${c ? t.disabled : ""}
            `,
      disabled: c,
      id: r,
      name: r,
      type: l,
      ref: m,
      ...i
    }), a && /* @__PURE__ */ e.createElement(E, null))), /* @__PURE__ */ e.createElement("div", {
      className: `${t.container} ${c ? "opacity-50" : ""}`
    }, /* @__PURE__ */ e.createElement("label", {
      htmlFor: r,
      className: `text-gray-700 w-28 flex justify-end ${s && t.dot}`
    }, b, "\uFF1A"), n, a && /* @__PURE__ */ e.createElement("span", {
      role: "alert",
      className: t.errorMessage
    }, a));
  }
);
v.displayName = "Field";
const E = () => /* @__PURE__ */ e.createElement("svg", {
  xmlns: "http://www.w3.org/2000/svg",
  width: "15",
  height: "15",
  fill: "currentColor",
  className: "absolute text-red-500 right-2 -mt-7",
  viewBox: "0 0 1792 1792"
}, /* @__PURE__ */ e.createElement("path", {
  d: "M1024 1375v-190q0-14-9.5-23.5t-22.5-9.5h-192q-13 0-22.5 9.5t-9.5 23.5v190q0 14 9.5 23.5t22.5 9.5h192q13 0 22.5-9.5t9.5-23.5zm-2-374l18-459q0-12-10-19-13-11-24-11h-220q-11 0-24 11-10 7-10 21l17 457q0 10 10 16.5t24 6.5h185q14 0 23.5-6.5t10.5-16.5zm-14-934l768 1408q35 63-2 126-17 29-46.5 46t-63.5 17h-1536q-34 0-63.5-17t-46.5-46q-37-63-2-126l768-1408q17-31 47-49t65-18 65 18 47 49z"
}));
export {
  v as Field
};
//# sourceMappingURL=Field.js.map
