import { Box, Divider, FormField, ImageViewer, Input } from "@wix/design-system";
import React, { useContext } from "react";
import {
  ModalServiceContext,
  PluginsEventsContext,
  RicosContext,
  ZIndexContext
} from "./../../ricos-context/index.js";
import { useBiNext } from "./../../_shared/bi-context-provider/bi-context-provider.js";
import { logInvariant } from "./../../_shared/log-invariant.js";
import { getImageSrc } from "./../../wix-rich-content-common/lib/image-utils.js";
import {
  Panel,
  PanelHeader,
  ToggleButton,
  usePanelContainerElement
} from "./../../ui-components/index.js";
import { useNodeAttrs } from "../../_shared/use-node-attrs.js";
import {
  AUDIO_ACTION_NAMES,
  AUDIO_BI_VALUES,
  AUDIO_SETTINGS_MODAL_ID,
  AUDIO_TYPES
} from "../consts.js";
import {
  SETTINGS_AUDIO_COVER_IMAGE,
  SETTINGS_AUDIO_NAME_INPUT,
  SETTINGS_AUTHOR_NAME_INPUT,
  SETTINGS_DOWNLOAD_TOGGLE,
  SETTINGS_MODAL
} from "../data-hooks.js";
import classes from "../statics/styles/settings-modal-scss.js";
import { AUDIO_TYPE } from "../types.js";
const AudioSettingsModal = ({ nodeId, onFileSelect }) => {
  const { t, environment } = useContext(RicosContext);
  const modalService = useContext(ModalServiceContext) || {};
  const pluginsEvents = useContext(PluginsEventsContext);
  const zIndexService = useContext(ZIndexContext);
  const containerEl = usePanelContainerElement();
  const { patchPmNodeAttrs, pmNodeAttrs } = useNodeAttrs(nodeId, "AUDIO");
  const logBi = useBiNext({ pluginId: "audio", modalId: AUDIO_SETTINGS_MODAL_ID, nodeId });
  if (!pmNodeAttrs) {
    logInvariant(new Error("Audio settings: node attrs not found"));
    return null;
  }
  const closeModal = () => {
    modalService.closeModal(AUDIO_SETTINGS_MODAL_ID);
  };
  const imgSrc = pmNodeAttrs.coverImage && getImageSrc(
    { file_name: pmNodeAttrs.coverImage.src?.id || pmNodeAttrs.coverImage?.src.id },
    void 0,
    {
      requiredWidth: 120,
      requiredHeight: 120,
      requiredQuality: 70
    }
  );
  const onInputBlur = (actionName, value) => {
    pluginsEvents.publishPluginChangeSettings?.({
      nodeId,
      pluginId: AUDIO_TYPE,
      actionName,
      value
    });
  };
  return /* @__PURE__ */ React.createElement(Panel, { closeButtonProps: { onClick: closeModal }, dataHook: SETTINGS_MODAL }, /* @__PURE__ */ React.createElement(PanelHeader, { title: t("AudioPlugin_Settings_Header") }), /* @__PURE__ */ React.createElement(Box, { direction: "vertical", padding: "SP3", gap: "SP2", overflow: "auto" }, /* @__PURE__ */ React.createElement(FormField, { label: t("AudioPlugin_Settings_AudioName_Label") }, /* @__PURE__ */ React.createElement(
    Input,
    {
      placeholder: t("AudioPlugin_Settings_AudioName_Label_Placeholder"),
      value: pmNodeAttrs.name ?? void 0,
      onBlur: (e) => {
        onInputBlur(AUDIO_ACTION_NAMES.changeTitle, e.target.value);
      },
      onChange: (e) => {
        patchPmNodeAttrs({
          name: e.target.value
        });
        logBi({ dataHook: SETTINGS_AUDIO_NAME_INPUT, value: e.target.value });
        pluginsEvents.publishMediaPluginsDetails?.({
          pluginId: AUDIO_TYPE,
          nodeId,
          creator: pmNodeAttrs.authorName ?? void 0,
          title: e.target.value,
          track_duration: pmNodeAttrs.audio?.duration?.toString(),
          type: AUDIO_TYPES.custom,
          url: pmNodeAttrs.audio?.src?.id ?? ""
        });
      },
      dataHook: SETTINGS_AUDIO_NAME_INPUT,
      size: "small"
    }
  )), /* @__PURE__ */ React.createElement(FormField, { label: t("AudioPlugin_Settings_AuthorName_Label") }, /* @__PURE__ */ React.createElement(
    Input,
    {
      placeholder: t("AudioPlugin_Settings_AuthorName_Label_Placeholder"),
      value: pmNodeAttrs.authorName ?? void 0,
      onBlur: (e) => {
        onInputBlur(AUDIO_ACTION_NAMES.changeCreator, e.target.value);
      },
      onChange: (e) => {
        patchPmNodeAttrs({ authorName: e.target.value });
        logBi({ dataHook: SETTINGS_AUTHOR_NAME_INPUT, value: e.target.value });
        pluginsEvents.publishMediaPluginsDetails?.({
          pluginId: AUDIO_TYPE,
          nodeId,
          creator: e.target.value,
          title: pmNodeAttrs.name ?? void 0,
          track_duration: pmNodeAttrs.audio?.duration?.toString(),
          type: AUDIO_TYPES.custom,
          url: pmNodeAttrs.audio?.src?.id ?? ""
        });
      },
      dataHook: SETTINGS_AUTHOR_NAME_INPUT,
      size: "small"
    }
  )), /* @__PURE__ */ React.createElement(FormField, { label: t("AudioPlugin_Settings_CoverImage_Label") }, /* @__PURE__ */ React.createElement(
    ImageViewer,
    {
      className: environment === "liveSite" ? classes.imageViewer : void 0,
      dataHook: SETTINGS_AUDIO_COVER_IMAGE,
      imageUrl: imgSrc,
      width: 120,
      height: 120,
      removeRoundedBorders: environment === "liveSite",
      onAddImage: () => {
        pluginsEvents.publishPluginChangeSettings?.({
          pluginId: AUDIO_TYPE,
          nodeId,
          actionName: AUDIO_ACTION_NAMES.changeCover,
          value: AUDIO_BI_VALUES.YES
        });
        onFileSelect();
      },
      onUpdateImage: () => {
        pluginsEvents.publishPluginChangeSettings?.({
          pluginId: AUDIO_TYPE,
          nodeId,
          actionName: AUDIO_ACTION_NAMES.changeCover,
          value: AUDIO_BI_VALUES.YES
        });
        onFileSelect(0);
      },
      onRemoveImage: () => {
        patchPmNodeAttrs({ coverImage: null });
        logBi({ dataHook: SETTINGS_AUDIO_COVER_IMAGE });
        pluginsEvents.publishMediaPluginsDetails?.({
          pluginId: AUDIO_TYPE,
          nodeId,
          creator: pmNodeAttrs.authorName ?? void 0,
          title: pmNodeAttrs.name ?? void 0,
          track_duration: pmNodeAttrs.audio?.duration?.toString(),
          type: AUDIO_TYPES.custom,
          url: pmNodeAttrs.audio?.src?.id ?? ""
        });
        pluginsEvents.publishPluginChangeSettings?.({
          nodeId,
          pluginId: AUDIO_TYPE,
          actionName: AUDIO_ACTION_NAMES.changeCover,
          value: AUDIO_BI_VALUES.NO
        });
      },
      tooltipProps: {
        appendTo: containerEl,
        zIndex: zIndexService.getZIndex("TOOLTIP")
      },
      addImageInfo: t("AudioPlugin_Settings_CoverImage_AddImage"),
      removeImageInfo: t("AudioPlugin_Settings_CoverImage_RemoveImage"),
      updateImageInfo: t("AudioPlugin_Settings_CoverImage_UpdateImage")
    }
  )), /* @__PURE__ */ React.createElement(Divider, null), /* @__PURE__ */ React.createElement(
    ToggleButton,
    {
      checked: !pmNodeAttrs.disableDownload,
      title: t("AudioPlugin_Settings_AudioCanBeDownloaded_Label"),
      size: "small",
      dataHook: SETTINGS_DOWNLOAD_TOGGLE,
      onChange: () => {
        const disableDownload = !pmNodeAttrs.disableDownload;
        patchPmNodeAttrs({ disableDownload });
        logBi({ dataHook: SETTINGS_DOWNLOAD_TOGGLE, value: !!pmNodeAttrs.disableDownload });
        pluginsEvents.publishPluginChangeSettings?.({
          pluginId: AUDIO_TYPE,
          nodeId,
          actionName: AUDIO_ACTION_NAMES.downloadAudio,
          value: disableDownload ? AUDIO_BI_VALUES.YES : AUDIO_BI_VALUES.NO
        });
        pluginsEvents.publishMediaPluginsDetails?.({
          pluginId: AUDIO_TYPE,
          nodeId,
          creator: pmNodeAttrs.authorName ?? void 0,
          title: pmNodeAttrs.name ?? void 0,
          track_duration: pmNodeAttrs.audio?.duration?.toString(),
          type: AUDIO_TYPES.custom,
          url: pmNodeAttrs.audio?.src?.id ?? ""
        });
      },
      infoContent: t("AudioPlugin_Settings_AudioCanBeDownloaded_Tooltip"),
      tooltipAppendTo: containerEl
    }
  )));
};
export {
  AudioSettingsModal
};
//# sourceMappingURL=settings-modal.js.map
