'use strict';
'use client';
import { jsxs, jsx } from 'react/jsx-runtime';
import '../../../fd-component-toolbox/client/framework/index.js';
import { useState, useEffect } from 'react';
import { imageNotFoundUrl } from '../../../../fd-toolbox/constants/public-files.js';
import { EditImageActionMenu } from './EditImageActionMenu.js';
import { onEditImageUploadChange, getEditImageId, onDeleteImage } from './EditImage.funcs.js';
import { useEmptyRef } from '../../../../fd-toolbox/hooks/use-empty-ref.js';
import { firstOrUndefined } from '../../../../fd-toolbox/server/collections/single-funcs.js';
import { mediaConstants } from '../../constants/media-constants.js';
import FrameworkImage from 'next/image.js';

var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", {
  value,
  configurable: true
});
function EditImage({
  form,
  parentContextName,
  initialImageUrl,
  onChange
}) {
  const [imageUrl, setImageUrl] = useState();
  const ref = useEmptyRef();
  useEffect(() => setImageUrl(initialImageUrl), [form, setImageUrl, initialImageUrl]);
  const hasImageUrl = !!imageUrl;
  const imageSrc = hasImageUrl ? imageUrl : imageNotFoundUrl;
  const isProtectedBlobImage = imageSrc.startsWith(mediaConstants.blob);
  return /* @__PURE__ */jsxs("div", {
    className: "group relative m-1 size-16 overflow-visible rounded-full",
    children: [/* @__PURE__ */jsx("input", {
      ref,
      type: "file",
      className: "hidden",
      onChange: async e => onEditImageUploadChange(form, setImageUrl, onChange, firstOrUndefined(Array.from(e.target.files ?? [])))
    }), /* @__PURE__ */jsx(FrameworkImage, {
      id: getEditImageId(parentContextName),
      src: imageSrc,
      alt: "Resource Image",
      width: "64",
      height: "64",
      unoptimized: isProtectedBlobImage,
      className: "size-16 rounded-full object-cover object-center transition-all hover:blur-xs"
    }), /* @__PURE__ */jsx(EditImageActionMenu, {
      imageUrl,
      onChange: () => ref.current?.click(),
      onDelete: () => onDeleteImage(form, setImageUrl)
    })]
  });
}
__name(EditImage, "EditImage");
EditImage.displayName = "EditImage";

export { EditImage };
