import { j as jsxRuntimeExports } from "../../../../../../_virtual/jsx-runtime.js";
import { tx as D } from "../../../../../style-system/dist/twind.js";
const inputClassname = D(
  `px-3 py-2 border border-base-200 rounded-md shadow-inset
  focus:(outline-2 outline-offset-0 outline-accent-500 ring-none border-accent-500)
  placeholder:text-inherit placeholder:opacity-70`
);
const GenericFieldComponent = ({
  fieldName,
  title,
  required,
  description,
  children
}) => {
  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 flex flex-col gap-1", children: [
    /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { htmlFor: fieldName, className: "font-medium", children: [
      title,
      " ",
      required && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "*" })
    ] }),
    children
  ] });
};
const BooleanField = ({
  fieldName,
  fieldSchema,
  value,
  onChange,
  title,
  required,
  description
}) => {
  const booleanValue = typeof value === "boolean" ? value : false;
  return /* @__PURE__ */ jsxRuntimeExports.jsx(GenericFieldComponent, { fieldName, title, required, description, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-3", children: [
    /* @__PURE__ */ jsxRuntimeExports.jsx(
      "input",
      {
        id: fieldName,
        name: fieldName,
        type: "checkbox",
        defaultChecked: booleanValue,
        onChange: (e) => onChange(e.target.checked),
        required,
        className: D(
          "rounded border border-base-200 focus:outline-none focus:(ring-2 ring-accent-500 border-accent-500) text-accent-500"
        )
      }
    ),
    /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { htmlFor: fieldName, className: "font-medium", children: [
      title,
      " ",
      required && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "*" })
    ] })
  ] }) });
};
const NumberField = ({
  fieldName,
  fieldSchema,
  value,
  onChange,
  title,
  required,
  description
}) => {
  const numberValue = typeof value === "number" ? value : "";
  return /* @__PURE__ */ jsxRuntimeExports.jsx(GenericFieldComponent, { fieldName, title, required, description, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
    "input",
    {
      id: fieldName,
      name: fieldName,
      type: "number",
      value: numberValue,
      onChange: (e) => {
        const val = e.target.value;
        onChange(val === "" ? 0 : Number(val));
      },
      placeholder: fieldSchema["ui:placeholder"],
      min: fieldSchema.minimum,
      max: fieldSchema.maximum,
      required,
      className: inputClassname
    }
  ) });
};
const SelectField = ({
  fieldName,
  fieldSchema,
  value,
  onChange,
  title,
  required,
  description
}) => {
  const options = fieldSchema.enum || [];
  const stringValue = typeof value === "string" ? value : "";
  const widget = fieldSchema.metadata?.["ui:widget"];
  const longestOption = options.reduce(
    (longest, current) => current.length > longest.length ? current : longest,
    fieldSchema["ui:placeholder"] || "Choose an option"
  );
  const estimatedWidth = Math.max(longestOption.length * 0.6 + 5, 10);
  const effectiveWidget = options.length === 1 ? "checkbox" : widget;
  if (effectiveWidget === "checkbox") {
    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 flex flex-col gap-1", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("fieldset", { children: [
      /* @__PURE__ */ jsxRuntimeExports.jsxs("legend", { className: "block text-sm font-medium ", children: [
        title,
        " ",
        required && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500", children: "*" })
      ] }),
      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-2 mt-2", children: options.map((option) => /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "flex items-center space-x-2", children: [
        /* @__PURE__ */ jsxRuntimeExports.jsx(
          "input",
          {
            type: "checkbox",
            name: fieldName,
            value: option,
            onChange: (e) => onChange(e.target.checked ? e.target.value : ""),
            required,
            className: D(
              "rounded border border-base-200 focus:outline-none focus:(ring-2 ring-accent-500 border-accent-500) text-accent-500"
            )
          }
        ),
        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm", children: option })
      ] }, option)) })
    ] }) });
  }
  if (effectiveWidget === "radio") {
    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 flex flex-col gap-1", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("fieldset", { children: [
      /* @__PURE__ */ jsxRuntimeExports.jsxs("legend", { className: "font-medium", children: [
        title,
        " ",
        required && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "*" })
      ] }),
      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-2 mt-2", children: options.map((option) => /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "flex items-center space-x-2", children: [
        /* @__PURE__ */ jsxRuntimeExports.jsx(
          "input",
          {
            type: "radio",
            name: fieldName,
            value: option,
            checked: stringValue === option,
            onChange: (e) => onChange(e.target.value),
            required,
            className: "border border-base-200 focus:outline-none focus:(ring-2 ring-accent-500 border-accent-500) text-accent-500"
          }
        ),
        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: option })
      ] }, option)) })
    ] }) });
  }
  return /* @__PURE__ */ jsxRuntimeExports.jsx(GenericFieldComponent, { fieldName, title, required, description, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
    "select",
    {
      id: fieldName,
      name: fieldName,
      value: stringValue,
      onChange: (e) => onChange(e.target.value),
      required,
      className: D(inputClassname, "w-full"),
      style: { minWidth: `${estimatedWidth}rem` },
      children: [
        /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "", disabled: true, children: fieldSchema["ui:placeholder"] || fieldSchema.description || "Choose an option" }),
        options.map((option) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: option, children: option }, option))
      ]
    }
  ) });
};
const EmailField = ({
  fieldName,
  fieldSchema,
  value,
  onChange,
  title,
  required,
  description
}) => {
  const stringValue = typeof value === "string" ? value : "";
  return /* @__PURE__ */ jsxRuntimeExports.jsx(GenericFieldComponent, { fieldName, title, required, description, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
    "input",
    {
      id: fieldName,
      name: fieldName,
      type: "email",
      value: stringValue,
      onChange: (e) => onChange(e.target.value),
      placeholder: fieldSchema["ui:placeholder"],
      required,
      className: inputClassname
    }
  ) });
};
const UrlField = ({
  fieldName,
  fieldSchema,
  value,
  onChange,
  title,
  required,
  description
}) => {
  const stringValue = typeof value === "string" ? value : "";
  return /* @__PURE__ */ jsxRuntimeExports.jsx(GenericFieldComponent, { fieldName, title, required, description, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
    "input",
    {
      id: fieldName,
      name: fieldName,
      type: "url",
      value: stringValue,
      onChange: (e) => onChange(e.target.value),
      placeholder: fieldSchema["ui:placeholder"],
      required,
      className: inputClassname
    }
  ) });
};
const DateField = ({
  fieldName,
  fieldSchema,
  value,
  onChange,
  title,
  required,
  description
}) => {
  const stringValue = typeof value === "string" ? value : "";
  return /* @__PURE__ */ jsxRuntimeExports.jsx(GenericFieldComponent, { fieldName, title, required, description, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
    "input",
    {
      id: fieldName,
      name: fieldName,
      type: "date",
      value: stringValue,
      onChange: (e) => onChange(e.target.value),
      required,
      className: inputClassname
    }
  ) });
};
const DateTimeField = ({
  fieldName,
  fieldSchema,
  value,
  onChange,
  title,
  required,
  description
}) => {
  const stringValue = typeof value === "string" ? value : "";
  return /* @__PURE__ */ jsxRuntimeExports.jsx(GenericFieldComponent, { fieldName, title, required, description, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
    "input",
    {
      id: fieldName,
      name: fieldName,
      type: "datetime-local",
      value: stringValue,
      onChange: (e) => onChange(e.target.value),
      required,
      className: inputClassname
    }
  ) });
};
const StringField = ({
  fieldName,
  fieldSchema,
  value,
  onChange,
  title,
  required,
  description
}) => {
  const stringValue = typeof value === "string" ? value : "";
  return /* @__PURE__ */ jsxRuntimeExports.jsx(GenericFieldComponent, { fieldName, title, required, description, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
    "input",
    {
      id: fieldName,
      name: fieldName,
      type: "text",
      value: stringValue,
      onChange: (e) => onChange(e.target.value),
      placeholder: fieldSchema["ui:placeholder"],
      minLength: fieldSchema.minLength,
      maxLength: fieldSchema.maxLength,
      required,
      className: D(inputClassname)
    }
  ) });
};
const TextareaField = ({
  fieldName,
  fieldSchema,
  value,
  onChange,
  title,
  required,
  description
}) => {
  const stringValue = typeof value === "string" ? value : "";
  return /* @__PURE__ */ jsxRuntimeExports.jsx(GenericFieldComponent, { fieldName, title, required, description, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
    "textarea",
    {
      id: fieldName,
      name: fieldName,
      value: stringValue,
      onChange: (e) => onChange(e.target.value),
      placeholder: fieldSchema["ui:placeholder"],
      minLength: fieldSchema.minLength,
      maxLength: fieldSchema.maxLength,
      required,
      rows: 4,
      className: inputClassname
    }
  ) });
};
export {
  BooleanField,
  DateField,
  DateTimeField,
  EmailField,
  NumberField,
  SelectField,
  StringField,
  TextareaField,
  UrlField
};
//# sourceMappingURL=Fields.js.map
