import { jsx as l, jsxs as N, Fragment as z } from "react/jsx-runtime";
import { c as k } from "./index.CfM2L_w0.js";
import { useCallback as P, useState as v, useMemo as y, useEffect as W } from "react";
import { a as J } from "./index.CfQlFjZU.js";
import { n as s } from "./index.B0wX8xO7.js";
import { a as K, u as Z } from "./useFileInput.CQ1JjjB6.js";
import "./ProgressActivity.DYLCzf8q.js";
import "./formInputIcon.module.CU3tuFAI.js";
import "./isEqual.Bk3xqtBB.js";
import { C as q } from "./CropImageModal.iXa14tEQ.js";
import { b as Y, O as ee, P as le } from "./index.dWlEA7uO.js";
import { S as te } from "./shared.EdGf6tcG.js";
import { B as ae } from "./Button.CpTwUWVr.js";
import { L as ne } from "./LoadingState.BcrOPPws.js";
const oe = "creator_item_a3hkR", ie = "creator_image_Jtg-u", re = "creator_fileIcon_QET-z", ce = "creator_deleteButton_K9bwZ", u = { item: oe, image: ie, fileIcon: re, deleteButton: ce }, se = "creator_emptyItem_1N2SR", de = { emptyItem: se }, j = ({ onClick: e, disabled: a }) => {
  const n = P(() => {
    a || e();
  }, [e, a]);
  return /* @__PURE__ */ l(
    "button",
    {
      className: k(u.item, de.emptyItem),
      onClick: n,
      "aria-label": "Add file",
      disabled: a,
      children: /* @__PURE__ */ l(Y, { size: 24 })
    }
  );
}, me = ({ file: e, onRemove: a, disabled: n }) => {
  const [o, r] = v(!1), c = y(() => o ? { display: "none" } : {}, [o]), d = () => {
    r(!0);
  };
  return W(() => {
    r(!1);
  }, [e.src]), /* @__PURE__ */ l(
    s,
    {
      value: e.uploading,
      then: /* @__PURE__ */ l("span", { className: u.item, "aria-label": `Uploading ${e.name}`, children: /* @__PURE__ */ l(ne, { type: "wheel", size: "small" }) }),
      otherwise: /* @__PURE__ */ N("span", { className: u.item, "aria-label": e.name, children: [
        /* @__PURE__ */ l(
          "img",
          {
            src: e.src,
            alt: e.name,
            className: u.image,
            style: c,
            onError: d,
            role: "presentation",
            "aria-hidden": !0
          }
        ),
        /* @__PURE__ */ l(
          s,
          {
            value: !n,
            then: /* @__PURE__ */ l(
              ae,
              {
                label: `Remove ${e.name}`,
                semantic: te.DANGER,
                size: "2xsmall",
                prefixIcon: /* @__PURE__ */ l(ee, { size: 24 }),
                className: u.deleteButton,
                onClick: a
              }
            )
          }
        ),
        /* @__PURE__ */ l(le, { size: 24, className: u.fileIcon })
      ] })
    }
  );
}, ue = "creator_upload_ONwG1", fe = "creator_uploadField_4Xgjw", he = "creator_active_euW3U", ge = "creator_disabled_QXH9m", pe = "creator_readOnly_tWEr0", Ce = "creator_error_Se4hX", _e = "creator_icon_vbyMg", Fe = "creator_multi_VvAOs", Ne = "creator_helper_6nwtI", ve = "creator_label_cB8cc", ye = "creator_fileName_FiMRl", i = { upload: ue, uploadField: fe, active: he, disabled: ge, readOnly: pe, error: Ce, icon: _e, multi: Fe, helper: Ne, label: ve, fileName: ye };
function be(e) {
  const a = (t) => t.allowCropping === !0, n = (t) => t.allowMultipleFiles === !0, o = (t) => t.allowMultipleFiles !== !0, { error: r, label: c, helper: d, placeholder: b, suggestedAllowedTypes: I } = e, f = e.disabled || e.readOnly, C = n(e) && e.maxFiles || 1 / 0, S = y(() => o(e) && (e.file?.uploading || e.uploading) ? "loading" : o(e) && e.file ? "filled" : n(e) && e.files?.length > 0 ? "multiple" : "empty", [e]);
  function h(t) {
    if (t.length === 0)
      return;
    if (n(e)) {
      const m = C - e.files.length;
      if (m - t.length <= 0) {
        e.onLimitReached?.(t.length, m);
        return;
      }
      e.onFilesAdd(t);
      return;
    }
    const p = t[0];
    e.onFileSelect(p), g(X(p));
  }
  const { component: A, openFileInput: w, clearFileInput: _ } = K({
    onFilesSelected: (t) => {
      h(t);
    },
    allowedTypes: I,
    allowMultipleFiles: e.allowMultipleFiles
  }), { dragging: U, onDragEnter: M, onDragLeave: R, handleDrop: E } = Z({
    onFileSelect: h
  }), [x, g] = v(!1), [F, B] = v(), [L, $] = v(), X = (t) => a(e) && t.type.includes("image"), G = (t, p) => {
    B(t), $(p);
  }, H = () => {
    !F || !L || !a(e) || (g(!1), e.onCropComplete(F, L));
  }, Q = () => {
    B(void 0), $(void 0), g(!1), D();
  }, D = P(
    (t) => {
      _(), o(e) ? e.onFileRemove() : n(e) && t !== void 0 && e.onFilesRemove(t);
    },
    [e, _]
  ), T = y(() => o(e) && e.file ? [e.file] : n(e) ? e.files || [] : [], [e]), V = y(() => {
    const t = o(e) && e.uploading;
    return T.map((m, O) => /* @__PURE__ */ l(
      me,
      {
        file: { ...m, uploading: m.uploading || t },
        onRemove: () => D(O),
        disabled: f
      },
      `${O}-${m.name}`
    ));
  }, [T, e, D, f]);
  return {
    label: c,
    helper: d,
    placeholder: b || "Upload a file",
    disabled: f,
    onDragEnter: M,
    onDragLeave: R,
    handleDrop: E,
    status: S,
    file: o(e) ? e.file : void 0,
    items: V,
    maxFiles: C,
    fileInputComponent: A,
    onBrowseButtonClick: w,
    uploadClassName: i.upload,
    uploadFieldClassName: k(i.uploadField, {
      [i.disabled]: e.disabled,
      [i.readOnly]: e.readOnly,
      [i.active]: U,
      [i.error]: r,
      [i.multi]: n(e)
    }),
    uploadFieldLabelClassName: i.label,
    uploadFieldHelperClassName: k(i.helper, {
      [i.error]: r
    }),
    showCropper: x,
    onCropChange: G,
    onCropCancelled: Q,
    onCropSubmit: H,
    cropAspectRatio: a(e) ? e.cropAspectRatio : void 0
  };
}
function Ie({
  label: e,
  helper: a,
  placeholder: n,
  disabled: o,
  status: r,
  file: c,
  items: d,
  maxFiles: b,
  onDragEnter: I,
  onDragLeave: f,
  handleDrop: C,
  fileInputComponent: S,
  onBrowseButtonClick: h,
  uploadClassName: A,
  uploadFieldClassName: w,
  uploadFieldLabelClassName: _,
  uploadFieldHelperClassName: U,
  showCropper: M,
  onCropCancelled: R,
  onCropChange: E,
  onCropSubmit: x,
  cropAspectRatio: g
}) {
  return /* @__PURE__ */ N("div", { className: A, children: [
    /* @__PURE__ */ l(
      s,
      {
        value: M && c,
        then: /* @__PURE__ */ l(
          q,
          {
            fileToCrop: c,
            onCropAreaChange: E,
            onComplete: x,
            onCancel: R,
            cropAspectRatio: g
          }
        )
      }
    ),
    /* @__PURE__ */ l(
      s,
      {
        value: e,
        then: /* @__PURE__ */ l("span", { className: _, children: e })
      }
    ),
    /* @__PURE__ */ N(
      "div",
      {
        className: w,
        onDragOver: (F) => F.preventDefault(),
        onDragEnter: I,
        onDragLeave: f,
        onDrop: C,
        tabIndex: 0,
        "data-testid": "drop-zone",
        children: [
          d,
          /* @__PURE__ */ l(
            s,
            {
              value: r,
              then: {
                empty: /* @__PURE__ */ N(z, { children: [
                  /* @__PURE__ */ l(j, { onClick: h, disabled: o }),
                  /* @__PURE__ */ l("span", { children: n })
                ] }),
                loading: /* @__PURE__ */ l(z, { children: /* @__PURE__ */ l("span", { className: i.fileName, children: "Uploading..." }) }),
                filled: /* @__PURE__ */ l(z, { children: /* @__PURE__ */ l("span", { className: i.fileName, children: c?.name }) }),
                multiple: /* @__PURE__ */ l(
                  s,
                  {
                    value: d.length < b && !o,
                    then: /* @__PURE__ */ l(j, { onClick: h })
                  }
                )
              }
            }
          )
        ]
      }
    ),
    /* @__PURE__ */ l(
      s,
      {
        value: a,
        then: /* @__PURE__ */ l("span", { className: U, children: a })
      }
    ),
    S
  ] });
}
const $e = J(Ie, be);
export {
  $e as U
};
