import {
  Box,
  Divider,
  FieldSet,
  FormField,
  IconButton,
  Input,
  Text,
  ToggleButton
} from "@wix/design-system";
import {
  ChevronDownSmall,
  ChevronUpSmall,
  IndividualPaddingsSmall,
  MoveSmall,
  PaddingBottomSmall,
  PaddingHorizontalSmall,
  PaddingLeftSmall,
  PaddingRightSmall,
  PaddingTopSmall,
  PaddingVerticalSmall,
  StackVerticalSmall,
  WrapSmall
} from "@wix/wix-ui-icons-common";
import React, { useContext, useState } from "react";
import { ZIndexContext } from "./../../../ricos-context/index.js";
import { RicosContext } from "./../../../ricos-context/ricos-context.js";
import { useBiNext } from "./../../../_shared/bi-context-provider/bi-context-provider.js";
import { TogglesWithLabel } from "./../../../_shared/toggles-with-label.js";
import {
  InputWithSlider,
  NumberInputWithLabel,
  usePanelContainerElement
} from "./../../../ui-components/index.js";
import {
  LAYOUT_SETTINGS_GAP,
  LAYOUT_SETTINGS_MODAL_ID,
  LAYOUT_SETTINGS_PADDING_BOTTOM,
  LAYOUT_SETTINGS_PADDING_HORIZONTAL,
  LAYOUT_SETTINGS_PADDING_LEFT,
  LAYOUT_SETTINGS_PADDING_RIGHT,
  LAYOUT_SETTINGS_PADDING_TOGGLE_INDIVIDUAL,
  LAYOUT_SETTINGS_PADDING_TOP,
  LAYOUT_SETTINGS_PADDING_VERTICAL,
  LAYOUT_SETTINGS_RESPONSIVENESS_BEHAVIOUR_STACK,
  LAYOUT_SETTINGS_RESPONSIVENESS_BEHAVIOUR_WRAP,
  LAYOUT_SETTINGS_RESPONSIVENESS_BREAKPOINT_INPUT,
  LAYOUT_SETTINGS_RESPONSIVENESS_HEADER_TOGGLE,
  LAYOUT_SETTINGS_VERTICAL_MARGIN,
  LAYOUT_SETTINGS_VERTICAL_MARGIN_BOTTOM,
  LAYOUT_SETTINGS_VERTICAL_MARGIN_TOGGLE_INDIVIDUAL,
  LAYOUT_SETTINGS_VERTICAL_MARGIN_TOP
} from "../data-hooks.js";
import { LAYOUT_DEFAULTS, MAX_VERTICAL_MARGIN } from "../shared-with-viewer.js";
const LayoutTab = ({ pmNodeAttrs, patchPmNodeAttrs, nodeId }) => {
  const { t } = useContext(RicosContext);
  const [responsivenessExpanded, setResponsivenessExpanded] = useState(
    pmNodeAttrs.responsivenessBehaviour !== LAYOUT_DEFAULTS.responsivenessBehaviour || pmNodeAttrs.responsivenessBreakpoint !== LAYOUT_DEFAULTS.responsivenessBreakpoint
  );
  const zIndexService = useContext(ZIndexContext);
  const zIndex = zIndexService.getZIndex("DIALOG");
  const containerEl = usePanelContainerElement();
  const logBi = useBiNext({ modalId: LAYOUT_SETTINGS_MODAL_ID, pluginId: "layout", nodeId });
  const padding = pmNodeAttrs.cellPadding ?? [...LAYOUT_DEFAULTS.cellPadding];
  const onPaddingChange = (cellPadding) => {
    patchPmNodeAttrs({ cellPadding });
  };
  return /* @__PURE__ */ React.createElement(Box, { direction: "vertical", overflow: "auto" }, /* @__PURE__ */ React.createElement(Box, { direction: "vertical", padding: "SP4", paddingTop: "SP3", paddingBottom: "SP3", gap: "SP2" }, /* @__PURE__ */ React.createElement(Box, { paddingBottom: "SP1" }, /* @__PURE__ */ React.createElement(Text, { size: "small", weight: "bold" }, t("Layout_SettingsModal_Tab_Layout_Spacing_Label"))), /* @__PURE__ */ React.createElement(Box, { direction: "vertical", gap: "SP2" }, /* @__PURE__ */ React.createElement(FormField, { inputWidth: "100%" }, /* @__PURE__ */ React.createElement(
    FieldSet,
    {
      alignment: "center",
      legend: t("Layout_SettingsModal_Tab_Layout_Gaps_Label"),
      infoContent: t("Layout_SettingsModal_Tab_Layout_Gaps_Tooltip"),
      infoTooltipProps: { appendTo: containerEl, zIndex }
    },
    /* @__PURE__ */ React.createElement(Box, { direction: "horizontal", paddingRight: "SP1", width: "50%" }, /* @__PURE__ */ React.createElement(
      InputWithSlider,
      {
        value: pmNodeAttrs.gap ?? LAYOUT_DEFAULTS.gap,
        dataHook: LAYOUT_SETTINGS_GAP,
        onChange: (value) => {
          logBi({ dataHook: LAYOUT_SETTINGS_GAP, value });
          patchPmNodeAttrs({ gap: value });
        },
        zIndex,
        prefix: /* @__PURE__ */ React.createElement(Input.Affix, null, /* @__PURE__ */ React.createElement(MoveSmall, null)),
        suffix: /* @__PURE__ */ React.createElement(Input.Affix, null, t("Common_Units_PX")),
        min: 0,
        max: 100
      }
    ))
  )), /* @__PURE__ */ React.createElement(
    PaddingFieldWithLabel,
    {
      logBi,
      label: t("Layout_SettingsModal_Tab_Layout_Padding_Label"),
      infoContent: t("Layout_SettingsModal_Tab_Layout_Padding_Tooltip"),
      padding,
      onChange: onPaddingChange
    }
  ), /* @__PURE__ */ React.createElement(
    VerticalMarginWithLabel,
    {
      logBi,
      label: t("Layout_SettingsModal_Tab_Layout_VerticalMargin_Label"),
      infoContent: t("Layout_SettingsModal_Tab_Layout_VerticalMargin_Tooltip"),
      marginTop: pmNodeAttrs.backdropPaddingTop ?? LAYOUT_DEFAULTS.backdropPaddingTop,
      marginBottom: pmNodeAttrs.backdropPaddingBottom ?? LAYOUT_DEFAULTS.backdropPaddingBottom,
      isBanner: !!pmNodeAttrs.banner,
      onChange: (marginTop, marginBottom) => {
        patchPmNodeAttrs({
          backdropPaddingTop: marginTop,
          backdropPaddingBottom: marginBottom
        });
      }
    }
  ))), /* @__PURE__ */ React.createElement(Divider, null), /* @__PURE__ */ React.createElement(Box, { direction: "vertical", padding: "SP4", paddingTop: "SP3", paddingBottom: "SP3", gap: "SP2" }, /* @__PURE__ */ React.createElement(
    Box,
    {
      paddingBottom: responsivenessExpanded ? "SP1" : void 0,
      direction: "horizontal",
      align: "space-between",
      verticalAlign: "middle"
    },
    /* @__PURE__ */ React.createElement(Text, { size: "small", weight: "bold" }, t("Layout_SettingsModal_Tab_Layout_Responsivness_Label")),
    /* @__PURE__ */ React.createElement(
      IconButton,
      {
        size: "small",
        skin: "dark",
        priority: "tertiary",
        onClick: () => {
          setResponsivenessExpanded((prev) => !prev);
          logBi({
            dataHook: LAYOUT_SETTINGS_RESPONSIVENESS_HEADER_TOGGLE,
            value: !responsivenessExpanded
          });
        },
        dataHook: LAYOUT_SETTINGS_RESPONSIVENESS_HEADER_TOGGLE
      },
      responsivenessExpanded ? /* @__PURE__ */ React.createElement(ChevronUpSmall, null) : /* @__PURE__ */ React.createElement(ChevronDownSmall, null)
    )
  ), responsivenessExpanded && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
    TogglesWithLabel,
    {
      label: t("Layout_SettingsModal_Tab_Layout_Responsivness_Behaviour_Label"),
      infoContent: t("Layout_SettingsModal_Tab_Layout_Responsivness_Behaviour_Tooltip"),
      value: pmNodeAttrs.responsivenessBehaviour || LAYOUT_DEFAULTS.responsivenessBehaviour,
      options: [
        {
          label: t("Layout_SettingsModal_Tab_Layout_Responsivness_Behaviour_Stack"),
          value: "STACK",
          icon: /* @__PURE__ */ React.createElement(StackVerticalSmall, { height: "100%" }),
          dataHook: LAYOUT_SETTINGS_RESPONSIVENESS_BEHAVIOUR_STACK
        },
        {
          label: t("Layout_SettingsModal_Tab_Layout_Responsivness_Behaviour_Wrap"),
          value: "WRAP",
          icon: /* @__PURE__ */ React.createElement(WrapSmall, { height: "100%" }),
          dataHook: LAYOUT_SETTINGS_RESPONSIVENESS_BEHAVIOUR_WRAP
        }
      ],
      onChange: (value) => patchPmNodeAttrs({ responsivenessBehaviour: value })
    }
  ), /* @__PURE__ */ React.createElement(
    NumberInputWithLabel,
    {
      label: t("Layout_SettingsModal_Tab_Layout_Responsivness_Breakpoint_Label"),
      infoContent: t("Layout_SettingsModal_Tab_Layout_Responsivness_Breakpoint_Tooltip"),
      dataHook: LAYOUT_SETTINGS_RESPONSIVENESS_BREAKPOINT_INPUT,
      suffix: /* @__PURE__ */ React.createElement(Input.Affix, null, t("Common_Units_PX")),
      value: pmNodeAttrs.responsivenessBreakpoint ?? LAYOUT_DEFAULTS.responsivenessBreakpoint,
      min: 0,
      max: 1200,
      onChange: (value) => patchPmNodeAttrs({ responsivenessBreakpoint: value }),
      logBi,
      zIndex,
      tooltipAppendTo: containerEl
    }
  ))));
};
const VerticalMarginWithLabel = ({
  logBi,
  label,
  infoContent,
  marginTop,
  marginBottom,
  isBanner = false,
  onChange
}) => {
  const { t } = useContext(RicosContext);
  const zIndexService = useContext(ZIndexContext);
  const zIndex = zIndexService.getZIndex("DIALOG");
  const containerEl = usePanelContainerElement();
  const [mode, setMode] = useState(() => {
    if (isBanner || marginTop === marginBottom) {
      return "directional";
    }
    return "individual";
  });
  const effectiveMode = isBanner ? "directional" : mode;
  return /* @__PURE__ */ React.createElement(Box, { direction: "vertical" }, /* @__PURE__ */ React.createElement(FormField, { inputWidth: "100%" }, /* @__PURE__ */ React.createElement(
    FieldSet,
    {
      alignment: "center",
      legend: label,
      infoContent,
      infoTooltipProps: { appendTo: containerEl, zIndex },
      suffix: (
        // Hide toggle button for banner layouts - they always use directional mode
        isBanner ? void 0 : /* @__PURE__ */ React.createElement(Box, { width: "24px", height: "24px", align: "center", verticalAlign: "middle" }, /* @__PURE__ */ React.createElement(
          ToggleButton,
          {
            border: true,
            labelValue: t(
              "Layout_SettingsModal_Tab_Layout_VerticalMargin_ToggleInidividual_Tooltip"
            ),
            size: "tiny",
            tooltipProps: { appendTo: containerEl, zIndex },
            selected: mode === "individual",
            onClick: () => {
              setMode(() => mode === "individual" ? "directional" : "individual");
              logBi({
                dataHook: LAYOUT_SETTINGS_VERTICAL_MARGIN_TOGGLE_INDIVIDUAL,
                value: mode === "individual" ? "directional" : "individual"
              });
              if (mode === "individual") {
                onChange(marginTop, marginTop);
              }
            },
            dataHook: LAYOUT_SETTINGS_VERTICAL_MARGIN_TOGGLE_INDIVIDUAL
          },
          /* @__PURE__ */ React.createElement(IndividualPaddingsSmall, null)
        ))
      )
    },
    (() => {
      switch (effectiveMode) {
        case "individual":
          return /* @__PURE__ */ React.createElement(Box, { direction: "horizontal", gap: "SP2" }, /* @__PURE__ */ React.createElement(
            InputWithSlider,
            {
              value: marginTop,
              onChange: (value) => {
                onChange(value, marginBottom);
                logBi({
                  dataHook: LAYOUT_SETTINGS_VERTICAL_MARGIN_TOP,
                  value
                });
              },
              dataHook: LAYOUT_SETTINGS_VERTICAL_MARGIN_TOP,
              zIndex,
              prefix: /* @__PURE__ */ React.createElement(Input.Affix, null, /* @__PURE__ */ React.createElement(PaddingTopSmall, null)),
              suffix: /* @__PURE__ */ React.createElement(Input.Affix, null, t("Common_Units_PX")),
              min: 0,
              max: MAX_VERTICAL_MARGIN
            }
          ), /* @__PURE__ */ React.createElement(
            InputWithSlider,
            {
              value: marginBottom,
              onChange: (value) => {
                onChange(marginTop, value);
                logBi({
                  dataHook: LAYOUT_SETTINGS_VERTICAL_MARGIN_BOTTOM,
                  value
                });
              },
              dataHook: LAYOUT_SETTINGS_VERTICAL_MARGIN_BOTTOM,
              zIndex,
              prefix: /* @__PURE__ */ React.createElement(Input.Affix, null, /* @__PURE__ */ React.createElement(PaddingBottomSmall, null)),
              suffix: /* @__PURE__ */ React.createElement(Input.Affix, null, t("Common_Units_PX")),
              min: 0,
              max: MAX_VERTICAL_MARGIN
            }
          ));
        case "directional":
          return /* @__PURE__ */ React.createElement(Box, { direction: "horizontal", paddingRight: "SP1", width: "50%" }, /* @__PURE__ */ React.createElement(
            InputWithSlider,
            {
              value: marginTop,
              onChange: (value) => {
                onChange(value, value);
                logBi({
                  dataHook: LAYOUT_SETTINGS_VERTICAL_MARGIN,
                  value
                });
              },
              dataHook: LAYOUT_SETTINGS_VERTICAL_MARGIN,
              zIndex,
              prefix: /* @__PURE__ */ React.createElement(Input.Affix, null, /* @__PURE__ */ React.createElement(PaddingVerticalSmall, null)),
              suffix: /* @__PURE__ */ React.createElement(Input.Affix, null, t("Common_Units_PX")),
              min: 0,
              max: MAX_VERTICAL_MARGIN
            }
          ));
        default:
          return null;
      }
    })()
  )));
};
const PaddingFieldWithLabel = ({
  logBi,
  label,
  infoContent,
  padding,
  onChange
}) => {
  const { t } = useContext(RicosContext);
  const zIndexService = useContext(ZIndexContext);
  const zIndex = zIndexService.getZIndex("DIALOG");
  const containerEl = usePanelContainerElement();
  const paddingTop = padding[0];
  const paddingRight = padding[1];
  const paddingBottom = padding[2];
  const paddingLeft = padding[3];
  const [mode, setMode] = useState(() => {
    if (paddingLeft === paddingRight && paddingTop === paddingBottom) {
      return "directional";
    }
    return "individual";
  });
  return /* @__PURE__ */ React.createElement(Box, { direction: "vertical" }, /* @__PURE__ */ React.createElement(FormField, { inputWidth: "100%" }, /* @__PURE__ */ React.createElement(
    FieldSet,
    {
      alignment: "center",
      legend: label,
      infoContent,
      infoTooltipProps: { appendTo: containerEl, zIndex },
      suffix: /* @__PURE__ */ React.createElement(Box, { width: "24px", height: "24px", align: "center", verticalAlign: "middle" }, /* @__PURE__ */ React.createElement(
        ToggleButton,
        {
          border: true,
          labelValue: t("Layout_SettingsModal_Tab_Layout_Padding_ToggleIndividual"),
          size: "tiny",
          tooltipProps: { appendTo: containerEl, zIndex },
          selected: mode === "individual",
          onClick: () => {
            setMode(() => mode === "individual" ? "directional" : "individual");
            logBi({
              dataHook: LAYOUT_SETTINGS_PADDING_TOGGLE_INDIVIDUAL,
              value: mode === "individual" ? "directional" : "individual"
            });
            if (mode === "individual") {
              onChange([paddingTop, paddingLeft, paddingTop, paddingLeft]);
            }
          },
          dataHook: LAYOUT_SETTINGS_PADDING_TOGGLE_INDIVIDUAL
        },
        /* @__PURE__ */ React.createElement(IndividualPaddingsSmall, null)
      ))
    },
    (() => {
      switch (mode) {
        case "individual":
          return /* @__PURE__ */ React.createElement(Box, { direction: "vertical", gap: "SP1" }, /* @__PURE__ */ React.createElement(Box, { direction: "horizontal", gap: "SP2" }, /* @__PURE__ */ React.createElement(
            InputWithSlider,
            {
              value: paddingLeft,
              onChange: (value) => {
                onChange([paddingTop, paddingRight, paddingBottom, value]);
                logBi({
                  dataHook: LAYOUT_SETTINGS_PADDING_LEFT,
                  value
                });
              },
              dataHook: LAYOUT_SETTINGS_PADDING_LEFT,
              zIndex,
              prefix: /* @__PURE__ */ React.createElement(Input.Affix, null, /* @__PURE__ */ React.createElement(PaddingLeftSmall, null)),
              suffix: /* @__PURE__ */ React.createElement(Input.Affix, null, t("Common_Units_PX")),
              min: 0,
              max: 100
            }
          ), /* @__PURE__ */ React.createElement(
            InputWithSlider,
            {
              value: paddingTop,
              onChange: (value) => {
                onChange([value, paddingRight, paddingBottom, paddingLeft]);
                logBi({
                  dataHook: LAYOUT_SETTINGS_PADDING_TOP,
                  value
                });
              },
              dataHook: LAYOUT_SETTINGS_PADDING_TOP,
              zIndex,
              prefix: /* @__PURE__ */ React.createElement(Input.Affix, null, /* @__PURE__ */ React.createElement(PaddingTopSmall, null)),
              suffix: /* @__PURE__ */ React.createElement(Input.Affix, null, t("Common_Units_PX")),
              min: 0,
              max: 100
            }
          )), /* @__PURE__ */ React.createElement(Box, { direction: "horizontal", gap: "SP2" }, /* @__PURE__ */ React.createElement(
            InputWithSlider,
            {
              value: paddingRight,
              onChange: (value) => {
                onChange([paddingTop, value, paddingBottom, paddingLeft]);
                logBi({
                  dataHook: LAYOUT_SETTINGS_PADDING_RIGHT,
                  value
                });
              },
              dataHook: LAYOUT_SETTINGS_PADDING_RIGHT,
              zIndex,
              prefix: /* @__PURE__ */ React.createElement(Input.Affix, null, /* @__PURE__ */ React.createElement(PaddingRightSmall, null)),
              suffix: /* @__PURE__ */ React.createElement(Input.Affix, null, t("Common_Units_PX")),
              min: 0,
              max: 100
            }
          ), /* @__PURE__ */ React.createElement(
            InputWithSlider,
            {
              value: paddingBottom,
              onChange: (value) => {
                onChange([paddingTop, paddingRight, value, paddingLeft]);
                logBi({
                  dataHook: LAYOUT_SETTINGS_PADDING_BOTTOM,
                  value
                });
              },
              dataHook: LAYOUT_SETTINGS_PADDING_BOTTOM,
              zIndex,
              prefix: /* @__PURE__ */ React.createElement(Input.Affix, null, /* @__PURE__ */ React.createElement(PaddingBottomSmall, null)),
              suffix: /* @__PURE__ */ React.createElement(Input.Affix, null, t("Common_Units_PX")),
              min: 0,
              max: 100
            }
          )));
        case "directional":
          return /* @__PURE__ */ React.createElement(Box, { direction: "horizontal", gap: "SP2" }, /* @__PURE__ */ React.createElement(
            InputWithSlider,
            {
              value: paddingLeft,
              onChange: (value) => {
                onChange([paddingTop, value, paddingTop, value]);
                logBi({
                  dataHook: LAYOUT_SETTINGS_PADDING_HORIZONTAL,
                  value
                });
              },
              dataHook: LAYOUT_SETTINGS_PADDING_HORIZONTAL,
              zIndex,
              prefix: /* @__PURE__ */ React.createElement(Input.Affix, null, /* @__PURE__ */ React.createElement(PaddingHorizontalSmall, null)),
              suffix: /* @__PURE__ */ React.createElement(Input.Affix, null, t("Common_Units_PX")),
              min: 0,
              max: 100
            }
          ), /* @__PURE__ */ React.createElement(
            InputWithSlider,
            {
              value: paddingTop,
              onChange: (value) => {
                onChange([value, paddingRight, value, paddingRight]);
                logBi({
                  dataHook: LAYOUT_SETTINGS_PADDING_VERTICAL,
                  value
                });
              },
              dataHook: LAYOUT_SETTINGS_PADDING_VERTICAL,
              zIndex,
              prefix: /* @__PURE__ */ React.createElement(Input.Affix, null, /* @__PURE__ */ React.createElement(PaddingVerticalSmall, null)),
              suffix: /* @__PURE__ */ React.createElement(Input.Affix, null, t("Common_Units_PX")),
              min: 0,
              max: 100
            }
          ));
        default:
          return null;
      }
    })()
  )));
};
export {
  LayoutTab
};
//# sourceMappingURL=layout-tab.js.map
