import {
  Accordion,
  Box,
  FieldSet,
  FillPreview,
  FormField,
  InfoIcon,
  Input,
  SectionHelper,
  SegmentedToggle,
  Text,
  Thumbnail,
  ToggleSwitch,
  accordionItemBuilder
} from "@wix/design-system";
import { ButtonRoundedSmall, InfoCircle } from "@wix/wix-ui-icons-common";
import lodash from "lodash";
import React, { useContext, useEffect, useReducer, useRef, useState } from "react";
import { EditorContext } from "./../../ricos-context/editor-context.js";
import { ModalServiceContext } from "./../../ricos-context/modal-context.js";
import { RicosContext } from "./../../ricos-context/ricos-context.js";
import { ZIndexContext } from "./../../ricos-context/z-index-context.js";
import { useBiNext } from "./../../_shared/bi-context-provider/bi-context-provider.js";
import { unreachable } from "./../../_shared/uncreachable.js";
import { useResolveDisplayColor } from "./../../_shared/use-resolve-display-color.js";
import { ColorWithOpacityInput } from "./../../ui-components/index.js";
import { NumberInputWithLabel } from "./../../ui-components/number-input-with-label/number-input-with-label.js";
import { VerticalEmbedColorPicker } from "../components/vertical-embed-color-picker.js";
import { verticalEmbedModals } from "../constants.js";
import {
  SETTINGS_VERTICAL_EMBED_BACKGROUND_COLOR_INPUT,
  SETTINGS_VERTICAL_EMBED_BACKGROUND_COLOR_TRIGGER,
  SETTINGS_VERTICAL_EMBED_BORDER_COLOR_INPUT,
  SETTINGS_VERTICAL_EMBED_BORDER_COLOR_TRIGGER,
  SETTINGS_VERTICAL_EMBED_BORDER_WIDTH_INPUT,
  SETTINGS_VERTICAL_EMBED_BUTTON_BORDER_COLOR_INPUT,
  SETTINGS_VERTICAL_EMBED_BUTTON_BORDER_COLOR_TRIGGER,
  SETTINGS_VERTICAL_EMBED_BUTTON_BORDER_WIDTH_INPUT,
  SETTINGS_VERTICAL_EMBED_BUTTON_CORNER_RADIUS_INPUT,
  SETTINGS_VERTICAL_EMBED_BUTTON_FILL_COLOR_INPUT,
  SETTINGS_VERTICAL_EMBED_BUTTON_FILL_COLOR_TRIGGER,
  SETTINGS_VERTICAL_EMBED_BUTTON_HOVER_BORDER_COLOR_INPUT,
  SETTINGS_VERTICAL_EMBED_BUTTON_HOVER_BORDER_COLOR_TRIGGER,
  SETTINGS_VERTICAL_EMBED_BUTTON_HOVER_FILL_COLOR_INPUT,
  SETTINGS_VERTICAL_EMBED_BUTTON_HOVER_FILL_COLOR_TRIGGER,
  SETTINGS_VERTICAL_EMBED_BUTTON_HOVER_TEXT_COLOR_PICKER_TRIGGER,
  SETTINGS_VERTICAL_EMBED_BUTTON_TEXT_COLOR_PICKER_TRIGGER,
  SETTINGS_VERTICAL_EMBED_CORNER_RADIUS_INPUT,
  SETTINGS_VERTICAL_EMBED_RIBBON_BORDER_COLOR_INPUT,
  SETTINGS_VERTICAL_EMBED_RIBBON_BORDER_COLOR_TRIGGER,
  SETTINGS_VERTICAL_EMBED_RIBBON_BORDER_WIDTH_INPUT,
  SETTINGS_VERTICAL_EMBED_RIBBON_CORNER_RADIUS_INPUT,
  SETTINGS_VERTICAL_EMBED_RIBBON_FILL_COLOR_INPUT,
  SETTINGS_VERTICAL_EMBED_RIBBON_FILL_COLOR_TRIGGER,
  SETTINGS_VERTICAL_EMBED_RIBBON_TEXT_COLOR_PICKER_TRIGGER,
  SETTINGS_VERTICAL_EMBED_SUBTITLE_COLOR_PICKER_TRIGGER,
  SETTINGS_VERTICAL_EMBED_TITLE_COLOR_PICKER_TRIGGER
} from "../data-hooks.js";
const BUTTON_NORMAL_STATE_TOGGLE_VALUE = "NORMAL";
const BUTTON_HOVER_STATE_TOGGLE_VALUE = "HOVER";
const DesignTab = ({
  nodeId,
  config,
  modalId,
  pmNodeAttrs,
  patchPmNodeAttrs
}) => {
  const { t, isMobile } = useContext(RicosContext);
  const modalService = useContext(ModalServiceContext) || {};
  const zIndexService = useContext(ZIndexContext);
  const { adapter } = useContext(EditorContext);
  const zIndex = zIndexService.getZIndex("DIALOG");
  const resolveDisplayColor = useResolveDisplayColor();
  const getDefaultColor = (colorType) => {
    const themeColors = config?.colors;
    const defaults = {
      titleColor: themeColors?.color1 ?? "#000624",
      textColor: themeColors?.color1 ?? "#44485F",
      backgroundColor: "#FFFFFF00",
      borderColor: "#00000033",
      buttonBackgroundColor: themeColors?.color8 ?? "#000000",
      buttonTextColor: themeColors?.color1 ?? "#FFFFFF",
      buttonBorderColor: themeColors?.color8 ?? "#00000033",
      buttonBackgroundColorHover: themeColors?.color8 ?? "#333333",
      buttonTextColorHover: themeColors?.color1 ?? "#FFFFFF",
      buttonBorderColorHover: themeColors?.color8 ?? "#00000033",
      ribbonFillColor: themeColors?.color8 ?? "#000000",
      ribbonTextColor: themeColors?.color1 ?? "#FFFFFF",
      ribbonBorderColor: themeColors?.color8 ?? "#00000033",
      imageBorderColor: themeColors?.color8 ?? "#00000033"
    };
    switch (colorType) {
      case "titleColor":
        return themeColors?.titleColor ?? defaults.titleColor;
      case "textColor":
        return themeColors?.textColor ?? defaults.textColor;
      case "backgroundColor":
        return themeColors?.backgroundColor ?? defaults.backgroundColor;
      case "borderColor":
        return themeColors?.borderColor ?? defaults.borderColor;
      case "buttonBackgroundColor":
        return themeColors?.buttonFillColor ?? defaults.buttonBackgroundColor;
      case "buttonTextColor":
        return themeColors?.buttonTextColor ?? defaults.buttonTextColor;
      case "buttonBorderColor":
        return themeColors?.buttonBorderColor ?? defaults.buttonBorderColor;
      case "buttonBackgroundColorHover":
        return themeColors?.buttonFillColorHover ?? defaults.buttonBackgroundColorHover;
      case "buttonTextColorHover":
        return themeColors?.buttonTextColorHover ?? defaults.buttonTextColorHover;
      case "buttonBorderColorHover":
        return themeColors?.buttonBorderColorHover ?? defaults.buttonBorderColorHover;
      case "ribbonFillColor":
        return themeColors?.ribbonFillColor ?? defaults.ribbonFillColor;
      case "ribbonTextColor":
        return themeColors?.ribbonTextColor ?? defaults.ribbonTextColor;
      case "ribbonBorderColor":
        return themeColors?.ribbonBorderColor ?? defaults.ribbonBorderColor;
      case "imageBorderColor":
        return themeColors?.imageBorderColor ?? defaults.imageBorderColor;
      default:
        unreachable(colorType);
        return defaults[colorType];
    }
  };
  const titlePickerToggleRef = useRef(null);
  const subtitlePickerToggleRef = useRef(null);
  const backgroundPickerToggleRef = useRef(null);
  const borderPickerToggleRef = useRef(null);
  const buttonFillPickerRef = useRef(null);
  const buttonBorderPickerRef = useRef(null);
  const buttonTextPickerRef = useRef(null);
  const ribbonFillPickerRef = useRef(null);
  const ribbonTextPickerRef = useRef(null);
  const ribbonBorderPickerRef = useRef(null);
  const imageBorderPickerRef = useRef(null);
  const [buttonStateToggleValue, setButtonStateToggleValue] = useState("NORMAL");
  const [sectionHelperVisibility, setSectionHelperVisibility] = useState({
    image: !!pmNodeAttrs.hideImage,
    button: !!pmNodeAttrs.hideButton,
    ribbon: pmNodeAttrs.hideRibbon !== false
  });
  const closeSectionHelper = (section) => {
    setSectionHelperVisibility((prev) => ({
      ...prev,
      [section]: false
    }));
  };
  const isHoverState = buttonStateToggleValue === BUTTON_HOVER_STATE_TOGGLE_VALUE;
  const forceUpdate = useReducer((x) => x + 1, 0)[1];
  const setHoverPreview = (applyPreview) => {
    adapter.tiptapEditor.chain().setVerticalEmbedButtonHoverPreview(applyPreview).run();
    forceUpdate();
  };
  useEffect(() => {
    setHoverPreview(isHoverState);
    return () => setHoverPreview(false);
  }, [isHoverState]);
  const handleCardTypeChange = (type) => {
    patchPmNodeAttrs({
      cardStyles: {
        ...pmNodeAttrs?.cardStyles,
        type
      }
    });
  };
  const getPickerToggleRef = (colorType) => {
    switch (colorType) {
      case "titleColor":
        return titlePickerToggleRef.current;
      case "textColor":
        return subtitlePickerToggleRef.current;
      case "backgroundColor":
        return backgroundPickerToggleRef.current;
      case "borderColor":
        return borderPickerToggleRef.current;
      case "buttonBackgroundColor":
      case "buttonBackgroundColorHover":
        return buttonFillPickerRef.current;
      case "buttonBorderColor":
      case "buttonBorderColorHover":
        return buttonBorderPickerRef.current;
      case "buttonTextColor":
      case "buttonTextColorHover":
        return buttonTextPickerRef.current;
      case "ribbonFillColor":
        return ribbonFillPickerRef.current;
      case "ribbonTextColor":
        return ribbonTextPickerRef.current;
      case "ribbonBorderColor":
        return ribbonBorderPickerRef.current;
      case "imageBorderColor":
        return imageBorderPickerRef.current;
      default:
        unreachable(colorType);
        return null;
    }
  };
  const openColorPicker = (colorType) => {
    const modalId2 = verticalEmbedModals.colorPicker;
    const referenceElement = getPickerToggleRef(colorType) ?? void 0;
    modalService.togglePluginPanel({
      id: modalId2,
      Component: VerticalEmbedColorPicker,
      componentProps: {
        modalId: modalId2,
        nodeId,
        referenceElement,
        config,
        colorType,
        onColorSelected: onColorChange(colorType),
        defaultColor: getDefaultColor(colorType)
      },
      isMobile,
      positioning: {
        referenceElement,
        placement: "left"
      },
      type: void 0,
      onClickOutside: {
        on: "pointerup",
        handler: lodash.noop
      },
      focusReturnElement: referenceElement ?? void 0
    });
  };
  const onColorChange = React.useCallback(
    (colorType) => (color) => {
      switch (colorType) {
        case "titleColor": {
          patchPmNodeAttrs({
            cardStyles: {
              ...pmNodeAttrs?.cardStyles,
              titleColor: color
            }
          });
          break;
        }
        case "textColor": {
          patchPmNodeAttrs({
            cardStyles: {
              ...pmNodeAttrs?.cardStyles,
              textColor: color
            }
          });
          break;
        }
        case "backgroundColor":
        case "borderColor": {
          patchPmNodeAttrs({
            cardStyles: {
              ...pmNodeAttrs?.cardStyles,
              [colorType]: color ?? null
            }
          });
          break;
        }
        case "buttonBackgroundColor":
        case "buttonTextColor":
        case "buttonBorderColor":
        case "buttonBackgroundColorHover":
        case "buttonTextColorHover":
        case "buttonBorderColorHover": {
          const buttonKeyMap = {
            buttonBackgroundColor: "backgroundColor",
            buttonTextColor: "textColor",
            buttonBorderColor: "borderColor",
            buttonBackgroundColorHover: "backgroundColorHover",
            buttonTextColorHover: "textColorHover",
            buttonBorderColorHover: "borderColorHover"
          };
          patchPmNodeAttrs({
            buttonStyles: {
              ...pmNodeAttrs?.buttonStyles,
              [buttonKeyMap[colorType]]: color ?? null
            }
          });
          break;
        }
        case "ribbonFillColor":
        case "ribbonTextColor":
        case "ribbonBorderColor": {
          const ribbonKeyMap = {
            ribbonFillColor: "backgroundColor",
            ribbonTextColor: "textColor",
            ribbonBorderColor: "borderColor"
          };
          patchPmNodeAttrs({
            ribbonStyles: {
              ...pmNodeAttrs?.ribbonStyles,
              [ribbonKeyMap[colorType]]: color ?? null
            }
          });
          break;
        }
        case "imageBorderColor": {
          patchPmNodeAttrs({
            imageStyles: {
              ...pmNodeAttrs?.imageStyles,
              borderColor: color ?? void 0
            }
          });
          break;
        }
        default:
          break;
      }
    },
    [pmNodeAttrs, patchPmNodeAttrs]
  );
  const logBi = useBiNext({ modalId, pluginId: "verticalEmbed", nodeId });
  const AccordionTitle = ({ title }) => /* @__PURE__ */ React.createElement(Text, { size: "small", weight: "bold" }, title);
  return /* @__PURE__ */ React.createElement(Box, { direction: "vertical", overflow: "auto" }, /* @__PURE__ */ React.createElement(Box, { direction: "vertical" }, /* @__PURE__ */ React.createElement(
    Accordion,
    {
      hideShadow: true,
      skin: "light",
      size: "medium",
      multiple: true,
      items: [
        accordionItemBuilder({
          key: "text",
          initiallyOpen: true,
          title: /* @__PURE__ */ React.createElement(AccordionTitle, { title: t("Embed_Vertical_Design_Panel_Text") }),
          children: /* @__PURE__ */ React.createElement(Box, { direction: "vertical", gap: "SP2" }, /* @__PURE__ */ React.createElement(
            FieldSet,
            {
              legend: t("Embed_Vertical_Design_Panel_Title_Color"),
              legendPlacement: "left",
              columns: "auto 30px",
              alignment: "center"
            },
            /* @__PURE__ */ React.createElement("div", null),
            /* @__PURE__ */ React.createElement(
              FillPreview,
              {
                fill: resolveDisplayColor(pmNodeAttrs?.cardStyles?.titleColor) ?? resolveDisplayColor(getDefaultColor("titleColor")),
                onClick: () => {
                  logBi({ dataHook: SETTINGS_VERTICAL_EMBED_TITLE_COLOR_PICKER_TRIGGER });
                  openColorPicker("titleColor");
                },
                ref: titlePickerToggleRef,
                dataHook: SETTINGS_VERTICAL_EMBED_TITLE_COLOR_PICKER_TRIGGER
              }
            )
          ), /* @__PURE__ */ React.createElement(
            FieldSet,
            {
              legend: t("Embed_Vertical_Design_Panel_Text_Color"),
              legendPlacement: "left",
              columns: "auto 30px",
              alignment: "center"
            },
            /* @__PURE__ */ React.createElement("div", null),
            /* @__PURE__ */ React.createElement(
              FillPreview,
              {
                fill: resolveDisplayColor(pmNodeAttrs?.cardStyles?.textColor) ?? resolveDisplayColor(getDefaultColor("textColor")),
                onClick: () => {
                  logBi({ dataHook: SETTINGS_VERTICAL_EMBED_SUBTITLE_COLOR_PICKER_TRIGGER });
                  openColorPicker("textColor");
                },
                ref: subtitlePickerToggleRef,
                dataHook: SETTINGS_VERTICAL_EMBED_SUBTITLE_COLOR_PICKER_TRIGGER
              }
            )
          ))
        }),
        accordionItemBuilder({
          key: "card",
          initiallyOpen: true,
          title: /* @__PURE__ */ React.createElement(AccordionTitle, { title: t("Embed_Vertical_Design_Panel_Card") }),
          children: /* @__PURE__ */ React.createElement(Box, { direction: "vertical", gap: "SP2" }, /* @__PURE__ */ React.createElement(
            ColorWithOpacityInput,
            {
              label: t("Embed_Vertical_Design_Panel_Fill_Color"),
              inputDataHook: SETTINGS_VERTICAL_EMBED_BACKGROUND_COLOR_INPUT,
              fillPreviewDataHook: SETTINGS_VERTICAL_EMBED_BACKGROUND_COLOR_TRIGGER,
              fill: {
                type: "color",
                color: pmNodeAttrs?.cardStyles?.backgroundColor ?? getDefaultColor("backgroundColor"),
                onChange: (color) => {
                  logBi({
                    dataHook: SETTINGS_VERTICAL_EMBED_BACKGROUND_COLOR_INPUT,
                    value: color
                  });
                  patchPmNodeAttrs({
                    cardStyles: {
                      ...pmNodeAttrs?.cardStyles,
                      backgroundColor: color ?? null
                    }
                  });
                }
              },
              onColorPress: () => {
                logBi({ dataHook: SETTINGS_VERTICAL_EMBED_BACKGROUND_COLOR_INPUT });
                openColorPicker("backgroundColor");
              },
              colorPickerRef: backgroundPickerToggleRef,
              zIndex
            }
          ), /* @__PURE__ */ React.createElement(
            ColorWithOpacityInput,
            {
              label: t("Embed_Vertical_Design_Panel_Border_Color"),
              inputDataHook: SETTINGS_VERTICAL_EMBED_BORDER_COLOR_INPUT,
              fillPreviewDataHook: SETTINGS_VERTICAL_EMBED_BORDER_COLOR_TRIGGER,
              fill: {
                type: "color",
                color: pmNodeAttrs?.cardStyles?.borderColor ?? getDefaultColor("borderColor"),
                onChange: (color) => {
                  logBi({
                    dataHook: SETTINGS_VERTICAL_EMBED_BORDER_COLOR_INPUT,
                    value: color
                  });
                  patchPmNodeAttrs({
                    cardStyles: {
                      ...pmNodeAttrs?.cardStyles,
                      borderColor: color ?? null
                    }
                  });
                }
              },
              onColorPress: () => {
                logBi({ dataHook: SETTINGS_VERTICAL_EMBED_BORDER_COLOR_INPUT });
                openColorPicker("borderColor");
              },
              colorPickerRef: borderPickerToggleRef,
              zIndex
            }
          ), /* @__PURE__ */ React.createElement(
            NumberInputWithLabel,
            {
              label: t("Embed_Vertical_Design_Panel_Border_Width"),
              dataHook: SETTINGS_VERTICAL_EMBED_BORDER_WIDTH_INPUT,
              suffix: /* @__PURE__ */ React.createElement(Input.Affix, null, t("Common_Units_PX")),
              value: pmNodeAttrs?.cardStyles?.borderWidth ?? 1,
              min: 0,
              max: 15,
              onChange: (width) => patchPmNodeAttrs({
                cardStyles: {
                  ...pmNodeAttrs?.cardStyles,
                  borderWidth: width
                }
              }),
              logBi,
              zIndex
            }
          ), /* @__PURE__ */ React.createElement(
            NumberInputWithLabel,
            {
              label: t("Embed_Vertical_Design_Panel_Corner_Radius"),
              dataHook: SETTINGS_VERTICAL_EMBED_CORNER_RADIUS_INPUT,
              suffix: /* @__PURE__ */ React.createElement(Input.Affix, null, t("Common_Units_PX")),
              value: pmNodeAttrs?.cardStyles?.borderRadius ?? 0,
              min: 0,
              max: 30,
              onChange: (radius) => patchPmNodeAttrs({
                cardStyles: {
                  ...pmNodeAttrs?.cardStyles,
                  borderRadius: radius
                }
              }),
              logBi,
              zIndex
            }
          ), /* @__PURE__ */ React.createElement(Box, { direction: "vertical", paddingTop: "SP2" }, /* @__PURE__ */ React.createElement(
            FormField,
            {
              label: /* @__PURE__ */ React.createElement(Box, { direction: "horizontal", gap: "SP1", align: "center" }, /* @__PURE__ */ React.createElement(Text, { size: "small" }, t("Embed_Vertical_Design_Panel_Card_Paddings")), /* @__PURE__ */ React.createElement(
                InfoIcon,
                {
                  size: "small",
                  content: t("Embed_Vertical_Design_Panel_Card_Paddings_Tooltip"),
                  tooltipProps: {
                    appendTo: (el) => Boolean(el.getAttribute("data-hook")?.includes("ricos-portal")),
                    zIndex,
                    size: "medium",
                    enterDelay: 300
                  }
                }
              )),
              labelPlacement: "left",
              labelWidth: "1fr",
              labelAlignment: "middle"
            },
            /* @__PURE__ */ React.createElement(Box, { direction: "horizontal", gap: "SP2", align: "center" }, /* @__PURE__ */ React.createElement(
              ToggleSwitch,
              {
                size: "small",
                checked: pmNodeAttrs?.cardStyles?.type !== "FRAMELESS",
                onChange: () => {
                  const newType = pmNodeAttrs?.cardStyles?.type === "FRAMELESS" ? "CONTAINED" : "FRAMELESS";
                  handleCardTypeChange(newType);
                }
              }
            ))
          )))
        }),
        accordionItemBuilder({
          key: "image",
          title: /* @__PURE__ */ React.createElement(AccordionTitle, { title: t("Embed_Vertical_Design_Panel_Image") }),
          children: /* @__PURE__ */ React.createElement(Box, { direction: "vertical", gap: "SP2" }, /* @__PURE__ */ React.createElement(
            ColorWithOpacityInput,
            {
              label: t("Embed_Vertical_Design_Panel_Border_Color"),
              inputDataHook: "settings-vertical-embed-image-border-color-input",
              fillPreviewDataHook: "settings-vertical-embed-image-border-color-trigger",
              fill: {
                type: "color",
                color: pmNodeAttrs?.imageStyles?.borderColor ?? getDefaultColor("imageBorderColor"),
                onChange: (color) => {
                  logBi({
                    dataHook: "settings-vertical-embed-image-border-color-input",
                    value: color
                  });
                  patchPmNodeAttrs({
                    imageStyles: {
                      ...pmNodeAttrs?.imageStyles,
                      borderColor: color ?? void 0
                    }
                  });
                }
              },
              onColorPress: () => {
                logBi({ dataHook: "settings-vertical-embed-image-border-color-input" });
                openColorPicker("imageBorderColor");
              },
              colorPickerRef: imageBorderPickerRef,
              zIndex
            }
          ), /* @__PURE__ */ React.createElement(
            NumberInputWithLabel,
            {
              label: t("Embed_Vertical_Design_Panel_Border_Width"),
              dataHook: "settings-vertical-embed-image-border-width-input",
              suffix: /* @__PURE__ */ React.createElement(Input.Affix, null, t("Common_Units_PX")),
              value: pmNodeAttrs?.imageStyles?.borderWidth ?? 0,
              min: 0,
              max: 15,
              onChange: (width) => patchPmNodeAttrs({
                imageStyles: {
                  ...pmNodeAttrs?.imageStyles,
                  borderWidth: width
                }
              }),
              logBi,
              zIndex
            }
          ), /* @__PURE__ */ React.createElement(
            NumberInputWithLabel,
            {
              label: t("Embed_Vertical_Design_Panel_Corner_Radius"),
              dataHook: "settings-vertical-embed-image-corner-radius-input",
              suffix: /* @__PURE__ */ React.createElement(Input.Affix, null, t("Common_Units_PX")),
              value: pmNodeAttrs?.imageStyles?.borderRadius ?? 0,
              min: 0,
              max: 30,
              onChange: (radius) => patchPmNodeAttrs({
                imageStyles: {
                  ...pmNodeAttrs?.imageStyles,
                  borderRadius: radius
                }
              }),
              logBi,
              zIndex
            }
          ), pmNodeAttrs.hideImage && sectionHelperVisibility.image && /* @__PURE__ */ React.createElement(
            SectionHelper,
            {
              size: "small",
              layout: "horizontal",
              showPrefixIcon: true,
              prefixIcon: /* @__PURE__ */ React.createElement(InfoCircle, null),
              showCloseButton: true,
              skin: "standard",
              fullWidth: true,
              onClose: () => closeSectionHelper("image")
            },
            t("Embed_Vertical_Design_Panel_Section_Helper_Text")
          ))
        }),
        accordionItemBuilder({
          key: "button",
          title: /* @__PURE__ */ React.createElement(AccordionTitle, { title: t("Embed_Vertical_Design_Panel_Button") }),
          children: /* @__PURE__ */ React.createElement(Box, { direction: "vertical", gap: "SP2", paddingTop: "SP1" }, /* @__PURE__ */ React.createElement(FormField, { inputWidth: "100%" }, /* @__PURE__ */ React.createElement(
            SegmentedToggle,
            {
              defaultSelected: buttonStateToggleValue,
              size: "small",
              onClick: (_, value) => setButtonStateToggleValue(value)
            },
            /* @__PURE__ */ React.createElement(SegmentedToggle.Button, { value: BUTTON_NORMAL_STATE_TOGGLE_VALUE }, t("ButtonModal_Design_Normal_State_Toggle")),
            /* @__PURE__ */ React.createElement(SegmentedToggle.Button, { value: BUTTON_HOVER_STATE_TOGGLE_VALUE }, t("ButtonModal_Design_Hover_State_Toggle"))
          )), !isHoverState && /* @__PURE__ */ React.createElement(
            FormField,
            {
              label: t("Embed_Vertical_Design_Panel_Button_Size"),
              labelPlacement: "left",
              labelWidth: "1fr",
              labelAlignment: "middle"
            },
            /* @__PURE__ */ React.createElement(Box, { direction: "horizontal", gap: "6px" }, /* @__PURE__ */ React.createElement(
              Thumbnail,
              {
                height: 30,
                width: 30,
                size: "tiny",
                onClick: () => patchPmNodeAttrs({
                  buttonStyles: {
                    ...pmNodeAttrs?.buttonStyles,
                    buttonSize: "SMALL"
                  }
                }),
                selected: pmNodeAttrs?.buttonStyles?.buttonSize === "SMALL",
                noPadding: true,
                contentAlignment: "center"
              },
              /* @__PURE__ */ React.createElement(Box, { align: "center" }, /* @__PURE__ */ React.createElement(ButtonRoundedSmall, { size: 12 }))
            ), /* @__PURE__ */ React.createElement(
              Thumbnail,
              {
                height: 30,
                width: 30,
                size: "tiny",
                onClick: () => patchPmNodeAttrs({
                  buttonStyles: {
                    ...pmNodeAttrs?.buttonStyles,
                    buttonSize: "MEDIUM"
                  }
                }),
                selected: pmNodeAttrs?.buttonStyles?.buttonSize === "MEDIUM" || !pmNodeAttrs?.buttonStyles?.buttonSize,
                noPadding: true,
                contentAlignment: "center"
              },
              /* @__PURE__ */ React.createElement(Box, { align: "center" }, /* @__PURE__ */ React.createElement(ButtonRoundedSmall, { size: 18 }))
            ), /* @__PURE__ */ React.createElement(
              Thumbnail,
              {
                height: 30,
                width: 30,
                size: "tiny",
                onClick: () => patchPmNodeAttrs({
                  buttonStyles: {
                    ...pmNodeAttrs?.buttonStyles,
                    buttonSize: "LARGE"
                  }
                }),
                selected: pmNodeAttrs?.buttonStyles?.buttonSize === "LARGE",
                noPadding: true,
                contentAlignment: "center"
              },
              /* @__PURE__ */ React.createElement(Box, { align: "center" }, /* @__PURE__ */ React.createElement(ButtonRoundedSmall, { size: 24 }))
            ))
          ), /* @__PURE__ */ React.createElement(
            ColorWithOpacityInput,
            {
              label: t("Embed_Vertical_Design_Panel_Button_Fill_Color"),
              inputDataHook: isHoverState ? SETTINGS_VERTICAL_EMBED_BUTTON_HOVER_FILL_COLOR_INPUT : SETTINGS_VERTICAL_EMBED_BUTTON_FILL_COLOR_INPUT,
              fillPreviewDataHook: isHoverState ? SETTINGS_VERTICAL_EMBED_BUTTON_HOVER_FILL_COLOR_TRIGGER : SETTINGS_VERTICAL_EMBED_BUTTON_FILL_COLOR_TRIGGER,
              fill: {
                type: "color",
                color: isHoverState ? pmNodeAttrs?.buttonStyles?.backgroundColorHover ?? getDefaultColor("buttonBackgroundColorHover") : pmNodeAttrs?.buttonStyles?.backgroundColor ?? getDefaultColor("buttonBackgroundColor"),
                onChange: (color) => {
                  const colorKey = isHoverState ? "backgroundColorHover" : "backgroundColor";
                  logBi({
                    dataHook: isHoverState ? SETTINGS_VERTICAL_EMBED_BUTTON_HOVER_FILL_COLOR_INPUT : SETTINGS_VERTICAL_EMBED_BUTTON_FILL_COLOR_INPUT,
                    value: color
                  });
                  patchPmNodeAttrs({
                    ...pmNodeAttrs,
                    buttonStyles: {
                      ...pmNodeAttrs?.buttonStyles,
                      [colorKey]: color ?? null
                    }
                  });
                }
              },
              onColorPress: () => {
                logBi({
                  dataHook: isHoverState ? SETTINGS_VERTICAL_EMBED_BUTTON_HOVER_FILL_COLOR_INPUT : SETTINGS_VERTICAL_EMBED_BUTTON_FILL_COLOR_INPUT
                });
                openColorPicker(
                  isHoverState ? "buttonBackgroundColorHover" : "buttonBackgroundColor"
                );
              },
              colorPickerRef: buttonFillPickerRef,
              zIndex
            }
          ), /* @__PURE__ */ React.createElement(
            FieldSet,
            {
              legend: isHoverState ? t("Embed_Vertical_Design_Panel_Button_Hover_Text_Color") : t("Embed_Vertical_Design_Panel_Button_Text_Color"),
              legendPlacement: "left",
              columns: "auto 30px",
              alignment: "center"
            },
            /* @__PURE__ */ React.createElement("div", null),
            /* @__PURE__ */ React.createElement(
              FillPreview,
              {
                fill: resolveDisplayColor(
                  isHoverState ? pmNodeAttrs?.buttonStyles?.textColorHover ?? getDefaultColor("buttonTextColorHover") : pmNodeAttrs?.buttonStyles?.textColor ?? getDefaultColor("buttonTextColor")
                ),
                onClick: () => {
                  logBi({
                    dataHook: isHoverState ? SETTINGS_VERTICAL_EMBED_BUTTON_HOVER_TEXT_COLOR_PICKER_TRIGGER : SETTINGS_VERTICAL_EMBED_BUTTON_TEXT_COLOR_PICKER_TRIGGER
                  });
                  openColorPicker(isHoverState ? "buttonTextColorHover" : "buttonTextColor");
                },
                ref: buttonTextPickerRef,
                dataHook: isHoverState ? SETTINGS_VERTICAL_EMBED_BUTTON_HOVER_TEXT_COLOR_PICKER_TRIGGER : SETTINGS_VERTICAL_EMBED_BUTTON_TEXT_COLOR_PICKER_TRIGGER
              }
            )
          ), /* @__PURE__ */ React.createElement(
            ColorWithOpacityInput,
            {
              label: isHoverState ? t("Embed_Vertical_Design_Panel_Button_Hover_Border_Color") : t("Embed_Vertical_Design_Panel_Button_Border_Color"),
              inputDataHook: isHoverState ? SETTINGS_VERTICAL_EMBED_BUTTON_HOVER_BORDER_COLOR_INPUT : SETTINGS_VERTICAL_EMBED_BUTTON_BORDER_COLOR_INPUT,
              fillPreviewDataHook: isHoverState ? SETTINGS_VERTICAL_EMBED_BUTTON_HOVER_BORDER_COLOR_TRIGGER : SETTINGS_VERTICAL_EMBED_BUTTON_BORDER_COLOR_TRIGGER,
              fill: {
                type: "color",
                color: isHoverState ? pmNodeAttrs?.buttonStyles?.borderColorHover ?? getDefaultColor("buttonBorderColorHover") : pmNodeAttrs?.buttonStyles?.borderColor ?? getDefaultColor("buttonBorderColor"),
                onChange: (color) => {
                  const colorKey = isHoverState ? "borderColorHover" : "borderColor";
                  logBi({
                    dataHook: isHoverState ? SETTINGS_VERTICAL_EMBED_BUTTON_HOVER_BORDER_COLOR_INPUT : SETTINGS_VERTICAL_EMBED_BUTTON_BORDER_COLOR_INPUT,
                    value: color
                  });
                  patchPmNodeAttrs({
                    ...pmNodeAttrs,
                    buttonStyles: {
                      ...pmNodeAttrs?.buttonStyles,
                      [colorKey]: color ?? null
                    }
                  });
                }
              },
              onColorPress: () => {
                logBi({
                  dataHook: isHoverState ? SETTINGS_VERTICAL_EMBED_BUTTON_HOVER_BORDER_COLOR_INPUT : SETTINGS_VERTICAL_EMBED_BUTTON_BORDER_COLOR_INPUT
                });
                openColorPicker(
                  isHoverState ? "buttonBorderColorHover" : "buttonBorderColor"
                );
              },
              colorPickerRef: buttonBorderPickerRef,
              zIndex
            }
          ), !isHoverState && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
            NumberInputWithLabel,
            {
              label: t("Embed_Vertical_Design_Panel_Button_Border_Width"),
              dataHook: SETTINGS_VERTICAL_EMBED_BUTTON_BORDER_WIDTH_INPUT,
              suffix: /* @__PURE__ */ React.createElement(Input.Affix, null, t("Common_Units_PX")),
              value: pmNodeAttrs?.buttonStyles?.borderWidth ?? 0,
              min: 0,
              max: 15,
              onChange: (width) => patchPmNodeAttrs({
                ...pmNodeAttrs,
                buttonStyles: {
                  ...pmNodeAttrs?.buttonStyles,
                  borderWidth: width
                }
              }),
              logBi,
              zIndex
            }
          ), /* @__PURE__ */ React.createElement(
            NumberInputWithLabel,
            {
              label: t("Embed_Vertical_Design_Panel_Button_Corner_Radius"),
              dataHook: SETTINGS_VERTICAL_EMBED_BUTTON_CORNER_RADIUS_INPUT,
              suffix: /* @__PURE__ */ React.createElement(Input.Affix, null, t("Common_Units_PX")),
              value: pmNodeAttrs?.buttonStyles?.borderRadius ?? 0,
              min: 0,
              max: 30,
              onChange: (radius) => patchPmNodeAttrs({
                ...pmNodeAttrs,
                buttonStyles: {
                  ...pmNodeAttrs?.buttonStyles,
                  borderRadius: radius
                }
              }),
              logBi,
              zIndex
            }
          )), pmNodeAttrs.hideButton && sectionHelperVisibility.button && /* @__PURE__ */ React.createElement(
            SectionHelper,
            {
              size: "small",
              layout: "horizontal",
              showPrefixIcon: true,
              prefixIcon: /* @__PURE__ */ React.createElement(InfoCircle, null),
              showCloseButton: true,
              skin: "standard",
              fullWidth: true,
              onClose: () => closeSectionHelper("button")
            },
            t("Embed_Vertical_Design_Panel_Section_Helper_Text")
          ))
        }),
        accordionItemBuilder({
          key: "ribbon",
          title: /* @__PURE__ */ React.createElement(AccordionTitle, { title: t("Embed_Vertical_Design_Panel_Ribbon") }),
          children: /* @__PURE__ */ React.createElement(Box, { direction: "vertical", gap: "SP2" }, /* @__PURE__ */ React.createElement(
            ColorWithOpacityInput,
            {
              label: t("Embed_Vertical_Design_Panel_Ribbon_Fill_Color"),
              inputDataHook: SETTINGS_VERTICAL_EMBED_RIBBON_FILL_COLOR_INPUT,
              fillPreviewDataHook: SETTINGS_VERTICAL_EMBED_RIBBON_FILL_COLOR_TRIGGER,
              fill: {
                type: "color",
                color: pmNodeAttrs?.ribbonStyles?.backgroundColor ?? getDefaultColor("ribbonFillColor"),
                onChange: (color) => {
                  logBi({
                    dataHook: SETTINGS_VERTICAL_EMBED_RIBBON_FILL_COLOR_INPUT,
                    value: color
                  });
                  patchPmNodeAttrs({
                    ...pmNodeAttrs,
                    ribbonStyles: {
                      ...pmNodeAttrs?.ribbonStyles,
                      backgroundColor: color ?? null
                    }
                  });
                }
              },
              onColorPress: () => {
                logBi({ dataHook: SETTINGS_VERTICAL_EMBED_RIBBON_FILL_COLOR_INPUT });
                openColorPicker("ribbonFillColor");
              },
              colorPickerRef: ribbonFillPickerRef,
              zIndex
            }
          ), /* @__PURE__ */ React.createElement(
            FieldSet,
            {
              legend: t("Embed_Vertical_Design_Panel_Ribbon_Text_Color"),
              legendPlacement: "left",
              columns: "auto 30px",
              alignment: "center"
            },
            /* @__PURE__ */ React.createElement("div", null),
            /* @__PURE__ */ React.createElement(
              FillPreview,
              {
                fill: resolveDisplayColor(
                  pmNodeAttrs?.ribbonStyles?.textColor ?? getDefaultColor("ribbonTextColor")
                ),
                onClick: () => {
                  logBi({
                    dataHook: SETTINGS_VERTICAL_EMBED_RIBBON_TEXT_COLOR_PICKER_TRIGGER
                  });
                  openColorPicker("ribbonTextColor");
                },
                ref: ribbonTextPickerRef,
                dataHook: SETTINGS_VERTICAL_EMBED_RIBBON_TEXT_COLOR_PICKER_TRIGGER
              }
            )
          ), /* @__PURE__ */ React.createElement(
            ColorWithOpacityInput,
            {
              label: t("Embed_Vertical_Design_Panel_Ribbon_Border_Color"),
              inputDataHook: SETTINGS_VERTICAL_EMBED_RIBBON_BORDER_COLOR_INPUT,
              fillPreviewDataHook: SETTINGS_VERTICAL_EMBED_RIBBON_BORDER_COLOR_TRIGGER,
              fill: {
                type: "color",
                color: pmNodeAttrs?.ribbonStyles?.borderColor ?? getDefaultColor("ribbonBorderColor"),
                onChange: (color) => {
                  logBi({
                    dataHook: SETTINGS_VERTICAL_EMBED_RIBBON_BORDER_COLOR_INPUT,
                    value: color
                  });
                  patchPmNodeAttrs({
                    ...pmNodeAttrs,
                    ribbonStyles: {
                      ...pmNodeAttrs?.ribbonStyles,
                      borderColor: color ?? null
                    }
                  });
                }
              },
              onColorPress: () => {
                logBi({ dataHook: SETTINGS_VERTICAL_EMBED_RIBBON_BORDER_COLOR_INPUT });
                openColorPicker("ribbonBorderColor");
              },
              colorPickerRef: ribbonBorderPickerRef,
              zIndex
            }
          ), /* @__PURE__ */ React.createElement(
            NumberInputWithLabel,
            {
              label: t("Embed_Vertical_Design_Panel_Ribbon_Border_Width"),
              dataHook: SETTINGS_VERTICAL_EMBED_RIBBON_BORDER_WIDTH_INPUT,
              suffix: /* @__PURE__ */ React.createElement(Input.Affix, null, t("Common_Units_PX")),
              value: pmNodeAttrs?.ribbonStyles?.borderWidth ?? 0,
              min: 0,
              max: 15,
              onChange: (width) => patchPmNodeAttrs({
                ribbonStyles: {
                  ...pmNodeAttrs?.ribbonStyles,
                  borderWidth: width
                }
              }),
              logBi,
              zIndex
            }
          ), /* @__PURE__ */ React.createElement(
            NumberInputWithLabel,
            {
              label: t("Embed_Vertical_Design_Panel_Ribbon_Corner_Radius"),
              dataHook: SETTINGS_VERTICAL_EMBED_RIBBON_CORNER_RADIUS_INPUT,
              suffix: /* @__PURE__ */ React.createElement(Input.Affix, null, t("Common_Units_PX")),
              value: pmNodeAttrs?.ribbonStyles?.borderRadius ?? 16,
              min: 0,
              max: 30,
              onChange: (radius) => {
                patchPmNodeAttrs({
                  ribbonStyles: {
                    ...pmNodeAttrs?.ribbonStyles,
                    borderRadius: radius
                  }
                });
              },
              logBi,
              zIndex
            }
          ), pmNodeAttrs.hideRibbon !== false && sectionHelperVisibility.ribbon && /* @__PURE__ */ React.createElement(
            SectionHelper,
            {
              size: "small",
              layout: "horizontal",
              showPrefixIcon: true,
              prefixIcon: /* @__PURE__ */ React.createElement(InfoCircle, null),
              showCloseButton: true,
              skin: "standard",
              fullWidth: true,
              onClose: () => closeSectionHelper("ribbon")
            },
            t("Embed_Vertical_Design_Panel_Section_Helper_Text")
          ))
        })
      ]
    }
  )));
};
export {
  DesignTab
};
//# sourceMappingURL=design-tab.js.map
