import { Box, Divider, SidePanel } from "@wix/design-system";
import React, { useContext, useEffect, useMemo, useState } from "react";
import { RicosContext, ZIndexContext } from "./../../../ricos-context/index.js";
import { SitePagesFetchContext } from "./../../site-pages/site-pages-fetch-context.js";
import { unreachable } from "./../../uncreachable.js";
import { Panel, PanelHeader } from "./../../../ui-components/index.js";
import { MODAL_ROOT } from "../data-hooks/data-hooks.js";
import { AttributesDesktop } from "./attributes/attributes-desktop.js";
import { Footer } from "./footer.js";
import { NotPublishedWarning } from "./not-published-warning.js";
import { SectionDesktop } from "./section/section-desktop.js";
import { SitePages } from "./site-pages/site-pages.js";
import { TypeSelect } from "./type-select.js";
import { useLinkModalState } from "./use-link-modal-state.js";
import { WebAddress } from "./web-address.js";
const ModalDesktop = ({
  initialValue,
  enabledLinkTypes: enabledLinkTypesProp,
  onClose,
  onSave,
  onUnlink,
  onSaveMultiple
}) => {
  const { environment, t } = useContext(RicosContext);
  const { expireCache, preload, sitePublished, cache } = useContext(SitePagesFetchContext);
  const zIndexService = useContext(ZIndexContext);
  const [containerRef, setContainerRef] = useState(null);
  const {
    focusTarget,
    link,
    linkType,
    submitError,
    multipleSections,
    enabledLinkTypes,
    onChangeAttributes,
    onChangeWebAddress,
    onClickUnlink,
    onSelectPage,
    onSelectSection,
    setMultipleSections,
    onSelectType,
    onSubmit,
    onValidateWebAddress
  } = useLinkModalState({
    initialValue,
    onClose,
    onSave,
    onUnlink,
    onSaveMultiple,
    enabledLinkTypes: enabledLinkTypesProp
  });
  const autoCompletePopoverProps = useMemo(
    () => ({
      appendTo: (el) => el === containerRef,
      placement: "bottom-start",
      zIndex: zIndexService.getZIndex("DRAWER"),
      maxWidth: "252px"
    }),
    [containerRef, zIndexService]
  );
  const dropDownPopoverProps = useMemo(
    () => ({
      appendTo: (el) => el === containerRef,
      maxWidth: "252px",
      zIndex: zIndexService.getZIndex("DRAWER")
    }),
    [containerRef, zIndexService]
  );
  const tooltipProps = useMemo(
    () => ({
      appendTo: containerRef || void 0,
      flip: true,
      zIndex: zIndexService.getZIndex("TOOLTIP")
    }),
    [containerRef, zIndexService]
  );
  const showNotPublishedWarning = linkType !== "section" && linkType !== "web-address" && sitePublished === false;
  const showSitePages = environment === "businessManager";
  useEffect(() => {
    if (showSitePages) {
      preload();
      return expireCache;
    }
  }, []);
  return /* @__PURE__ */ React.createElement("div", { "data-hook": MODAL_ROOT, ref: setContainerRef }, /* @__PURE__ */ React.createElement(Panel, { maxHeight: 576, closeButtonProps: { onClick: onClose } }, /* @__PURE__ */ React.createElement(PanelHeader, { title: t("LinkSettings_Modal_Title") }), /* @__PURE__ */ React.createElement(SidePanel.Content, { noPadding: true }, /* @__PURE__ */ React.createElement("form", { onSubmit }, /* @__PURE__ */ React.createElement("input", { type: "submit", style: { display: "none" } }), /* @__PURE__ */ React.createElement(Box, { direction: "vertical", gap: "SP2", padding: "SP3" }, enabledLinkTypes && enabledLinkTypes.length === 1 ? null : /* @__PURE__ */ React.createElement(
    TypeSelect,
    {
      autoFocus: focusTarget === "type-select",
      dropDownPopoverProps,
      onSelect: onSelectType,
      showSitePages,
      t,
      type: linkType,
      enabledLinkTypes,
      cache
    }
  ), showNotPublishedWarning && /* @__PURE__ */ React.createElement(NotPublishedWarning, null), (() => {
    switch (linkType) {
      case "web-address":
        return /* @__PURE__ */ React.createElement(
          WebAddress,
          {
            autoFocus: focusTarget === "input",
            key: linkType,
            link,
            onChangeUrl: onChangeWebAddress,
            onValidateUrl: onValidateWebAddress,
            submitError,
            t
          }
        );
      case "section":
        return /* @__PURE__ */ React.createElement(
          SectionDesktop,
          {
            autoCompletePopoverProps,
            autoFocus: focusTarget === "input",
            dropDownPopoverProps,
            key: linkType,
            link,
            onSelect: onSelectSection,
            setMultipleSections,
            onSubmit,
            t,
            tooltipProps,
            multipleSections
          }
        );
      case "blogPost":
      case "staticPage":
      case "dynamicPage":
      case "storeProduct":
      case "storeCatalog":
        return /* @__PURE__ */ React.createElement(
          SitePages,
          {
            autoCompletePopoverProps,
            autoFocus: focusTarget === "input",
            key: linkType,
            link,
            linkType,
            onSelect: onSelectPage,
            onSubmit,
            tooltipProps,
            t
          }
        );
      default:
        unreachable(linkType);
    }
  })(), linkType !== "section" && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Divider, null), /* @__PURE__ */ React.createElement(
    AttributesDesktop,
    {
      link,
      onChange: onChangeAttributes,
      t,
      tooltipProps
    }
  ))))), /* @__PURE__ */ React.createElement(SidePanel.Footer, { showDivider: true }, /* @__PURE__ */ React.createElement(
    Footer,
    {
      onClickCancel: onClose,
      onClickSave: onSubmit,
      onClickUnlink,
      showUnlink: Boolean(initialValue?.url || initialValue?.anchor),
      t
    }
  ))));
};
export {
  ModalDesktop
};
//# sourceMappingURL=modal-desktop.js.map
