import { jsxs as d, jsx as c } from "react/jsx-runtime";
import { useRef as h, useCallback as j, useEffect as y } from "react";
import E from "react-dropzone";
import { noop as I } from "es-toolkit/compat";
import v from "../button/Button.js";
const l = (D) => {
  const {
    displayMode: n = "button",
    multiple: b = !0,
    label: O = "Select files",
    maxSize: P,
    onPick: i = I,
    className: k = "",
    accept: e,
    fullHeight: a = !1,
    children: p,
    ...g
  } = D, u = h(null), t = h(null), m = n === "full", L = m || n === "button", z = m || n === "dropzone", R = j(
    (o, s) => {
      const _ = e && Object.keys(e).some((r) => r.startsWith("image")) ? o.map((r) => Object.assign(r, { preview: URL.createObjectURL(r) })) : o;
      i(_, s);
    },
    [i, e]
  ), S = () => u.current?.open();
  return y(() => {
    t.current && a && t.current.querySelector(".FilePicker > div")?.setAttribute("class", "height-100pct");
  }, [a, t.current]), /* @__PURE__ */ d("div", { ref: t, className: "FilePicker", children: [
    L && /* @__PURE__ */ c(v, { onClick: S, className: k, children: O }),
    /* @__PURE__ */ c(
      E,
      {
        ...g,
        onDrop: R,
        accept: e,
        multiple: b,
        maxSize: P,
        ref: u,
        children: ({ getRootProps: o, getInputProps: s, isDragActive: f }) => /* @__PURE__ */ d("div", { ...o(), children: [
          /* @__PURE__ */ c("input", { ...s() }),
          z && p && p({ isDragActive: f })
        ] })
      }
    )
  ] });
};
l.DISPLAY_MODE_BUTTON = "button";
l.DISPLAY_MODE_DROPZONE = "dropzone";
l.DISPLAY_MODE_FULL = "full";
export {
  l as default
};
//# sourceMappingURL=FilePicker.js.map
