import { Box, FormField, SegmentedToggle } from "@wix/design-system";
import { LinkSmall, UploadExportSmall } from "@wix/wix-ui-icons-common";
import React, { useContext, useState } from "react";
import { ModalServiceContext, PluginsEventsContext, RicosContext } from "./../../ricos-context/index.js";
import { useBiNext } from "./../../_shared/bi-context-provider/bi-context-provider.js";
import { MEDIA_POPOVERS_TABS_NAMES_BI } from "./../../wix-rich-content-common/index.js";
import { Panel, PanelHeader } from "./../../ui-components/index.js";
import { INSERT_AUDIO_MODAL, INSERT_AUDIO_MODAL_SOURCE_TOGGLE } from "../data-hooks.js";
import { AUDIO_TYPE } from "../types.js";
import { AudioEmbed } from "./audio-embed.js";
import { AudioUpload } from "./audio-upload.js";
const SourceOptionValue = {
  EMBED: "embed",
  UPLOAD: "upload"
};
const InsertModal = ({
  nodeId,
  componentData,
  embedType,
  modalId
}) => {
  const { t } = useContext(RicosContext);
  const modalService = useContext(ModalServiceContext) || {};
  const pluginsEvents = useContext(PluginsEventsContext);
  const logBi = useBiNext({ pluginId: "audio", modalId, nodeId });
  const [selectedSource, setSelectedSource] = useState(
    embedType || componentData?.audio?.src?.url ? "embed" : "upload"
  );
  const onSourceToggleClick = (_, value) => {
    selectedSource !== value && pluginsEvents.publishPluginPopoverTabSwitch?.({
      pluginId: AUDIO_TYPE,
      buttonName: MEDIA_POPOVERS_TABS_NAMES_BI[value.toLowerCase()]
    });
    setSelectedSource(value);
    logBi({ dataHook: INSERT_AUDIO_MODAL_SOURCE_TOGGLE, value });
  };
  const closeModal = () => modalService.closeModal(modalId);
  return /* @__PURE__ */ React.createElement(
    Panel,
    {
      closeButtonProps: { onClick: closeModal },
      dataHook: INSERT_AUDIO_MODAL,
      height: "fit-content"
    },
    /* @__PURE__ */ React.createElement(PanelHeader, { title: t("Audio_Modal_Header_Title") }),
    /* @__PURE__ */ React.createElement(Box, { direction: "vertical", padding: "SP3", gap: "SP3" }, /* @__PURE__ */ React.createElement(FormField, { label: t("Audio_Modal_Toggle_Source_Label") }, /* @__PURE__ */ React.createElement(
      SegmentedToggle,
      {
        defaultSelected: selectedSource,
        size: "small",
        onClick: onSourceToggleClick,
        dataHook: INSERT_AUDIO_MODAL_SOURCE_TOGGLE
      },
      /* @__PURE__ */ React.createElement(SegmentedToggle.Button, { value: SourceOptionValue.EMBED, prefixIcon: /* @__PURE__ */ React.createElement(LinkSmall, null) }, t("MediaModal_Tabs_Embed")),
      /* @__PURE__ */ React.createElement(
        SegmentedToggle.Button,
        {
          value: SourceOptionValue.UPLOAD,
          prefixIcon: /* @__PURE__ */ React.createElement(UploadExportSmall, null)
        },
        t("MediaModal_Tabs_Upload")
      )
    )), selectedSource === "embed" && /* @__PURE__ */ React.createElement(AudioEmbed, { componentData, closeModal, logBi }), selectedSource === "upload" && /* @__PURE__ */ React.createElement(AudioUpload, { nodeId, closeModal, logBi }))
  );
};
export {
  InsertModal
};
//# sourceMappingURL=insert-modal.js.map
