import { useEntity, BindingError, Entity } from "@contember/binding";
import { EditorPlaceholder, Box, ActionableBox, FieldSet } from "@contember/ui";
import { memo, useCallback } from "react";
import { Transforms } from "slate";
import { useSlateStatic, useSelected, ReactEditor } from "slate-react";
import { jsxDEV, Fragment } from "react/jsx-dev-runtime";
import { getDiscriminatedDatum } from "../../../discrimination/getDiscriminatedDatum.js";
import { getDiscriminatedBlock } from "../../../blocks/getDiscriminatedBlock.js";
import { BlockElement } from "../../baseEditor/BlockElement.js";
var _jsxFileName = "/__w/interface/interface/packages/admin/src/components/bindingFacade/richText/blockEditor/renderers/ReferenceElementRenderer.tsx";
const ReferenceElementRenderer = memo((props) => {
  const editor = useSlateStatic();
  const selected = useSelected();
  const referencedEntity = useEntity();
  const discriminationField = referencedEntity.getRelativeSingleField(props.referenceDiscriminationField);
  const selectedReference = getDiscriminatedDatum(props.editorReferenceBlocks, discriminationField)?.datum;
  if (!selectedReference) {
    throw new BindingError(`BlockEditor: Trying to render a reference with an undefined reference type.`);
  }
  const elementTemplate = selectedReference.template;
  const isEditable = elementTemplate !== void 0;
  const onContainerClick = useCallback((e) => {
    if (e.target === e.currentTarget) {
      const path = ReactEditor.findPath(editor, props.element);
      Transforms.select(editor, path);
    }
  }, [editor, props.element]);
  const onRemove = useCallback(() => {
    const path = ReactEditor.findPath(editor, props.element);
    Promise.resolve().then(() => {
      Transforms.removeNodes(editor, {
        at: path
      });
    });
  }, [editor, props.element]);
  let blockBody;
  let renderedBlock = selectedReference;
  let isFullWidth = true;
  if (elementTemplate !== void 0) {
    const contentTemplate = elementTemplate.blockContent;
    if (contentTemplate === void 0) {
      throw new BindingError(`BlockEditor: All block reference elements must at least use the BlockEditor.ContentOutlet component!

It appears that other BlockEditor._____ components have been used but the BlockEditor.ContentOutlet is missing or isn't at the very top level.`);
    }
    const placeholder = contentTemplate.value.placeholder;
    const showPlaceholder = placeholder !== void 0 && props.element.children.length === 1 && props.element.children[0]?.text === "";
    blockBody = /* @__PURE__ */ jsxDEV(Fragment, {
      children: [!!contentTemplate.nodeBefore && /* @__PURE__ */ jsxDEV("div", {
        contentEditable: false,
        children: contentTemplate.nodeBefore
      }, void 0, false, {
        fileName: _jsxFileName,
        lineNumber: 72,
        columnNumber: 38
      }, void 0), showPlaceholder ? /* @__PURE__ */ jsxDEV("div", {
        style: {
          position: "relative"
        },
        children: [/* @__PURE__ */ jsxDEV("div", {
          style: {
            position: "absolute",
            pointerEvents: "none"
          },
          children: /* @__PURE__ */ jsxDEV(EditorPlaceholder, {
            children: placeholder
          }, void 0, false, {
            fileName: _jsxFileName,
            lineNumber: 77,
            columnNumber: 9
          }, void 0)
        }, void 0, false, {
          fileName: _jsxFileName,
          lineNumber: 76,
          columnNumber: 8
        }, void 0), /* @__PURE__ */ jsxDEV("div", {
          children: props.children
        }, void 0, false, {
          fileName: _jsxFileName,
          lineNumber: 79,
          columnNumber: 8
        }, void 0)]
      }, void 0, true, {
        fileName: _jsxFileName,
        lineNumber: 75,
        columnNumber: 7
      }, void 0) : /* @__PURE__ */ jsxDEV("div", {
        children: props.children
      }, void 0, false, {
        fileName: _jsxFileName,
        lineNumber: 82,
        columnNumber: 7
      }, void 0), !!contentTemplate.nodeAfter && /* @__PURE__ */ jsxDEV("div", {
        contentEditable: false,
        children: contentTemplate.nodeAfter
      }, void 0, false, {
        fileName: _jsxFileName,
        lineNumber: 85,
        columnNumber: 37
      }, void 0)]
    }, void 0, true);
  } else if (props.embedReferenceDiscriminateBy !== void 0 && discriminationField.hasValue(props.embedReferenceDiscriminateBy)) {
    if (props.embedContentDiscriminationField === void 0 || props.embedHandlers === void 0 || props.embedSubBlocks === void 0) {
      throw new BindingError(`BlockEditor: Trying to render an embed element without all the correct settings. Check the related BlockEditor props.`);
    }
    const embedTypeDiscriminant = referencedEntity.getRelativeSingleField(props.embedContentDiscriminationField);
    const embedHandler = getDiscriminatedDatum(props.embedHandlers, embedTypeDiscriminant);
    const subBlock = getDiscriminatedBlock(props.embedSubBlocks, embedTypeDiscriminant);
    if (embedHandler === void 0) {
      throw new BindingError(`BlockEditor: Missing handler for embed of type '${embedTypeDiscriminant.value}'.`);
    }
    if (subBlock === void 0) {
      throw new BindingError(`BlockEditor: Missing Block for embed of type '${embedTypeDiscriminant.value}'.`);
    }
    isFullWidth = false;
    renderedBlock = subBlock.datum;
    blockBody = /* @__PURE__ */ jsxDEV("div", {
      style: {
        display: "flex"
      },
      children: /* @__PURE__ */ jsxDEV(EmbedElementRendererInner, {
        handler: embedHandler.datum
      }, void 0, false, {
        fileName: _jsxFileName,
        lineNumber: 120,
        columnNumber: 5
      }, void 0)
    }, void 0, false, {
      fileName: _jsxFileName,
      lineNumber: 115,
      columnNumber: 4
    }, void 0);
  } else {
    blockBody = renderedBlock.children;
  }
  const alternate = renderedBlock.alternate ? /* @__PURE__ */ jsxDEV(Box, {
    children: renderedBlock.alternate
  }, void 0, false, {
    fileName: _jsxFileName,
    lineNumber: 127,
    columnNumber: 46
  }, void 0) : void 0;
  const wrappedReference = /* @__PURE__ */ jsxDEV(Entity, {
    accessor: referencedEntity,
    children: /* @__PURE__ */ jsxDEV(ActionableBox, {
      editContents: alternate,
      onRemove,
      children: /* @__PURE__ */ jsxDEV(FieldSet, {
        heading: renderedBlock.label,
        isActive: selected && !isEditable,
        onClick: isEditable ? onContainerClick : void 0,
        children: blockBody
      }, void 0, false, {
        fileName: _jsxFileName,
        lineNumber: 131,
        columnNumber: 5
      }, void 0)
    }, void 0, false, {
      fileName: _jsxFileName,
      lineNumber: 130,
      columnNumber: 4
    }, void 0)
  }, void 0, false, {
    fileName: _jsxFileName,
    lineNumber: 129,
    columnNumber: 3
  }, void 0);
  return /* @__PURE__ */ jsxDEV(BlockElement, {
    element: props.element,
    attributes: props.attributes,
    withBoundaries: true,
    children: isEditable ? wrappedReference : /* @__PURE__ */ jsxDEV(Fragment, {
      children: [/* @__PURE__ */ jsxDEV("div", {
        contentEditable: false,
        "data-slate-editor": false,
        style: isFullWidth ? void 0 : {
          display: "inline-block"
        },
        children: wrappedReference
      }, void 0, false, {
        fileName: _jsxFileName,
        lineNumber: 149,
        columnNumber: 6
      }, void 0), props.children]
    }, void 0, true)
  }, void 0, false, {
    fileName: _jsxFileName,
    lineNumber: 143,
    columnNumber: 3
  }, void 0);
});
ReferenceElementRenderer.displayName = "ReferenceElementRenderer";
function EmbedElementRendererInner({
  handler
}) {
  return /* @__PURE__ */ jsxDEV(Fragment, {
    children: handler.renderEmbed()
  }, void 0, false);
}
export {
  ReferenceElementRenderer
};
//# sourceMappingURL=ReferenceElementRenderer.js.map
