"use client";
'use strict';

const jsxRuntime = require('react/jsx-runtime');
const React = require('react');
const sonner = require('sonner');
const input = require('../../../../../../../ui/src/components/input.cjs');
const button = require('../../../../../../../ui/src/components/button.cjs');
const form = require('../../../../../../../ui/src/components/form.cjs');
const LucideIcons = require('lucide-react');
const label = require('../../../../../../../ui/src/components/auto-form/common/label.cjs');
const tooltip = require('../../../../../../../ui/src/components/auto-form/common/tooltip.cjs');

function CMSFileUpload({
  label: label$1,
  isRequired,
  fieldConfigItem,
  fieldProps,
  field,
  uploadImage
}) {
  const {
    showLabel: _showLabel,
    value: _value,
    ...safeFieldProps
  } = fieldProps;
  const showLabel = _showLabel === void 0 ? true : _showLabel;
  const [isUploading, setIsUploading] = React.useState(false);
  const [previewUrl, setPreviewUrl] = React.useState(
    field.value || null
  );
  React.useEffect(() => {
    const normalizedValue = field.value || null;
    if (normalizedValue !== previewUrl) {
      setPreviewUrl(normalizedValue);
    }
  }, [field.value, previewUrl]);
  const handleFileChange = React.useCallback(
    async (e) => {
      const file = e.target.files?.[0];
      if (!file) return;
      if (!file.type.startsWith("image/")) {
        sonner.toast.error("Please select an image file");
        return;
      }
      setIsUploading(true);
      try {
        const url = await uploadImage(file);
        setPreviewUrl(url);
        field.onChange(url);
      } catch (error) {
        console.error("Image upload failed:", error);
        sonner.toast.error("Failed to upload image");
      } finally {
        setIsUploading(false);
      }
    },
    [field, uploadImage]
  );
  const handleRemove = React.useCallback(() => {
    setPreviewUrl(null);
    field.onChange("");
  }, [field]);
  return /* @__PURE__ */ jsxRuntime.jsxs(form.FormItem, { children: [
    showLabel && /* @__PURE__ */ jsxRuntime.jsx(
      label,
      {
        label: fieldConfigItem?.label || label$1,
        isRequired
      }
    ),
    !previewUrl && /* @__PURE__ */ jsxRuntime.jsx(form.FormControl, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
      /* @__PURE__ */ jsxRuntime.jsx(
        input.Input,
        {
          type: "file",
          accept: "image/*",
          ...safeFieldProps,
          onChange: handleFileChange,
          disabled: isUploading,
          className: "cursor-pointer",
          "data-testid": "image-upload-input"
        }
      ),
      isUploading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-background/80", children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Loader2, { className: "h-4 w-4 animate-spin" }) })
    ] }) }),
    previewUrl && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-20 w-20 overflow-hidden rounded-md border", children: /* @__PURE__ */ jsxRuntime.jsx(
        "img",
        {
          src: previewUrl,
          alt: "Preview",
          className: "h-full w-full object-cover",
          "data-testid": "image-preview"
        }
      ) }),
      /* @__PURE__ */ jsxRuntime.jsxs(
        button.Button,
        {
          type: "button",
          variant: "outline",
          size: "sm",
          onClick: handleRemove,
          className: "flex items-center gap-1",
          "data-testid": "remove-image-button",
          children: [
            /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Trash2, { className: "h-4 w-4" }),
            "Remove"
          ]
        }
      )
    ] }),
    /* @__PURE__ */ jsxRuntime.jsx(tooltip, { fieldConfigItem }),
    /* @__PURE__ */ jsxRuntime.jsx(form.FormMessage, {})
  ] });
}

exports.CMSFileUpload = CMSFileUpload;
