import { jsxs, jsx } from 'react/jsx-runtime';
import * as React from 'react';
import { Button } from '../../../button.mjs';
import { Label } from '../../../label.mjs';
import { Input } from '../../../input.mjs';

const ImageEditBlock = ({
  editor,
  close
}) => {
  const fileInputRef = React.useRef(null);
  const [link, setLink] = React.useState("");
  const handleClick = React.useCallback(() => {
    fileInputRef.current?.click();
  }, []);
  const handleFile = React.useCallback(
    async (e) => {
      const files = e.target.files;
      if (!files?.length) return;
      const insertImages = async () => {
        const contentBucket = [];
        const filesArray = Array.from(files);
        for (const file of filesArray) {
          contentBucket.push({ src: file });
        }
        editor.commands.setImages(contentBucket);
      };
      await insertImages();
      close();
    },
    [editor, close]
  );
  const handleSubmit = React.useCallback(
    (e) => {
      e.preventDefault();
      e.stopPropagation();
      if (link) {
        editor.commands.setImages([{ src: link }]);
        close();
      }
    },
    [editor, link, close]
  );
  return /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "space-y-6", children: [
    /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
      /* @__PURE__ */ jsx(Label, { htmlFor: "image-link", children: "Attach an image link" }),
      /* @__PURE__ */ jsxs("div", { className: "flex", children: [
        /* @__PURE__ */ jsx(
          Input,
          {
            id: "image-link",
            type: "url",
            required: true,
            placeholder: "https://example.com",
            value: link,
            className: "grow",
            onChange: (e) => setLink(e.target.value)
          }
        ),
        /* @__PURE__ */ jsx(Button, { type: "submit", className: "ml-2", children: "Submit" })
      ] })
    ] }),
    /* @__PURE__ */ jsx(Button, { type: "button", className: "w-full", onClick: handleClick, children: "Upload from your computer" }),
    /* @__PURE__ */ jsx(
      "input",
      {
        type: "file",
        accept: "image/*",
        ref: fileInputRef,
        multiple: true,
        className: "hidden",
        onChange: handleFile
      }
    )
  ] });
};

export { ImageEditBlock, ImageEditBlock as default };
