'use strict';
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
import { Button } from '../../../fd-component-toolbox/button/Button.js';
import { Icon, iconNames, iconSizes } from '../../../fd-component-toolbox/icon/Icon.js';
import { wellKnownPositions } from '../../../../base-repo/constants/tools-constants.js';
import { useEmptyRef } from '../../../../fd-toolbox/hooks/use-empty-ref.js';
import { imageActionLabels } from '../../constants/image-action-labels.js';
import { first } from '../../../../fd-toolbox/server/collections/single-funcs.js';

var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", {
  value,
  configurable: true
});
function EditImageDropdownMenu({
  id,
  onEdit,
  onDelete,
  imageUrl
}) {
  const ref = useEmptyRef();
  return /* @__PURE__ */jsxs(Fragment, {
    children: [/* @__PURE__ */jsxs("div", {
      className: "hover:bg-fd-accent relative flex size-full items-center justify-center rounded-full opacity-0 transition-all duration-300 hover:opacity-60 [&>svg]:size-5",
      children: [/* @__PURE__ */jsx(Button, {
        variant: "icon",
        className: "p-1",
        onClick: () => ref.current?.click(),
        tooltipText: imageUrl ? imageConst.change : imageConst.upload,
        tooltipSide: wellKnownPositions.bottom,
        tooltipClassName: "mt-4",
        children: /* @__PURE__ */jsx(Icon, {
          size: iconSizes.medium,
          name: iconNames.edit,
          color: "fd-secondary hover:block"
        })
      }), imageUrl && /* @__PURE__ */jsx(Button, {
        variant: "icon",
        className: "p-1",
        onClick: onDelete,
        tooltipText: imageActionLabels.delete,
        tooltipSide: "bottom",
        tooltipClassName: "mt-4",
        children: /* @__PURE__ */jsx(Icon, {
          size: iconSizes.medium,
          name: iconNames.eraser,
          color: "fd-secondary hover:block"
        })
      })]
    }), /* @__PURE__ */jsx("input", {
      ref,
      type: "file",
      className: "hidden",
      onChange: e => handleFileInputChange(e, onEdit),
      id
    })]
  });
}
__name(EditImageDropdownMenu, "EditImageDropdownMenu");
function handleFileInputChange(event, onEdit) {
  if (event.target.files) {
    onEdit?.(first(Array.from(event.target.files)));
    event.target.value = "";
  }
}
__name(handleFileInputChange, "handleFileInputChange");
const imageConst = {
  change: imageActionLabels.change,
  upload: imageActionLabels.upload
};

export { EditImageDropdownMenu };
