import { Button, Loader, MediaOverlay, Text } from "@wix/design-system";
import { Link, StatusAlertFilled } from "@wix/wix-ui-icons-common";
import React, { useContext } from "react";
import { ModalServiceContext } from "./../../ricos-context/modal-context.js";
import { RicosContext } from "./../../ricos-context/ricos-context.js";
import { appEmbedConverter } from "./../app-embed-converter.js";
import { verticalEmbedModals } from "../constants.js";
import { InsertModal } from "../modals/insert-modal.js";
import { VerticalEmbedViewer } from "../viewer/vertical-embed-viewer.js";
import classes from "./component-scss.js";
const AppEmbed = ({ settings, node, editor }) => {
  const ricosNode = React.useMemo(
    () => appEmbedConverter.fromPm.convert(node.toJSON()),
    [node]
  );
  const { loading, error } = node.attrs;
  return /* @__PURE__ */ React.createElement(React.Fragment, null, loading && /* @__PURE__ */ React.createElement(VerticalEmbedLoading, null), error && /* @__PURE__ */ React.createElement(
    VerticalEmbedError,
    {
      editor,
      componentData: ricosNode.appEmbedData,
      settings,
      nodeId: node.attrs.id,
      error
    }
  ), !loading && !error && /* @__PURE__ */ React.createElement(
    VerticalEmbedViewer,
    {
      nodeId: node.attrs.id,
      componentData: ricosNode.appEmbedData,
      settings
    }
  ));
};
const VerticalEmbedLoading = () => {
  return /* @__PURE__ */ React.createElement("div", { className: classes.card }, /* @__PURE__ */ React.createElement("div", { className: classes.container }, /* @__PURE__ */ React.createElement("div", { className: classes.content }, /* @__PURE__ */ React.createElement(Loader, { size: "small" }))));
};
const VerticalEmbedError = ({
  editor,
  componentData,
  settings,
  nodeId,
  error = "NOT_FOUND"
}) => {
  const { t } = useContext(RicosContext);
  const modalService = useContext(ModalServiceContext);
  const handleReplace = () => {
    if (!editor || !modalService) {
      return;
    }
    modalService.openModal({
      id: verticalEmbedModals.replace,
      Component: InsertModal,
      componentProps: {
        modalId: verticalEmbedModals.replace,
        componentData,
        nodeId
      },
      layout: "floating",
      positioning: {
        referenceElement: editor.view.dom,
        placement: "bottom-start"
      },
      withTransition: true,
      enableDrag: true,
      dragHandleSelector: "[data-drag-handler]",
      disableArrowNavigation: true,
      onClickOutside: {
        on: "pointerup",
        handler: () => {
        }
      }
    });
  };
  const getErrorTranslations = () => {
    const isDeleted = error === "NOT_FOUND";
    switch (componentData.type) {
      case "PRODUCT":
        return {
          title: t(
            isDeleted ? "VerticalEmbed_Product_Error_Title" : "VerticalEmbed_Product_Fetch_Error_Title"
          ),
          subtitle: t(
            isDeleted ? "VerticalEmbed_Product_Error_Subtitle" : "VerticalEmbed_Product_Fetch_Error_Subtitle"
          )
        };
      case "EVENT":
        return {
          title: t(
            isDeleted ? "VerticalEmbed_Event_Error_Title" : "VerticalEmbed_Event_Fetch_Error_Title"
          ),
          subtitle: t(
            isDeleted ? "VerticalEmbed_Event_Error_Subtitle" : "VerticalEmbed_Event_Fetch_Error_Subtitle"
          )
        };
      case "BOOKING":
        return {
          title: t(
            isDeleted ? "VerticalEmbed_Booking_Error_Title" : "VerticalEmbed_Booking_Fetch_Error_Title"
          ),
          subtitle: t(
            isDeleted ? "VerticalEmbed_Booking_Error_Subtitle" : "VerticalEmbed_Booking_Fetch_Error_Subtitle"
          )
        };
      default:
        return {
          title: t(isDeleted ? "VerticalEmbed_Error_Title" : "VerticalEmbed_Fetch_Error_Title"),
          subtitle: t(
            isDeleted ? "VerticalEmbed_Error_Subtitle" : "VerticalEmbed_Fetch_Error_Subtitle"
          )
        };
    }
  };
  const errorTranslations = getErrorTranslations();
  return /* @__PURE__ */ React.createElement(
    MediaOverlay,
    {
      skin: "dark",
      media: /* @__PURE__ */ React.createElement(
        VerticalEmbedViewer,
        {
          nodeId,
          componentData,
          settings,
          helpers: {}
        }
      )
    },
    /* @__PURE__ */ React.createElement(MediaOverlay.Content, { visible: "always" }, /* @__PURE__ */ React.createElement("div", { className: classes.overlay }, /* @__PURE__ */ React.createElement("div", { className: classes.errorContainer }, /* @__PURE__ */ React.createElement("div", { className: classes.errorInfo }, /* @__PURE__ */ React.createElement("div", { className: classes.errorIcon }, /* @__PURE__ */ React.createElement(StatusAlertFilled, { color: "white" })), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Text, { light: true, weight: "bold" }, errorTranslations.title), /* @__PURE__ */ React.createElement("br", null), /* @__PURE__ */ React.createElement(Text, { light: true }, errorTranslations.subtitle))), editor && /* @__PURE__ */ React.createElement(Button, { prefixIcon: /* @__PURE__ */ React.createElement(Link, null), priority: "secondary", onClick: handleReplace }, t("VerticalEmbed_Error_Button")))))
  );
};
export {
  AppEmbed
};
//# sourceMappingURL=component.js.map
