'use strict';

const jsxRuntime = require('react/jsx-runtime');
const button = require('../../../../../../../ui/src/components/button.cjs');
const form = require('../../../../../../../ui/src/components/form.cjs');
const input = require('../../../../../../../ui/src/components/input.cjs');
const context = require('@btst/stack/context');
const LucideIcons = require('lucide-react');
const React = require('react');
const sonner = require('sonner');
const index = require('../../localization/index.cjs');

function FeaturedImageField({
  isRequired,
  value,
  onChange,
  setFeaturedImageUploading
}) {
  const fileInputRef = React.useRef(null);
  const [isUploading, setIsUploading] = React.useState(false);
  const { uploadImage, Image, localization } = context.usePluginOverrides("blog", { localization: index.BLOG_LOCALIZATION });
  const ImageComponent = Image ? Image : DefaultImage;
  const handleImageUpload = async (event) => {
    const file = event.target.files?.[0];
    if (!file) return;
    if (!file.type.startsWith("image/")) {
      sonner.toast.error(localization.BLOG_FORMS_FEATURED_IMAGE_ERROR_NOT_IMAGE);
      return;
    }
    if (file.size > 4 * 1024 * 1024) {
      sonner.toast.error(localization.BLOG_FORMS_FEATURED_IMAGE_ERROR_TOO_LARGE);
      return;
    }
    try {
      setIsUploading(true);
      setFeaturedImageUploading(true);
      const url = await uploadImage(file);
      onChange(url);
      sonner.toast.success(localization.BLOG_FORMS_FEATURED_IMAGE_TOAST_SUCCESS);
    } catch (error) {
      sonner.toast.error(localization.BLOG_FORMS_FEATURED_IMAGE_TOAST_FAILURE);
      console.error("Failed to upload image:", error);
      sonner.toast.error(localization.BLOG_FORMS_FEATURED_IMAGE_TOAST_FAILURE);
    } finally {
      setIsUploading(false);
      setFeaturedImageUploading(false);
    }
  };
  return /* @__PURE__ */ jsxRuntime.jsxs(form.FormItem, { className: "flex flex-col", children: [
    /* @__PURE__ */ jsxRuntime.jsxs(form.FormLabel, { children: [
      localization.BLOG_FORMS_FEATURED_IMAGE_LABEL,
      isRequired && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-destructive", children: [
        " ",
        localization.BLOG_FORMS_FEATURED_IMAGE_REQUIRED_ASTERISK
      ] })
    ] }),
    /* @__PURE__ */ jsxRuntime.jsx(form.FormControl, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
        /* @__PURE__ */ jsxRuntime.jsx(
          input.Input,
          {
            placeholder: localization.BLOG_FORMS_FEATURED_IMAGE_INPUT_PLACEHOLDER,
            value: value || "",
            onChange: (e) => onChange(e.target.value),
            disabled: isUploading
          }
        ),
        /* @__PURE__ */ jsxRuntime.jsx(
          button.Button,
          {
            type: "button",
            variant: "outline",
            onClick: () => fileInputRef.current?.click(),
            disabled: isUploading,
            children: isUploading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
              /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Loader2, { className: "mr-2 h-4 w-4 animate-spin" }),
              localization.BLOG_FORMS_FEATURED_IMAGE_UPLOADING_BUTTON
            ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
              /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Upload, { className: "mr-2 h-4 w-4" }),
              localization.BLOG_FORMS_FEATURED_IMAGE_UPLOAD_BUTTON
            ] })
          }
        )
      ] }),
      /* @__PURE__ */ jsxRuntime.jsx(
        "input",
        {
          ref: fileInputRef,
          type: "file",
          accept: "image/*",
          onChange: handleImageUpload,
          className: "hidden"
        }
      ),
      isUploading && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-muted-foreground text-sm", children: [
        /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Loader2, { className: "h-4 w-4 animate-spin" }),
        localization.BLOG_FORMS_FEATURED_IMAGE_UPLOADING_TEXT
      ] }),
      value && !isUploading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsx(
        ImageComponent,
        {
          src: value,
          alt: localization.BLOG_FORMS_FEATURED_IMAGE_PREVIEW_ALT,
          className: "h-auto w-full max-w-xs rounded-md border",
          width: 400,
          height: 400
        }
      ) })
    ] }) }),
    /* @__PURE__ */ jsxRuntime.jsx(form.FormDescription, {}),
    /* @__PURE__ */ jsxRuntime.jsx(form.FormMessage, {})
  ] });
}
function DefaultImage({
  src,
  alt,
  className,
  width,
  height
}) {
  return /* @__PURE__ */ jsxRuntime.jsx(
    "img",
    {
      src,
      alt,
      className,
      width,
      height
    }
  );
}

exports.FeaturedImageField = FeaturedImageField;
