import Te, { useState as w, Fragment as pr } from "react";
var G = { exports: {} }, V = {};
/**
 * @license React
 * react-jsx-runtime.production.min.js
 *
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
var ke;
function hr() {
  if (ke) return V;
  ke = 1;
  var a = Te, v = Symbol.for("react.element"), u = Symbol.for("react.fragment"), j = Object.prototype.hasOwnProperty, p = a.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, i = { key: !0, ref: !0, __self: !0, __source: !0 };
  function y(R, c, b) {
    var h, n = {}, o = null, O = null;
    b !== void 0 && (o = "" + b), c.key !== void 0 && (o = "" + c.key), c.ref !== void 0 && (O = c.ref);
    for (h in c) j.call(c, h) && !i.hasOwnProperty(h) && (n[h] = c[h]);
    if (R && R.defaultProps) for (h in c = R.defaultProps, c) n[h] === void 0 && (n[h] = c[h]);
    return { $$typeof: v, type: R, key: o, ref: O, props: n, _owner: p.current };
  }
  return V.Fragment = u, V.jsx = y, V.jsxs = y, V;
}
var W = {};
/**
 * @license React
 * react-jsx-runtime.development.js
 *
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
var we;
function vr() {
  return we || (we = 1, process.env.NODE_ENV !== "production" && function() {
    var a = Te, v = Symbol.for("react.element"), u = Symbol.for("react.portal"), j = Symbol.for("react.fragment"), p = Symbol.for("react.strict_mode"), i = Symbol.for("react.profiler"), y = Symbol.for("react.provider"), R = Symbol.for("react.context"), c = Symbol.for("react.forward_ref"), b = Symbol.for("react.suspense"), h = Symbol.for("react.suspense_list"), n = Symbol.for("react.memo"), o = Symbol.for("react.lazy"), O = Symbol.for("react.offscreen"), $ = Symbol.iterator, T = "@@iterator";
    function Pe(e) {
      if (e === null || typeof e != "object")
        return null;
      var t = $ && e[$] || e[T];
      return typeof t == "function" ? t : null;
    }
    var q = a.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
    function E(e) {
      {
        for (var t = arguments.length, s = new Array(t > 1 ? t - 1 : 0), l = 1; l < t; l++)
          s[l - 1] = arguments[l];
        Fe("error", e, s);
      }
    }
    function Fe(e, t, s) {
      {
        var l = q.ReactDebugCurrentFrame, m = l.getStackAddendum();
        m !== "" && (t += "%s", s = s.concat([m]));
        var x = s.map(function(f) {
          return String(f);
        });
        x.unshift("Warning: " + t), Function.prototype.apply.call(console[e], console, x);
      }
    }
    var qe = !1, Ye = !1, De = !1, Ae = !1, $e = !1, te;
    te = Symbol.for("react.module.reference");
    function Ie(e) {
      return !!(typeof e == "string" || typeof e == "function" || e === j || e === i || $e || e === p || e === b || e === h || Ae || e === O || qe || Ye || De || typeof e == "object" && e !== null && (e.$$typeof === o || e.$$typeof === n || e.$$typeof === y || e.$$typeof === R || e.$$typeof === c || // This needs to include all possible module reference object
      // types supported by any Flight configuration anywhere since
      // we don't know which Flight build this will end up being used
      // with.
      e.$$typeof === te || e.getModuleId !== void 0));
    }
    function Le(e, t, s) {
      var l = e.displayName;
      if (l)
        return l;
      var m = t.displayName || t.name || "";
      return m !== "" ? s + "(" + m + ")" : s;
    }
    function ne(e) {
      return e.displayName || "Context";
    }
    function S(e) {
      if (e == null)
        return null;
      if (typeof e.tag == "number" && E("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), typeof e == "function")
        return e.displayName || e.name || null;
      if (typeof e == "string")
        return e;
      switch (e) {
        case j:
          return "Fragment";
        case u:
          return "Portal";
        case i:
          return "Profiler";
        case p:
          return "StrictMode";
        case b:
          return "Suspense";
        case h:
          return "SuspenseList";
      }
      if (typeof e == "object")
        switch (e.$$typeof) {
          case R:
            var t = e;
            return ne(t) + ".Consumer";
          case y:
            var s = e;
            return ne(s._context) + ".Provider";
          case c:
            return Le(e, e.render, "ForwardRef");
          case n:
            var l = e.displayName || null;
            return l !== null ? l : S(e.type) || "Memo";
          case o: {
            var m = e, x = m._payload, f = m._init;
            try {
              return S(f(x));
            } catch {
              return null;
            }
          }
        }
      return null;
    }
    var P = Object.assign, I = 0, se, le, ie, oe, ce, ue, de;
    function fe() {
    }
    fe.__reactDisabledLog = !0;
    function Ve() {
      {
        if (I === 0) {
          se = console.log, le = console.info, ie = console.warn, oe = console.error, ce = console.group, ue = console.groupCollapsed, de = console.groupEnd;
          var e = {
            configurable: !0,
            enumerable: !0,
            value: fe,
            writable: !0
          };
          Object.defineProperties(console, {
            info: e,
            log: e,
            warn: e,
            error: e,
            group: e,
            groupCollapsed: e,
            groupEnd: e
          });
        }
        I++;
      }
    }
    function We() {
      {
        if (I--, I === 0) {
          var e = {
            configurable: !0,
            enumerable: !0,
            writable: !0
          };
          Object.defineProperties(console, {
            log: P({}, e, {
              value: se
            }),
            info: P({}, e, {
              value: le
            }),
            warn: P({}, e, {
              value: ie
            }),
            error: P({}, e, {
              value: oe
            }),
            group: P({}, e, {
              value: ce
            }),
            groupCollapsed: P({}, e, {
              value: ue
            }),
            groupEnd: P({}, e, {
              value: de
            })
          });
        }
        I < 0 && E("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
      }
    }
    var X = q.ReactCurrentDispatcher, K;
    function U(e, t, s) {
      {
        if (K === void 0)
          try {
            throw Error();
          } catch (m) {
            var l = m.stack.trim().match(/\n( *(at )?)/);
            K = l && l[1] || "";
          }
        return `
` + K + e;
      }
    }
    var H = !1, M;
    {
      var Be = typeof WeakMap == "function" ? WeakMap : Map;
      M = new Be();
    }
    function me(e, t) {
      if (!e || H)
        return "";
      {
        var s = M.get(e);
        if (s !== void 0)
          return s;
      }
      var l;
      H = !0;
      var m = Error.prepareStackTrace;
      Error.prepareStackTrace = void 0;
      var x;
      x = X.current, X.current = null, Ve();
      try {
        if (t) {
          var f = function() {
            throw Error();
          };
          if (Object.defineProperty(f.prototype, "props", {
            set: function() {
              throw Error();
            }
          }), typeof Reflect == "object" && Reflect.construct) {
            try {
              Reflect.construct(f, []);
            } catch (_) {
              l = _;
            }
            Reflect.construct(e, [], f);
          } else {
            try {
              f.call();
            } catch (_) {
              l = _;
            }
            e.call(f.prototype);
          }
        } else {
          try {
            throw Error();
          } catch (_) {
            l = _;
          }
          e();
        }
      } catch (_) {
        if (_ && l && typeof _.stack == "string") {
          for (var d = _.stack.split(`
`), C = l.stack.split(`
`), N = d.length - 1, g = C.length - 1; N >= 1 && g >= 0 && d[N] !== C[g]; )
            g--;
          for (; N >= 1 && g >= 0; N--, g--)
            if (d[N] !== C[g]) {
              if (N !== 1 || g !== 1)
                do
                  if (N--, g--, g < 0 || d[N] !== C[g]) {
                    var k = `
` + d[N].replace(" at new ", " at ");
                    return e.displayName && k.includes("<anonymous>") && (k = k.replace("<anonymous>", e.displayName)), typeof e == "function" && M.set(e, k), k;
                  }
                while (N >= 1 && g >= 0);
              break;
            }
        }
      } finally {
        H = !1, X.current = x, We(), Error.prepareStackTrace = m;
      }
      var D = e ? e.displayName || e.name : "", F = D ? U(D) : "";
      return typeof e == "function" && M.set(e, F), F;
    }
    function Ue(e, t, s) {
      return me(e, !1);
    }
    function Me(e) {
      var t = e.prototype;
      return !!(t && t.isReactComponent);
    }
    function J(e, t, s) {
      if (e == null)
        return "";
      if (typeof e == "function")
        return me(e, Me(e));
      if (typeof e == "string")
        return U(e);
      switch (e) {
        case b:
          return U("Suspense");
        case h:
          return U("SuspenseList");
      }
      if (typeof e == "object")
        switch (e.$$typeof) {
          case c:
            return Ue(e.render);
          case n:
            return J(e.type, t, s);
          case o: {
            var l = e, m = l._payload, x = l._init;
            try {
              return J(x(m), t, s);
            } catch {
            }
          }
        }
      return "";
    }
    var L = Object.prototype.hasOwnProperty, pe = {}, he = q.ReactDebugCurrentFrame;
    function z(e) {
      if (e) {
        var t = e._owner, s = J(e.type, e._source, t ? t.type : null);
        he.setExtraStackFrame(s);
      } else
        he.setExtraStackFrame(null);
    }
    function Je(e, t, s, l, m) {
      {
        var x = Function.call.bind(L);
        for (var f in e)
          if (x(e, f)) {
            var d = void 0;
            try {
              if (typeof e[f] != "function") {
                var C = Error((l || "React class") + ": " + s + " type `" + f + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof e[f] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
                throw C.name = "Invariant Violation", C;
              }
              d = e[f](t, f, l, s, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
            } catch (N) {
              d = N;
            }
            d && !(d instanceof Error) && (z(m), E("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", l || "React class", s, f, typeof d), z(null)), d instanceof Error && !(d.message in pe) && (pe[d.message] = !0, z(m), E("Failed %s type: %s", s, d.message), z(null));
          }
      }
    }
    var ze = Array.isArray;
    function Z(e) {
      return ze(e);
    }
    function Ge(e) {
      {
        var t = typeof Symbol == "function" && Symbol.toStringTag, s = t && e[Symbol.toStringTag] || e.constructor.name || "Object";
        return s;
      }
    }
    function Xe(e) {
      try {
        return ve(e), !1;
      } catch {
        return !0;
      }
    }
    function ve(e) {
      return "" + e;
    }
    function xe(e) {
      if (Xe(e))
        return E("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", Ge(e)), ve(e);
    }
    var je = q.ReactCurrentOwner, Ke = {
      key: !0,
      ref: !0,
      __self: !0,
      __source: !0
    }, be, Ne;
    function He(e) {
      if (L.call(e, "ref")) {
        var t = Object.getOwnPropertyDescriptor(e, "ref").get;
        if (t && t.isReactWarning)
          return !1;
      }
      return e.ref !== void 0;
    }
    function Ze(e) {
      if (L.call(e, "key")) {
        var t = Object.getOwnPropertyDescriptor(e, "key").get;
        if (t && t.isReactWarning)
          return !1;
      }
      return e.key !== void 0;
    }
    function Qe(e, t) {
      typeof e.ref == "string" && je.current;
    }
    function er(e, t) {
      {
        var s = function() {
          be || (be = !0, E("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", t));
        };
        s.isReactWarning = !0, Object.defineProperty(e, "key", {
          get: s,
          configurable: !0
        });
      }
    }
    function rr(e, t) {
      {
        var s = function() {
          Ne || (Ne = !0, E("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", t));
        };
        s.isReactWarning = !0, Object.defineProperty(e, "ref", {
          get: s,
          configurable: !0
        });
      }
    }
    var ar = function(e, t, s, l, m, x, f) {
      var d = {
        // This tag allows us to uniquely identify this as a React Element
        $$typeof: v,
        // Built-in properties that belong on the element
        type: e,
        key: t,
        ref: s,
        props: f,
        // Record the component responsible for creating this element.
        _owner: x
      };
      return d._store = {}, Object.defineProperty(d._store, "validated", {
        configurable: !1,
        enumerable: !1,
        writable: !0,
        value: !1
      }), Object.defineProperty(d, "_self", {
        configurable: !1,
        enumerable: !1,
        writable: !1,
        value: l
      }), Object.defineProperty(d, "_source", {
        configurable: !1,
        enumerable: !1,
        writable: !1,
        value: m
      }), Object.freeze && (Object.freeze(d.props), Object.freeze(d)), d;
    };
    function tr(e, t, s, l, m) {
      {
        var x, f = {}, d = null, C = null;
        s !== void 0 && (xe(s), d = "" + s), Ze(t) && (xe(t.key), d = "" + t.key), He(t) && (C = t.ref, Qe(t, m));
        for (x in t)
          L.call(t, x) && !Ke.hasOwnProperty(x) && (f[x] = t[x]);
        if (e && e.defaultProps) {
          var N = e.defaultProps;
          for (x in N)
            f[x] === void 0 && (f[x] = N[x]);
        }
        if (d || C) {
          var g = typeof e == "function" ? e.displayName || e.name || "Unknown" : e;
          d && er(f, g), C && rr(f, g);
        }
        return ar(e, d, C, m, l, je.current, f);
      }
    }
    var Q = q.ReactCurrentOwner, ge = q.ReactDebugCurrentFrame;
    function Y(e) {
      if (e) {
        var t = e._owner, s = J(e.type, e._source, t ? t.type : null);
        ge.setExtraStackFrame(s);
      } else
        ge.setExtraStackFrame(null);
    }
    var ee;
    ee = !1;
    function re(e) {
      return typeof e == "object" && e !== null && e.$$typeof === v;
    }
    function ye() {
      {
        if (Q.current) {
          var e = S(Q.current.type);
          if (e)
            return `

Check the render method of \`` + e + "`.";
        }
        return "";
      }
    }
    function nr(e) {
      return "";
    }
    var Re = {};
    function sr(e) {
      {
        var t = ye();
        if (!t) {
          var s = typeof e == "string" ? e : e.displayName || e.name;
          s && (t = `

Check the top-level render call using <` + s + ">.");
        }
        return t;
      }
    }
    function Ee(e, t) {
      {
        if (!e._store || e._store.validated || e.key != null)
          return;
        e._store.validated = !0;
        var s = sr(t);
        if (Re[s])
          return;
        Re[s] = !0;
        var l = "";
        e && e._owner && e._owner !== Q.current && (l = " It was passed a child from " + S(e._owner.type) + "."), Y(e), E('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', s, l), Y(null);
      }
    }
    function Ce(e, t) {
      {
        if (typeof e != "object")
          return;
        if (Z(e))
          for (var s = 0; s < e.length; s++) {
            var l = e[s];
            re(l) && Ee(l, t);
          }
        else if (re(e))
          e._store && (e._store.validated = !0);
        else if (e) {
          var m = Pe(e);
          if (typeof m == "function" && m !== e.entries)
            for (var x = m.call(e), f; !(f = x.next()).done; )
              re(f.value) && Ee(f.value, t);
        }
      }
    }
    function lr(e) {
      {
        var t = e.type;
        if (t == null || typeof t == "string")
          return;
        var s;
        if (typeof t == "function")
          s = t.propTypes;
        else if (typeof t == "object" && (t.$$typeof === c || // Note: Memo only checks outer props here.
        // Inner props are checked in the reconciler.
        t.$$typeof === n))
          s = t.propTypes;
        else
          return;
        if (s) {
          var l = S(t);
          Je(s, e.props, "prop", l, e);
        } else if (t.PropTypes !== void 0 && !ee) {
          ee = !0;
          var m = S(t);
          E("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", m || "Unknown");
        }
        typeof t.getDefaultProps == "function" && !t.getDefaultProps.isReactClassApproved && E("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");
      }
    }
    function ir(e) {
      {
        for (var t = Object.keys(e.props), s = 0; s < t.length; s++) {
          var l = t[s];
          if (l !== "children" && l !== "key") {
            Y(e), E("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", l), Y(null);
            break;
          }
        }
        e.ref !== null && (Y(e), E("Invalid attribute `ref` supplied to `React.Fragment`."), Y(null));
      }
    }
    var _e = {};
    function Oe(e, t, s, l, m, x) {
      {
        var f = Ie(e);
        if (!f) {
          var d = "";
          (e === void 0 || typeof e == "object" && e !== null && Object.keys(e).length === 0) && (d += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");
          var C = nr();
          C ? d += C : d += ye();
          var N;
          e === null ? N = "null" : Z(e) ? N = "array" : e !== void 0 && e.$$typeof === v ? (N = "<" + (S(e.type) || "Unknown") + " />", d = " Did you accidentally export a JSX literal instead of a component?") : N = typeof e, E("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", N, d);
        }
        var g = tr(e, t, s, m, x);
        if (g == null)
          return g;
        if (f) {
          var k = t.children;
          if (k !== void 0)
            if (l)
              if (Z(k)) {
                for (var D = 0; D < k.length; D++)
                  Ce(k[D], e);
                Object.freeze && Object.freeze(k);
              } else
                E("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");
            else
              Ce(k, e);
        }
        if (L.call(t, "key")) {
          var F = S(e), _ = Object.keys(t).filter(function(mr) {
            return mr !== "key";
          }), ae = _.length > 0 ? "{key: someKey, " + _.join(": ..., ") + ": ...}" : "{key: someKey}";
          if (!_e[F + ae]) {
            var fr = _.length > 0 ? "{" + _.join(": ..., ") + ": ...}" : "{}";
            E(`A props object containing a "key" prop is being spread into JSX:
  let props = %s;
  <%s {...props} />
React keys must be passed directly to JSX without using spread:
  let props = %s;
  <%s key={someKey} {...props} />`, ae, F, fr, F), _e[F + ae] = !0;
          }
        }
        return e === j ? ir(g) : lr(g), g;
      }
    }
    function or(e, t, s) {
      return Oe(e, t, s, !0);
    }
    function cr(e, t, s) {
      return Oe(e, t, s, !1);
    }
    var ur = cr, dr = or;
    W.Fragment = j, W.jsx = ur, W.jsxs = dr;
  }()), W;
}
var Se;
function xr() {
  return Se || (Se = 1, process.env.NODE_ENV === "production" ? G.exports = hr() : G.exports = vr()), G.exports;
}
var r = xr();
const B = {
  textField: {
    label: "Text Field",
    type: "text",
    required: !1,
    placeholder: "Enter text",
    className: "",
    value: "",
    icon: "fa fa-pencil"
    // Icon for text field
  },
  numberField: {
    label: "Number Field",
    type: "number",
    required: !1,
    placeholder: "Enter number",
    className: "",
    value: "",
    icon: "fa fa-hashtag"
    // Icon for number field
  },
  urlField: {
    label: "Url Field",
    type: "url",
    required: !1,
    placeholder: "Enter url",
    className: "",
    value: "",
    icon: "fa fa-link"
    // Icon for URL field
  },
  dateField: {
    label: "Date Field",
    type: "date",
    required: !1,
    placeholder: "Select a date",
    className: "",
    value: "",
    icon: "fa fa-calendar"
    // Icon for date field
  },
  fileField: {
    label: "File Field",
    type: "file",
    required: !1,
    options: [".jpg", ".png"],
    className: "",
    value: "",
    icon: "fa fa-upload"
    // Icon for file upload
  },
  selectField: {
    label: "Select Field",
    type: "select",
    required: !1,
    options: ["Option 1", "Option 2", "Option 3"],
    placeholder: "Choose an option",
    className: "",
    value: "",
    icon: "fa fa-list"
    // Icon for dropdown/select field
  },
  textArea: {
    label: "Text Area",
    type: "textarea",
    required: !1,
    placeholder: "Enter detailed text",
    className: "",
    value: "",
    icon: "fa fa-file-text"
    // Icon for text area
  },
  emailField: {
    label: "Email Field",
    type: "email",
    required: !1,
    placeholder: "Enter your email",
    className: "",
    value: "",
    icon: "fa fa-envelope"
    // Icon for email field
  },
  checkBox: {
    label: "Check Box",
    type: "checkbox",
    required: !1,
    options: ["Option 1", "Option 2", "Option 3"],
    className: "",
    value: "",
    icon: "fa fa-check-square"
    // Icon for checkbox
  },
  radioButton: {
    label: "Radio Button",
    type: "radio",
    required: !1,
    options: ["Option 1", "Option 2", "Option 3"],
    className: "",
    value: "",
    icon: "fa fa-circle"
    // Icon for radio button
  }
}, A = (a) => a === "Yes", jr = ({ field: a, onRemoveField: v, onEditField: u }) => {
  const [j, p] = w(!1);
  return /* @__PURE__ */ r.jsx("div", { className: a.className, children: /* @__PURE__ */ r.jsxs("div", { className: "form-element frm-element", children: [
    /* @__PURE__ */ r.jsxs("label", { children: [
      a.label,
      " ",
      a.required ? "*" : ""
    ] }),
    /* @__PURE__ */ r.jsx(
      "input",
      {
        type: a.type,
        required: a.required,
        placeholder: a.placeholder
      }
    ),
    /* @__PURE__ */ r.jsxs("div", { className: "action-btns", children: [
      /* @__PURE__ */ r.jsx("button", { className: "frm-btn-red", onClick: () => {
        v(a.id), p(!1);
      }, children: /* @__PURE__ */ r.jsx("i", { className: "fa fa-trash" }) }),
      /* @__PURE__ */ r.jsx("button", { className: "frm-btn-blue", onClick: () => p(!j), children: /* @__PURE__ */ r.jsx("i", { className: "fa fa-pencil" }) })
    ] }),
    j && /* @__PURE__ */ r.jsxs("div", { className: "edit-form", children: [
      /* @__PURE__ */ r.jsxs("div", { className: "form-field", children: [
        /* @__PURE__ */ r.jsx("label", { children: "Label" }),
        /* @__PURE__ */ r.jsx("input", { type: "text", value: a.label, onChange: (i) => u(a.id, { label: i.target.value }) })
      ] }),
      /* @__PURE__ */ r.jsxs("div", { className: "form-field mt-2", children: [
        /* @__PURE__ */ r.jsx("label", { children: "Placeholder" }),
        /* @__PURE__ */ r.jsx("input", { type: "text", value: a.placeholder, onChange: (i) => u(a.id, { placeholder: i.target.value }) })
      ] }),
      /* @__PURE__ */ r.jsxs("div", { className: "form-field mt-2", children: [
        /* @__PURE__ */ r.jsx("label", { children: "Required" }),
        /* @__PURE__ */ r.jsxs(
          "select",
          {
            id: "required",
            defaultValue: a.required ? "Yes" : "No",
            onChange: (i) => u(a.id, { required: A(i.target.value) }),
            children: [
              /* @__PURE__ */ r.jsx("option", { value: "Yes", children: "Yes" }),
              /* @__PURE__ */ r.jsx("option", { value: "No", children: "No" })
            ]
          }
        )
      ] })
    ] })
  ] }) }, a.id);
}, br = ({ field: a, onRemoveField: v, onEditField: u }) => {
  const [j, p] = w(!1);
  return /* @__PURE__ */ r.jsx("div", { className: a.className, children: /* @__PURE__ */ r.jsxs("div", { className: "form-element frm-element", children: [
    /* @__PURE__ */ r.jsxs("label", { children: [
      a.label,
      " ",
      a.required ? "*" : ""
    ] }),
    /* @__PURE__ */ r.jsx(
      "textarea",
      {
        required: a.required,
        placeholder: a.placeholder
      }
    ),
    /* @__PURE__ */ r.jsxs("div", { className: "action-btns", children: [
      /* @__PURE__ */ r.jsx("button", { className: "frm-btn-red", onClick: () => {
        v(a.id), p(!1);
      }, children: /* @__PURE__ */ r.jsx("i", { className: "fa fa-trash" }) }),
      /* @__PURE__ */ r.jsx("button", { className: "frm-btn-blue", onClick: () => p(!j), children: /* @__PURE__ */ r.jsx("i", { className: "fa fa-pencil" }) })
    ] }),
    j && /* @__PURE__ */ r.jsxs("div", { className: "edit-form", children: [
      /* @__PURE__ */ r.jsxs("div", { className: "form-field", children: [
        /* @__PURE__ */ r.jsx("label", { children: "Label" }),
        /* @__PURE__ */ r.jsx("input", { type: "text", value: a.label, onChange: (i) => u(a.id, { label: i.target.value }) })
      ] }),
      /* @__PURE__ */ r.jsxs("div", { className: "form-field mt-2", children: [
        /* @__PURE__ */ r.jsx("label", { children: "Placeholder" }),
        /* @__PURE__ */ r.jsx("input", { type: "text", value: a.placeholder, onChange: (i) => u(a.id, { placeholder: i.target.value }) })
      ] }),
      /* @__PURE__ */ r.jsxs("div", { className: "form-field mt-2", children: [
        /* @__PURE__ */ r.jsx("label", { children: "Required" }),
        /* @__PURE__ */ r.jsxs(
          "select",
          {
            id: "required",
            defaultValue: a.required ? "Yes" : "No",
            onChange: (i) => u(a.id, { required: A(i.target.value) }),
            children: [
              /* @__PURE__ */ r.jsx("option", { value: "Yes", children: "Yes" }),
              /* @__PURE__ */ r.jsx("option", { value: "No", children: "No" })
            ]
          }
        )
      ] })
    ] })
  ] }) }, a.id);
}, Nr = ({ field: a, onRemoveField: v, onEditField: u }) => {
  var b, h;
  const [j, p] = w(!1), [i, y] = w(""), R = () => {
    if (i.trim() !== "") {
      const n = [...a.options || [], i];
      u(a.id, { options: n }), y("");
    }
  }, c = (n) => {
    var O;
    const o = (O = a.options) == null ? void 0 : O.filter(($, T) => T !== n);
    u(a.id, { options: o });
  };
  return /* @__PURE__ */ r.jsx("div", { className: a.className, children: /* @__PURE__ */ r.jsxs("div", { className: "form-element frm-element", children: [
    /* @__PURE__ */ r.jsxs("label", { children: [
      a.label,
      " ",
      a.required ? "*" : ""
    ] }),
    /* @__PURE__ */ r.jsxs("select", { defaultValue: a.value, required: a.required, children: [
      /* @__PURE__ */ r.jsx("option", { value: "", disabled: !0, children: a.placeholder }),
      (b = a.options) == null ? void 0 : b.map((n, o) => /* @__PURE__ */ r.jsx("option", { value: n, children: n }, o))
    ] }),
    /* @__PURE__ */ r.jsxs("div", { className: "action-btns", children: [
      /* @__PURE__ */ r.jsx(
        "button",
        {
          className: "frm-btn-red",
          onClick: () => {
            v(a.id), p(!1);
          },
          children: /* @__PURE__ */ r.jsx("i", { className: "fa fa-trash" })
        }
      ),
      /* @__PURE__ */ r.jsx("button", { className: "frm-btn-blue", onClick: () => p(!j), children: /* @__PURE__ */ r.jsx("i", { className: "fa fa-pencil" }) })
    ] }),
    j && /* @__PURE__ */ r.jsxs("div", { className: "edit-form", children: [
      /* @__PURE__ */ r.jsxs("div", { className: "form-field", children: [
        /* @__PURE__ */ r.jsx("label", { children: "Label" }),
        /* @__PURE__ */ r.jsx(
          "input",
          {
            type: "text",
            value: a.label,
            onChange: (n) => u(a.id, { label: n.target.value })
          }
        )
      ] }),
      /* @__PURE__ */ r.jsxs("div", { className: "form-field mt-2", children: [
        /* @__PURE__ */ r.jsx("label", { children: "Placeholder" }),
        /* @__PURE__ */ r.jsx(
          "input",
          {
            type: "text",
            value: a.placeholder,
            onChange: (n) => u(a.id, { placeholder: n.target.value })
          }
        )
      ] }),
      /* @__PURE__ */ r.jsxs("div", { className: "form-field mt-2", children: [
        /* @__PURE__ */ r.jsx("label", { children: "Required" }),
        /* @__PURE__ */ r.jsxs(
          "select",
          {
            id: "required",
            defaultValue: a.required ? "Yes" : "No",
            onChange: (n) => u(a.id, { required: A(n.target.value) }),
            children: [
              /* @__PURE__ */ r.jsx("option", { value: "Yes", children: "Yes" }),
              /* @__PURE__ */ r.jsx("option", { value: "No", children: "No" })
            ]
          }
        )
      ] }),
      /* @__PURE__ */ r.jsxs("div", { className: "form-field mt-3", children: [
        /* @__PURE__ */ r.jsx("div", { className: "add-option ", children: /* @__PURE__ */ r.jsxs(
          "form",
          {
            className: "flex",
            onSubmit: (n) => {
              n.preventDefault(), R();
            },
            children: [
              /* @__PURE__ */ r.jsx(
                "input",
                {
                  type: "text",
                  value: i,
                  onChange: (n) => y(n.target.value),
                  placeholder: "New option"
                }
              ),
              /* @__PURE__ */ r.jsx("button", { type: "submit", className: "btn-blue", children: /* @__PURE__ */ r.jsx("i", { className: "fa fa-plus" }) })
            ]
          }
        ) }),
        /* @__PURE__ */ r.jsxs("div", { className: "mt-3", children: [
          /* @__PURE__ */ r.jsx("label", { children: "Options" }),
          /* @__PURE__ */ r.jsx("ul", { className: "option-list", children: (h = a.options) == null ? void 0 : h.map((n, o) => /* @__PURE__ */ r.jsxs("li", { className: "option-item", children: [
            /* @__PURE__ */ r.jsx("div", { className: "option-label", children: n }),
            /* @__PURE__ */ r.jsx(
              "button",
              {
                style: { width: "30px" },
                className: "frm-btn-red",
                onClick: () => c(o),
                children: /* @__PURE__ */ r.jsx("i", { className: "fa fa-trash" })
              }
            )
          ] }, o)) })
        ] })
      ] })
    ] })
  ] }) }, a.id);
}, gr = ({ field: a, onRemoveField: v, onEditField: u }) => {
  var b, h;
  const [j, p] = w(!1), [i, y] = w(""), R = () => {
    if (i.trim() !== "") {
      const n = [...a.options || [], i];
      u(a.id, { options: n }), y("");
    }
  }, c = (n) => {
    var O;
    const o = (O = a.options) == null ? void 0 : O.filter(($, T) => T !== n);
    u(a.id, { options: o });
  };
  return /* @__PURE__ */ r.jsx("div", { className: a.className, children: /* @__PURE__ */ r.jsxs("div", { className: "form-element frm-element", children: [
    /* @__PURE__ */ r.jsxs("label", { children: [
      a.label,
      " ",
      a.required ? "*" : ""
    ] }),
    /* @__PURE__ */ r.jsx("div", { className: "options", children: (b = a.options) == null ? void 0 : b.map((n, o) => /* @__PURE__ */ r.jsxs("div", { className: "option-item", children: [
      /* @__PURE__ */ r.jsx("input", { type: "checkbox", id: `${a.id}-${o}`, name: a.label }),
      /* @__PURE__ */ r.jsx("label", { htmlFor: `${a.id}-${o}`, children: n })
    ] }, o)) }),
    /* @__PURE__ */ r.jsxs("div", { className: "action-btns", children: [
      /* @__PURE__ */ r.jsx(
        "button",
        {
          className: "frm-btn-red",
          onClick: () => {
            v(a.id), p(!1);
          },
          children: /* @__PURE__ */ r.jsx("i", { className: "fa fa-trash" })
        }
      ),
      /* @__PURE__ */ r.jsx("button", { className: "frm-btn-blue", onClick: () => p(!j), children: /* @__PURE__ */ r.jsx("i", { className: "fa fa-pencil" }) })
    ] }),
    j && /* @__PURE__ */ r.jsxs("div", { className: "edit-form", children: [
      /* @__PURE__ */ r.jsxs("div", { className: "form-field", children: [
        /* @__PURE__ */ r.jsx("label", { children: "Label" }),
        /* @__PURE__ */ r.jsx(
          "input",
          {
            type: "text",
            value: a.label,
            onChange: (n) => u(a.id, { label: n.target.value })
          }
        )
      ] }),
      /* @__PURE__ */ r.jsxs("div", { className: "form-field mt-2", children: [
        /* @__PURE__ */ r.jsx("label", { children: "Required" }),
        /* @__PURE__ */ r.jsxs(
          "select",
          {
            id: "required",
            defaultValue: a.required ? "Yes" : "No",
            onChange: (n) => u(a.id, { required: A(n.target.value) }),
            children: [
              /* @__PURE__ */ r.jsx("option", { value: "Yes", children: "Yes" }),
              /* @__PURE__ */ r.jsx("option", { value: "No", children: "No" })
            ]
          }
        )
      ] }),
      /* @__PURE__ */ r.jsxs("div", { className: "form-field mt-3", children: [
        /* @__PURE__ */ r.jsx("div", { className: "add-option flex", children: /* @__PURE__ */ r.jsxs(
          "form",
          {
            className: "flex",
            onSubmit: (n) => {
              n.preventDefault(), R();
            },
            children: [
              /* @__PURE__ */ r.jsx(
                "input",
                {
                  type: "text",
                  value: i,
                  onChange: (n) => y(n.target.value),
                  placeholder: "New option"
                }
              ),
              /* @__PURE__ */ r.jsx("button", { type: "submit", className: "btn-blue", children: /* @__PURE__ */ r.jsx("i", { className: "fa fa-plus" }) })
            ]
          }
        ) }),
        /* @__PURE__ */ r.jsxs("div", { className: "mt-3", children: [
          /* @__PURE__ */ r.jsx("label", { children: "Options" }),
          /* @__PURE__ */ r.jsx("ul", { className: "option-list", children: (h = a.options) == null ? void 0 : h.map((n, o) => /* @__PURE__ */ r.jsxs("li", { className: "option-item", children: [
            /* @__PURE__ */ r.jsx("div", { className: "option-label", children: n }),
            /* @__PURE__ */ r.jsx(
              "button",
              {
                style: { width: "30px" },
                className: "frm-btn-red",
                onClick: () => c(o),
                children: /* @__PURE__ */ r.jsx("i", { className: "fa fa-trash" })
              }
            )
          ] }, o)) })
        ] })
      ] })
    ] })
  ] }) }, a.id);
}, yr = ({ field: a, onRemoveField: v, onEditField: u }) => {
  var b, h;
  const [j, p] = w(!1), [i, y] = w(""), R = () => {
    if (i.trim() !== "") {
      const n = [...a.options || [], i];
      u(a.id, { options: n }), y("");
    }
  }, c = (n) => {
    var O;
    const o = (O = a.options) == null ? void 0 : O.filter(($, T) => T !== n);
    u(a.id, { options: o });
  };
  return /* @__PURE__ */ r.jsx("div", { className: a.className, children: /* @__PURE__ */ r.jsxs("div", { className: "form-element frm-element", children: [
    /* @__PURE__ */ r.jsxs("label", { children: [
      a.label,
      " ",
      a.required ? "*" : ""
    ] }),
    /* @__PURE__ */ r.jsx("div", { children: (b = a.options) == null ? void 0 : b.map((n, o) => /* @__PURE__ */ r.jsxs("div", { className: "options", children: [
      /* @__PURE__ */ r.jsx(
        "input",
        {
          type: "radio",
          id: `${a.id}-${o}`,
          name: a.label,
          value: n,
          required: a.required
        }
      ),
      /* @__PURE__ */ r.jsx("label", { htmlFor: `${a.id}-${o}`, children: n })
    ] }, o)) }),
    /* @__PURE__ */ r.jsxs("div", { className: "action-btns", children: [
      /* @__PURE__ */ r.jsx(
        "button",
        {
          className: "frm-btn-red",
          onClick: () => {
            v(a.id), p(!1);
          },
          children: /* @__PURE__ */ r.jsx("i", { className: "fa fa-trash" })
        }
      ),
      /* @__PURE__ */ r.jsx("button", { className: "frm-btn-blue", onClick: () => p(!j), children: /* @__PURE__ */ r.jsx("i", { className: "fa fa-pencil" }) })
    ] }),
    j && /* @__PURE__ */ r.jsxs("div", { className: "edit-form", children: [
      /* @__PURE__ */ r.jsxs("div", { className: "form-field", children: [
        /* @__PURE__ */ r.jsx("label", { children: "Label" }),
        /* @__PURE__ */ r.jsx(
          "input",
          {
            type: "text",
            value: a.label,
            onChange: (n) => u(a.id, { label: n.target.value })
          }
        )
      ] }),
      /* @__PURE__ */ r.jsxs("div", { className: "form-field mt-2", children: [
        /* @__PURE__ */ r.jsx("label", { children: "Required" }),
        /* @__PURE__ */ r.jsxs(
          "select",
          {
            id: "required",
            defaultValue: a.required ? "Yes" : "No",
            onChange: (n) => u(a.id, { required: A(n.target.value) }),
            children: [
              /* @__PURE__ */ r.jsx("option", { value: "Yes", children: "Yes" }),
              /* @__PURE__ */ r.jsx("option", { value: "No", children: "No" })
            ]
          }
        )
      ] }),
      /* @__PURE__ */ r.jsxs("div", { className: "form-field mt-3", children: [
        /* @__PURE__ */ r.jsx("div", { className: "add-option ", children: /* @__PURE__ */ r.jsxs(
          "form",
          {
            className: "flex",
            onSubmit: (n) => {
              n.preventDefault(), R();
            },
            children: [
              /* @__PURE__ */ r.jsx(
                "input",
                {
                  type: "text",
                  value: i,
                  onChange: (n) => y(n.target.value),
                  placeholder: "New option"
                }
              ),
              /* @__PURE__ */ r.jsx("button", { type: "submit", className: "btn-blue", children: /* @__PURE__ */ r.jsx("i", { className: "fa fa-plus" }) })
            ]
          }
        ) }),
        /* @__PURE__ */ r.jsxs("div", { className: "mt-3", children: [
          /* @__PURE__ */ r.jsx("label", { children: "Options" }),
          /* @__PURE__ */ r.jsx("ul", { className: "option-list", children: (h = a.options) == null ? void 0 : h.map((n, o) => /* @__PURE__ */ r.jsxs("li", { className: "option-item", children: [
            /* @__PURE__ */ r.jsx("div", { className: "option-label", children: n }),
            /* @__PURE__ */ r.jsx(
              "button",
              {
                style: { width: "30px" },
                className: "frm-btn-red",
                onClick: () => c(o),
                children: /* @__PURE__ */ r.jsx("i", { className: "fa fa-trash" })
              }
            )
          ] }, o)) })
        ] })
      ] })
    ] })
  ] }) }, a.id);
}, Rr = ({ field: a, onRemoveField: v, onEditField: u }) => {
  var h;
  const [j, p] = w(!1), [i, y] = w(""), R = [".jpg", ".png", ".pdf", ".doc", ".docx"], c = () => {
    var n;
    i && !((n = a.options) != null && n.includes(i)) && (u(a.id, { options: [...a.options || [], i] }), y(""));
  }, b = (n) => {
    const o = [...a.options || []];
    o.splice(n, 1), u(a.id, { options: o });
  };
  return /* @__PURE__ */ r.jsx("div", { className: a.className, children: /* @__PURE__ */ r.jsxs("div", { className: "form-element frm-element", children: [
    /* @__PURE__ */ r.jsxs("div", { className: "file-upload-container", children: [
      /* @__PURE__ */ r.jsxs("label", { className: "file-label", children: [
        a.label,
        " ",
        a.required ? "*" : ""
      ] }),
      /* @__PURE__ */ r.jsxs("div", { className: "file-upload-box", onClick: () => {
        var n;
        return (n = document.getElementById(`file-input-${a.id}`)) == null ? void 0 : n.click();
      }, children: [
        /* @__PURE__ */ r.jsx("p", { className: "file-upload-text", children: "Click to upload or drag and drop a file here" }),
        /* @__PURE__ */ r.jsx("button", { type: "button", className: "file-upload-button", children: "Choose File" }),
        /* @__PURE__ */ r.jsx(
          "input",
          {
            type: "file",
            id: `file-input-${a.id}`,
            accept: (a.options || []).join(","),
            className: "file-input-hidden",
            required: a.required,
            onChange: (n) => console.log(n.target.files)
          }
        )
      ] })
    ] }),
    /* @__PURE__ */ r.jsxs("div", { className: "action-btns", children: [
      /* @__PURE__ */ r.jsx(
        "button",
        {
          className: "frm-btn-red",
          onClick: () => {
            v(a.id), p(!1);
          },
          children: /* @__PURE__ */ r.jsx("i", { className: "fa fa-trash" })
        }
      ),
      /* @__PURE__ */ r.jsx("button", { className: "frm-btn-blue", onClick: () => p(!j), children: /* @__PURE__ */ r.jsx("i", { className: "fa fa-pencil" }) })
    ] }),
    j && /* @__PURE__ */ r.jsxs("div", { className: "edit-form", children: [
      /* @__PURE__ */ r.jsxs("div", { className: "form-field", children: [
        /* @__PURE__ */ r.jsx("label", { children: "Label" }),
        /* @__PURE__ */ r.jsx(
          "input",
          {
            type: "text",
            value: a.label,
            onChange: (n) => u(a.id, { label: n.target.value })
          }
        )
      ] }),
      /* @__PURE__ */ r.jsxs("div", { className: "form-field mt-2", children: [
        /* @__PURE__ */ r.jsx("label", { children: "Required" }),
        /* @__PURE__ */ r.jsxs(
          "select",
          {
            id: "required",
            defaultValue: a.required ? "Yes" : "No",
            onChange: (n) => u(a.id, { required: A(n.target.value) }),
            children: [
              /* @__PURE__ */ r.jsx("option", { value: "Yes", children: "Yes" }),
              /* @__PURE__ */ r.jsx("option", { value: "No", children: "No" })
            ]
          }
        )
      ] }),
      /* @__PURE__ */ r.jsxs("div", { className: "form-field mt-3", children: [
        /* @__PURE__ */ r.jsxs("div", { className: "add-option flex", children: [
          /* @__PURE__ */ r.jsxs(
            "select",
            {
              value: i,
              onChange: (n) => y(n.target.value),
              children: [
                /* @__PURE__ */ r.jsx("option", { value: "", children: "Select file type" }),
                R.map((n, o) => /* @__PURE__ */ r.jsx("option", { value: n, children: n }, o))
              ]
            }
          ),
          /* @__PURE__ */ r.jsx("button", { onClick: c, className: "btn-blue", children: /* @__PURE__ */ r.jsx("i", { className: "fa fa-plus" }) })
        ] }),
        /* @__PURE__ */ r.jsxs("div", { className: "mt-3", children: [
          /* @__PURE__ */ r.jsx("label", { children: "Options" }),
          /* @__PURE__ */ r.jsx("ul", { className: "option-list", children: (h = a.options) == null ? void 0 : h.map((n, o) => /* @__PURE__ */ r.jsxs("li", { className: "option-item", children: [
            /* @__PURE__ */ r.jsx("div", { className: "option-label", children: n }),
            /* @__PURE__ */ r.jsx(
              "button",
              {
                style: { width: "30px" },
                className: "frm-btn-red",
                onClick: () => b(o),
                children: /* @__PURE__ */ r.jsx("i", { className: "fa fa-trash" })
              }
            )
          ] }, o)) })
        ] })
      ] })
    ] })
  ] }) }, a.id);
}, Er = ({
  handleAddField: a
}) => /* @__PURE__ */ r.jsxs("div", { className: "frm-setting", children: [
  /* @__PURE__ */ r.jsx("h3", { children: "Form Elements" }),
  /* @__PURE__ */ r.jsx("div", { children: Object.keys(B).map((v) => /* @__PURE__ */ r.jsxs(
    "button",
    {
      title: B[v].label,
      className: "frm-btn",
      onClick: () => a(v),
      children: [
        /* @__PURE__ */ r.jsx("i", { className: B[v].icon }),
        /* @__PURE__ */ r.jsx("span", { className: "btn-label", children: B[v].label })
      ]
    },
    v
  )) })
] }), _r = ({ onGetFormJson: a }) => {
  const [v, u] = w([]), j = (c) => {
    u((b) => [
      ...b,
      { id: Date.now(), ...B[c] }
    ]);
  }, p = (c) => {
    u((b) => b.filter((h) => h.id !== c));
  }, i = (c, b) => {
    u(
      (h) => h.map(
        (n) => n.id === c ? { ...n, ...b } : n
      )
    );
  }, y = () => {
    a(v);
  }, R = (c) => {
    switch (c.type) {
      case "text":
      case "number":
      case "url":
      case "date":
      case "email":
        return /* @__PURE__ */ r.jsx(
          jr,
          {
            field: c,
            onRemoveField: p,
            onEditField: i
          }
        );
      case "textarea":
        return /* @__PURE__ */ r.jsx(
          br,
          {
            field: c,
            onRemoveField: p,
            onEditField: i
          }
        );
      case "select":
        return /* @__PURE__ */ r.jsx(
          Nr,
          {
            field: c,
            onRemoveField: p,
            onEditField: i
          }
        );
      case "checkbox":
        return /* @__PURE__ */ r.jsx(
          gr,
          {
            field: c,
            onRemoveField: p,
            onEditField: i
          }
        );
      case "radio":
        return /* @__PURE__ */ r.jsx(
          yr,
          {
            field: c,
            onRemoveField: p,
            onEditField: i
          }
        );
      case "file":
        return /* @__PURE__ */ r.jsx(
          Rr,
          {
            field: c,
            onRemoveField: p,
            onEditField: i
          }
        );
      default:
        return null;
    }
  };
  return /* @__PURE__ */ r.jsxs("div", { className: "frm-container", children: [
    /* @__PURE__ */ r.jsxs("div", { className: "frm-row", children: [
      /* @__PURE__ */ r.jsx("div", { className: "frm-col-3 frm-element-section", children: /* @__PURE__ */ r.jsx(Er, { handleAddField: j }) }),
      /* @__PURE__ */ r.jsx("div", { className: "frm-col-9", children: /* @__PURE__ */ r.jsx("div", { className: "frm-form", children: v.length === 0 ? /* @__PURE__ */ r.jsx("div", { className: "center-message", children: /* @__PURE__ */ r.jsxs("div", { children: [
        /* @__PURE__ */ r.jsx("h2", { children: "Your Custom Form" }),
        /* @__PURE__ */ r.jsx("p", { children: "Start building your form by selecting elements from the left sidebar." }),
        /* @__PURE__ */ r.jsx("p", { children: "Click on fields to customize your layout, and adjust settings to fit your needs." })
      ] }) }) : v.map((c, b) => /* @__PURE__ */ r.jsx(pr, { children: R(c) }, b)) }) })
    ] }),
    /* @__PURE__ */ r.jsx("div", { className: "text-right mt-3", children: /* @__PURE__ */ r.jsx("button", { onClick: () => y(), className: "frm-btn btn-submit", children: "Save Changes" }) })
  ] });
};
export {
  _r as default
};
