import { Box, Divider, FieldSet, RadioGroup, SegmentedToggle, Text } from "@wix/design-system";
import { AlignLeft, AlignRight } from "@wix/wix-ui-icons-common";
import React, { useContext, useRef } from "react";
import {
  EditorContext,
  ModalServiceContext,
  PluginsEventsContext,
  RicosContext
} from "./../../ricos-context/index.js";
import { useBiNext } from "./../../_shared/bi-context-provider/bi-context-provider.js";
import { logInvariant } from "./../../_shared/log-invariant.js";
import { useNodeAttrs } from "./../../_shared/use-node-attrs.js";
import {
  Panel,
  PanelHeader,
  ToggleButton,
  usePanelContainerElement
} from "./../../ui-components/index.js";
import { COLLAPSIBLE_LIST_SETTINGS_MODAL_ID } from "../consts.js";
import {
  SETTINGS_DIRECTION,
  SETTINGS_DIRECTION_LTR,
  SETTINGS_DIRECTION_RTL,
  SETTINGS_EXPAND_ONLY_ONE_TOGGLE,
  SETTINGS_INITIAL_EXPANDED,
  SETTINGS_INITIAL_EXPANDED_ALL,
  SETTINGS_INITIAL_EXPANDED_FIRST,
  SETTINGS_INITIAL_EXPANDED_NONE,
  SETTINGS_IS_QA_PAGE_TOGGLE,
  SETTINGS_MODAL
} from "../data-hooks.js";
import classes from "../statics/styles/collapsible-list-settings-scss.js";
import { COLLAPSIBLE_LIST_TYPE, initialExpandedItems, listDirection } from "../types.js";
const CollapsibleListSettingsModal = ({
  nodeId,
  isQapageDataEnabled
}) => {
  const { t, environment } = useContext(RicosContext);
  const containerEl = usePanelContainerElement();
  const modalService = useContext(ModalServiceContext) || {};
  const { adapter } = useContext(EditorContext);
  const pluginsEvents = useContext(PluginsEventsContext);
  const tooltipRef = useRef(null);
  const logBi = useBiNext({
    pluginId: "collapsibleList",
    modalId: COLLAPSIBLE_LIST_SETTINGS_MODAL_ID,
    nodeId
  });
  const { pmNodeAttrs } = useNodeAttrs(nodeId, "COLLAPSIBLE_LIST");
  if (!pmNodeAttrs) {
    logInvariant(new Error("Collapsible list settings: node attrs not found"));
    return null;
  }
  const handleChange = (attrs) => {
    adapter.tiptapEditor.commands.setCollapsibleListAttributes(nodeId, attrs);
  };
  const directionDataSource = [
    {
      value: listDirection.LTR,
      label: t("CollapsibleList_CollapsibleListSettings_Tab_Settings_Direction_LTR"),
      icon: /* @__PURE__ */ React.createElement(AlignLeft, null),
      dataHook: SETTINGS_DIRECTION_LTR
    },
    {
      value: listDirection.RTL,
      label: t("CollapsibleList_CollapsibleListSettings_Tab_Settings_Direction_RTL"),
      icon: /* @__PURE__ */ React.createElement(AlignRight, null),
      dataHook: SETTINGS_DIRECTION_RTL
    }
  ];
  return /* @__PURE__ */ React.createElement(
    Panel,
    {
      onCloseButtonClick: () => modalService.closeModal(COLLAPSIBLE_LIST_SETTINGS_MODAL_ID),
      dataHook: SETTINGS_MODAL
    },
    /* @__PURE__ */ React.createElement(PanelHeader, { title: t("CollapsibleList_CollapsibleListSettings_Common_Header") }),
    /* @__PURE__ */ React.createElement(Box, { direction: "vertical", gap: "SP2", padding: "SP3", overflow: "auto" }, /* @__PURE__ */ React.createElement(Box, { paddingBottom: "SP1" }, /* @__PURE__ */ React.createElement(Text, { size: "small", weight: "bold" }, t("CollapsibleList_CollapsibleListSettings_Section_Settings_Title"))), /* @__PURE__ */ React.createElement(
      FieldSet,
      {
        legend: t("CollapsibleList_CollapsibleListSettings_Tab_Settings_CollapseView_Title"),
        maxLines: 3
      },
      /* @__PURE__ */ React.createElement(
        RadioGroup,
        {
          value: pmNodeAttrs.initialExpandedItems,
          onChange: (changedValue) => {
            handleChange({
              initialExpandedItems: changedValue,
              expandOnlyOne: changedValue === initialExpandedItems.ALL ? false : pmNodeAttrs.expandOnlyOne
            });
            logBi({
              dataHook: SETTINGS_INITIAL_EXPANDED,
              value: changedValue === initialExpandedItems.ALL ? SETTINGS_INITIAL_EXPANDED_ALL : changedValue === initialExpandedItems.FIRST ? SETTINGS_INITIAL_EXPANDED_FIRST : SETTINGS_INITIAL_EXPANDED_NONE
            });
          }
        },
        /* @__PURE__ */ React.createElement(
          RadioGroup.Radio,
          {
            value: initialExpandedItems.ALL,
            dataHook: SETTINGS_INITIAL_EXPANDED_ALL
          },
          /* @__PURE__ */ React.createElement(Text, { size: "small" }, t("CollapsibleList_CollapsibleListSettings_Tab_Settings_CollapseView_Expanded"))
        ),
        /* @__PURE__ */ React.createElement(
          RadioGroup.Radio,
          {
            value: initialExpandedItems.FIRST,
            dataHook: SETTINGS_INITIAL_EXPANDED_FIRST
          },
          /* @__PURE__ */ React.createElement(Text, { size: "small" }, t(
            "CollapsibleList_CollapsibleListSettings_Tab_Settings_CollapseView_FirstExpanded"
          ))
        ),
        /* @__PURE__ */ React.createElement(
          RadioGroup.Radio,
          {
            value: initialExpandedItems.NONE,
            dataHook: SETTINGS_INITIAL_EXPANDED_NONE
          },
          /* @__PURE__ */ React.createElement(Text, { size: "small" }, t("CollapsibleList_CollapsibleListSettings_Tab_Settings_CollapseView_Collapsed"))
        )
      )
    ), pmNodeAttrs.initialExpandedItems !== initialExpandedItems.ALL && /* @__PURE__ */ React.createElement(
      ToggleButton,
      {
        title: t(
          "CollapsibleList_CollapsibleListSettings_Tab_Settings_CollapseView_InSections"
        ),
        size: "small",
        checked: pmNodeAttrs.expandOnlyOne,
        dataHook: SETTINGS_EXPAND_ONLY_ONE_TOGGLE,
        onChange: () => {
          const expandOnlyOne = pmNodeAttrs.initialExpandedItems === initialExpandedItems.ALL ? false : pmNodeAttrs.expandOnlyOne;
          handleChange({ expandOnlyOne: !expandOnlyOne });
          logBi({ dataHook: SETTINGS_EXPAND_ONLY_ONE_TOGGLE, value: expandOnlyOne });
        }
      }
    ), isQapageDataEnabled && environment !== "wixel" && /* @__PURE__ */ React.createElement(
      ToggleButton,
      {
        title: t("CollapsibleList_CollapsibleListSettings_Tab_Settings_FAQ_Enabled_Toggle"),
        tooltipAppendTo: containerEl,
        toolTipSize: "small",
        infoContent: /* @__PURE__ */ React.createElement("div", { ref: tooltipRef, className: classes.tooltip }, t("CollapsibleList_CollapsibleListSettings_Tab_Settings_FAQ_Enabled_Tooltip"), " ", /* @__PURE__ */ React.createElement(
          "a",
          {
            href: "https://support.wix.com/en/article/wix-blog-creating-an-faq-using-a-collapsible-list",
            target: "_blank",
            rel: "noreferrer",
            className: classes.link
          },
          t("LinkPanel_Learn_More_Label")
        )),
        size: "small",
        checked: Boolean(pmNodeAttrs.isQapageData),
        dataHook: SETTINGS_IS_QA_PAGE_TOGGLE,
        onChange: () => {
          pluginsEvents.publishPluginChangeSettings({
            pluginId: COLLAPSIBLE_LIST_TYPE,
            actionName: "QapageData",
            value: pmNodeAttrs.isQapageData ? "no" : "yes",
            nodeId
          });
          handleChange({ isQapageData: !pmNodeAttrs.isQapageData });
          logBi({
            dataHook: SETTINGS_IS_QA_PAGE_TOGGLE,
            value: pmNodeAttrs.isQapageData ?? false
          });
        }
      }
    ), /* @__PURE__ */ React.createElement(Box, { paddingTop: "SP1" }, /* @__PURE__ */ React.createElement(Divider, null)), /* @__PURE__ */ React.createElement(Box, { paddingBottom: "SP1" }, /* @__PURE__ */ React.createElement(Text, { size: "small", weight: "bold" }, t("CollapsibleList_CollapsibleListSettings_Section_Display_Title"))), /* @__PURE__ */ React.createElement(
      FieldSet,
      {
        legend: t("CollapsibleList_CollapsibleListSettings_Tab_Settings_Direction_Title"),
        infoContent: t(
          "CollapsibleList_CollapsibleListSettings_Tab_Settings_Direction_Title_Tooltip"
        ),
        infoTooltipProps: { size: "small", appendTo: containerEl }
      },
      /* @__PURE__ */ React.createElement(
        SegmentedToggle,
        {
          size: "small",
          selected: pmNodeAttrs.direction,
          defaultSelected: pmNodeAttrs.direction,
          onClick: (_, direction) => {
            handleChange({ direction });
            logBi({
              dataHook: SETTINGS_DIRECTION,
              value: direction === listDirection.LTR ? SETTINGS_DIRECTION_LTR : SETTINGS_DIRECTION_RTL
            });
          }
        },
        directionDataSource.map((item) => /* @__PURE__ */ React.createElement(
          SegmentedToggle.Button,
          {
            key: item.value,
            value: item.value,
            size: "small",
            dataHook: item.dataHook,
            prefixIcon: item.icon
          },
          item.label
        ))
      )
    ))
  );
};
export {
  CollapsibleListSettingsModal
};
//# sourceMappingURL=settings-modals.js.map
