import { Box, Divider, SidePanel } from "@wix/design-system";
import lodash from "lodash";
import React, { useContext, useMemo, useState } from "react";
import { ModalServiceContext, RicosContext } from "./../../ricos-context/index.js";
import { useBiNext } from "./../../_shared/bi-context-provider/bi-context-provider.js";
import { MIN_LINE_HEIGHT } from "./../../_shared/line-spacing-utils.js";
import {
  FooterActions,
  Panel,
  PanelHeader,
  useClickOutside,
  usePanelContainerElement
} from "./../../ui-components/index.js";
import { PLUGIN_SETTINGS_PANEL_DISCARD_MODAL } from "./../../ui-components/settings-panel-discard-modal/consts.js";
import { SettingsPanelDiscardModal } from "./../../ui-components/settings-panel-discard-modal/settings-panel-discard-modal.js";
import { LINE_SPACING_CUSTOM_SPACING_MODAL_ID } from "../consts.js";
import {
  AFTER_PARAGRAPH_INPUT,
  BEFORE_PARAGRAPH_INPUT,
  LINE_SPACING_INPUT,
  MODAL_ROOT
} from "../data-hooks.js";
import { DEFAULT_LINE_SPACING } from "../defaults.js";
import classes from "./custom-spacing-editor-modal-scss.js";
import { InputWithLabel } from "./input-with-label/input-with-label.js";
const CustomSpacingEditorModal = ({
  insertDecoration,
  initialLineSpacing
}) => {
  const { t } = useContext(RicosContext);
  const modalService = useContext(ModalServiceContext);
  const containerEl = usePanelContainerElement();
  const logBi = useBiNext({
    modalId: LINE_SPACING_CUSTOM_SPACING_MODAL_ID,
    pluginId: "lineSpacing"
  });
  const [isDiscardModalOpen, setIsDiscardModalOpen] = React.useState(false);
  const [customLineSpacing, setCustomLineSpacing] = useState(
    () => toCustomLineSpacing(initialLineSpacing)
  );
  useClickOutside({
    containerRef: { current: containerEl },
    onClickOutside: () => {
      tryClosingModal();
    },
    triggerOn: "pointerdown",
    disable: isDiscardModalOpen
  });
  const isDirty = useMemo(
    () => !lodash.isEqual(customLineSpacing, toCustomLineSpacing(initialLineSpacing)),
    [customLineSpacing, initialLineSpacing]
  );
  const onSubmit = () => {
    insertDecoration(toLineSpacingDecoration(customLineSpacing));
    modalService.closeModal(LINE_SPACING_CUSTOM_SPACING_MODAL_ID);
  };
  const openDiscardModal = () => {
    return new Promise((resolve) => {
      modalService.openModal({
        id: PLUGIN_SETTINGS_PANEL_DISCARD_MODAL,
        Component: SettingsPanelDiscardModal,
        componentProps: {
          closeModal: (confirmed) => {
            modalService.closeModal(PLUGIN_SETTINGS_PANEL_DISCARD_MODAL);
            resolve(confirmed);
          }
        },
        layout: "dialog",
        positioning: {
          referenceElement: containerEl
        },
        disableArrowNavigation: true,
        onClickOutside: () => {
        }
      });
    });
  };
  const tryClosingModal = React.useCallback(async () => {
    if (!isDirty) {
      modalService.closeModal(LINE_SPACING_CUSTOM_SPACING_MODAL_ID);
      return false;
    }
    setIsDiscardModalOpen(true);
    const discardResult = await openDiscardModal();
    setIsDiscardModalOpen(false);
    if (discardResult.confirmed) {
      modalService.closeModal(LINE_SPACING_CUSTOM_SPACING_MODAL_ID);
      return true;
    }
  }, [openDiscardModal]);
  return /* @__PURE__ */ React.createElement(Panel, { closeButtonProps: { onClick: tryClosingModal }, dataHook: MODAL_ROOT }, /* @__PURE__ */ React.createElement(PanelHeader, { title: t("LineSpacing_customSpacing_Header") }), /* @__PURE__ */ React.createElement(Box, { direction: "vertical", padding: "SP3", gap: "SP3", className: classes.content }, /* @__PURE__ */ React.createElement(Box, { direction: "vertical", gap: "SP3" }, /* @__PURE__ */ React.createElement(
    InputWithLabel,
    {
      label: t("LineSpacing_lineSpacing"),
      value: customLineSpacing["line-height"],
      onChange: (value) => {
        setCustomLineSpacing({ ...customLineSpacing, "line-height": value });
        logBi({ dataHook: LINE_SPACING_INPUT, value });
      },
      min: MIN_LINE_HEIGHT,
      max: 100,
      dataHook: LINE_SPACING_INPUT
    }
  ), /* @__PURE__ */ React.createElement(Divider, null), /* @__PURE__ */ React.createElement(Box, { direction: "vertical", gap: "SP4" }, /* @__PURE__ */ React.createElement(
    InputWithLabel,
    {
      label: t("LineSpacing_beforeParagraph"),
      value: customLineSpacing["padding-top"],
      onChange: (value) => {
        setCustomLineSpacing({ ...customLineSpacing, "padding-top": value });
        logBi({ dataHook: BEFORE_PARAGRAPH_INPUT, value });
      },
      min: 0,
      max: 250,
      dataHook: BEFORE_PARAGRAPH_INPUT
    }
  ), /* @__PURE__ */ React.createElement(
    InputWithLabel,
    {
      label: t("LineSpacing_afterParagraph"),
      value: customLineSpacing["padding-bottom"],
      onChange: (value) => {
        setCustomLineSpacing({ ...customLineSpacing, "padding-bottom": value });
        logBi({ dataHook: AFTER_PARAGRAPH_INPUT, value });
      },
      min: 0,
      max: 250,
      dataHook: AFTER_PARAGRAPH_INPUT
    }
  )))), /* @__PURE__ */ React.createElement(SidePanel.Footer, { showDivider: true }, /* @__PURE__ */ React.createElement(
    FooterActions,
    {
      onCancel: tryClosingModal,
      onSave: () => {
        onSubmit();
      },
      logBi
    }
  )));
};
const isNumericValue = (value) => !isNaN(parseFloat(value));
const ensureNumericValue = (value, fallback) => isNumericValue(value) ? value : fallback;
const toLineSpacingDecoration = (data) => {
  return {
    "line-height": ensureNumericValue(data["line-height"], DEFAULT_LINE_SPACING["line-height"]),
    "padding-bottom": `${ensureNumericValue(
      data["padding-bottom"],
      DEFAULT_LINE_SPACING["padding-bottom"]
    )}px`,
    "padding-top": `${ensureNumericValue(
      data["padding-top"],
      DEFAULT_LINE_SPACING["padding-top"]
    )}px`
  };
};
const toCustomLineSpacing = (data) => ({
  "line-height": data["line-height"] ?? "1.5",
  "padding-bottom": data["padding-bottom"].slice(0, -2) ?? "0",
  "padding-top": data["padding-top"].slice(0, -2) ?? "0"
});
export {
  CustomSpacingEditorModal
};
//# sourceMappingURL=custom-spacing-editor-modal.js.map
