// src/components/common/file-upload/file-upload.tsx
import { ArrowDownTray, XMark } from "@medusajs/icons";
import { IconButton, Text, clx } from "@medusajs/ui";
import { useRef, useState } from "react";

// src/lib/format-file-size.ts
var formatFileSize = (bytes) => {
  if (bytes === 0) return "0 B";
  const units = ["B", "KB", "MB", "GB"];
  const i = Math.floor(Math.log(bytes) / Math.log(1024));
  return `${(bytes / Math.pow(1024, i)).toFixed(2)} ${units[i]}`;
};

// src/components/common/file-upload/file-upload.tsx
import { jsx, jsxs } from "react/jsx-runtime";
var FileUpload = ({
  label,
  hint,
  multiple = true,
  hasError,
  formats,
  onUploaded,
  onRemove,
  uploadedImage = "",
  fileName,
  fileSize
}) => {
  const [isDragOver, setIsDragOver] = useState(false);
  const inputRef = useRef(null);
  const dropZoneRef = useRef(null);
  const handleOpenFileSelector = () => {
    inputRef.current?.click();
  };
  const handleDragEnter = (event) => {
    event.preventDefault();
    event.stopPropagation();
    const files = event.dataTransfer?.files;
    if (!files) {
      return;
    }
    setIsDragOver(true);
  };
  const handleDragLeave = (event) => {
    event.preventDefault();
    event.stopPropagation();
    if (!dropZoneRef.current || dropZoneRef.current.contains(event.relatedTarget)) {
      return;
    }
    setIsDragOver(false);
  };
  const handleUploaded = (files) => {
    if (!files) {
      return;
    }
    const fileList = Array.from(files);
    const fileObj = fileList.map((file) => {
      const id = Math.random().toString(36).substring(7);
      const previewUrl = URL.createObjectURL(file);
      return {
        id,
        url: previewUrl,
        file
      };
    });
    onUploaded(fileObj);
  };
  const handleDrop = (event) => {
    event.preventDefault();
    event.stopPropagation();
    setIsDragOver(false);
    handleUploaded(event.dataTransfer?.files);
  };
  const handleFileChange = async (event) => {
    handleUploaded(event.target.files);
  };
  const showFileRow = !multiple && uploadedImage;
  if (showFileRow) {
    return /* @__PURE__ */ jsxs("div", { children: [
      /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-component shadow-borders-base flex items-center gap-x-3 rounded-lg p-3", children: [
        /* @__PURE__ */ jsx("div", { className: "flex h-10 w-[30px] shrink-0 items-center justify-center overflow-hidden rounded-md", children: /* @__PURE__ */ jsx(
          "img",
          {
            src: uploadedImage,
            alt: fileName,
            className: "h-full w-full object-cover"
          }
        ) }),
        /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col", children: [
          /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", weight: "plus", children: fileName || "image" }),
          fileSize != null && /* @__PURE__ */ jsx(
            Text,
            {
              size: "small",
              leading: "compact",
              className: "text-ui-fg-subtle",
              children: formatFileSize(fileSize)
            }
          )
        ] }),
        onRemove && /* @__PURE__ */ jsx(
          IconButton,
          {
            type: "button",
            variant: "transparent",
            size: "small",
            onClick: onRemove,
            children: /* @__PURE__ */ jsx(XMark, {})
          }
        )
      ] }),
      /* @__PURE__ */ jsx(
        "input",
        {
          hidden: true,
          ref: inputRef,
          onChange: handleFileChange,
          type: "file",
          accept: formats.join(","),
          multiple: false
        }
      )
    ] });
  }
  return /* @__PURE__ */ jsxs("div", { children: [
    /* @__PURE__ */ jsxs(
      "button",
      {
        ref: dropZoneRef,
        type: "button",
        onClick: handleOpenFileSelector,
        onDrop: handleDrop,
        onDragOver: (e) => e.preventDefault(),
        onDragEnter: handleDragEnter,
        onDragLeave: handleDragLeave,
        className: clx(
          "bg-ui-bg-component border-ui-border-strong transition-fg group flex w-full flex-col items-center gap-y-2 rounded-lg border border-dashed p-8",
          "hover:border-ui-border-interactive focus:border-ui-border-interactive",
          "focus:shadow-borders-focus outline-none focus:border-solid",
          {
            "!border-ui-border-error": hasError,
            "!border-ui-border-interactive": isDragOver
          }
        ),
        children: [
          /* @__PURE__ */ jsxs("div", { className: "text-ui-fg-subtle group-disabled:text-ui-fg-disabled flex items-center gap-x-2", children: [
            /* @__PURE__ */ jsx(ArrowDownTray, {}),
            /* @__PURE__ */ jsx(Text, { children: label })
          ] }),
          !!hint && /* @__PURE__ */ jsx(
            Text,
            {
              size: "small",
              leading: "compact",
              className: "text-ui-fg-muted group-disabled:text-ui-fg-disabled",
              children: hint
            }
          )
        ]
      }
    ),
    /* @__PURE__ */ jsx(
      "input",
      {
        hidden: true,
        ref: inputRef,
        onChange: handleFileChange,
        type: "file",
        accept: formats.join(","),
        multiple
      }
    )
  ] });
};

export {
  formatFileSize,
  FileUpload
};
