'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const jsxRuntime = require('react/jsx-runtime');
const React = require('react');
const button = require('../../../button.cjs');
const label = require('../../../label.cjs');
const input = require('../../../input.cjs');

function _interopNamespaceCompat(e) {
  if (e && typeof e === 'object' && 'default' in e) return e;
  const n = Object.create(null);
  if (e) {
    for (const k in e) {
      n[k] = e[k];
    }
  }
  n.default = e;
  return n;
}

const React__namespace = /*#__PURE__*/_interopNamespaceCompat(React);

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

exports.ImageEditBlock = ImageEditBlock;
exports.default = ImageEditBlock;
