import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
import { Button } from '../../../../../../../ui/src/components/button.mjs';
import { FormItem, FormLabel, FormControl, FormDescription, FormMessage } from '../../../../../../../ui/src/components/form.mjs';
import { Input } from '../../../../../../../ui/src/components/input.mjs';
import { usePluginOverrides } from '@btst/stack/context';
import { Loader2, Upload } from 'lucide-react';
import { useRef, useState } from 'react';
import { toast } from 'sonner';
import { BLOG_LOCALIZATION } from '../../localization/index.mjs';

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

export { FeaturedImageField };
