import {
  Box,
  Divider,
  FieldSet,
  FillPreview,
  FormField,
  Input,
  Text,
  Thumbnail,
  ToggleSwitch,
  Tooltip
} from "@wix/design-system";
import {
  ObjectPositionLeftSmall,
  ObjectPositionRightSmall,
  ObjectPositionTopSmall
} from "@wix/wix-ui-icons-common";
import lodash from "lodash";
import React, { useContext, useRef } from "react";
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 { LinkPreviewData_Styles_Position } from "./../../ricos-schema/legacy/wix/rich_content/v1/index.js";
import { useBiNext } from "./../../_shared/bi-context-provider/bi-context-provider.js";
import { useResolveDisplayColor } from "./../../_shared/use-resolve-display-color.js";
import { LinkPreviewColorPicker } from "./../../plugin-link-preview/components/link-preview-color-picker.js";
import { linkPreviewModals } from "./../../plugin-link-preview/consts.js";
import {
  SETTINGS_LINKPREVIEW_BACKGROUND_COLOR_INPUT,
  SETTINGS_LINKPREVIEW_BACKGROUND_COLOR_TRIGGER,
  SETTINGS_LINKPREVIEW_BORDER_COLOR_INPUT,
  SETTINGS_LINKPREVIEW_BORDER_COLOR_TRIGGER,
  SETTINGS_LINKPREVIEW_BORDER_WIDTH_INPUT,
  SETTINGS_LINKPREVIEW_CORNER_RADIUS_INPUT,
  SETTINGS_LINKPREVIEW_IMAGE_DISPLAY_TOGGLE,
  SETTINGS_LINKPREVIEW_IMAGE_POSITION_LEFT_THUMBNAIL,
  SETTINGS_LINKPREVIEW_IMAGE_POSITION_RIGHT_THUMBNAIL,
  SETTINGS_LINKPREVIEW_IMAGE_POSITION_TOP_THUMBNAIL,
  SETTINGS_LINKPREVIEW_LINK_COLOR_PICKER_TRIGGER,
  SETTINGS_LINKPREVIEW_SUBTITLE_COLOR_PICKER_TRIGGER,
  SETTINGS_LINKPREVIEW_TITLE_COLOR_PICKER_TRIGGER
} from "./../../plugin-link-preview/data-hooks.js";
import {
  ColorWithOpacityInput,
  usePanelContainerElement
} from "./../../ui-components/index.js";
import { NumberInputWithLabel } from "./../../ui-components/number-input-with-label/number-input-with-label.js";
const DesignTab = ({ nodeId, config, modalId, pmNodeAttrs, patchPmNodeAttrs }) => {
  const { t, isMobile, languageDir } = useContext(RicosContext);
  const isRTL = languageDir === "rtl";
  const modalService = useContext(ModalServiceContext) || {};
  const containerEl = usePanelContainerElement();
  const zIndexService = useContext(ZIndexContext);
  const zIndex = zIndexService.getZIndex("DIALOG");
  const defaultColors = {
    backgroundColor: "#FFFFFF00",
    titleColor: "#000624",
    subtitleColor: "#44485F",
    linkColor: "#868AA5",
    borderColor: "#00000033"
  };
  const backgroundPickerToggleRef = useRef(null);
  const titlePickerToggleRef = useRef(null);
  const subtitlePickerToggleRef = useRef(null);
  const linkPickerToggleRef = useRef(null);
  const borderPickerToggleRef = useRef(null);
  const getPickerToggleRef = (colorType) => {
    switch (colorType) {
      case "backgroundColor":
        return backgroundPickerToggleRef.current;
      case "titleColor":
        return titlePickerToggleRef.current;
      case "subtitleColor":
        return subtitlePickerToggleRef.current;
      case "linkColor":
        return linkPickerToggleRef.current;
      case "borderColor":
        return borderPickerToggleRef.current;
      default:
        return null;
    }
  };
  const openColorPicker = (colorType) => {
    const modalId2 = linkPreviewModals.colorPicker;
    const referenceElement = getPickerToggleRef(colorType) ?? void 0;
    modalService.togglePluginPanel({
      id: modalId2,
      Component: LinkPreviewColorPicker,
      componentProps: {
        modalId: modalId2,
        nodeId,
        referenceElement,
        config,
        colorType,
        onColorSelected: onColorChange(colorType),
        onColorAdded: getLegacyOnColorAdded(colorType),
        defaultColor: defaultColors[colorType]
      },
      isMobile,
      positioning: {
        referenceElement,
        placement: "left"
      },
      type: void 0,
      onClickOutside: {
        on: "pointerup",
        handler: lodash.noop
      },
      focusReturnElement: referenceElement ?? void 0
    });
  };
  const onColorChange = (colorType) => (color) => {
    patchPmNodeAttrs({ styles: { ...pmNodeAttrs?.styles, [colorType]: color } });
  };
  const resolveDisplayColor = useResolveDisplayColor();
  const getLegacyOnColorAdded = (colorType) => {
    switch (colorType) {
      case "backgroundColor":
        return config.onBackgroundColorAdded;
      case "titleColor":
        return config.onTitleColorAdded;
      case "subtitleColor":
        return config.onSubtitleColorAdded;
      case "linkColor":
        return config.onLinkColorAdded;
      case "borderColor":
        return config.onBorderColorAdded;
      default:
        return void 0;
    }
  };
  const logBi = useBiNext({ modalId, pluginId: "linkPreview" });
  return /* @__PURE__ */ React.createElement(Box, { direction: "vertical", overflow: "auto" }, /* @__PURE__ */ React.createElement(Box, { direction: "vertical", gap: "SP2", padding: "SP3" }, /* @__PURE__ */ React.createElement(Box, { direction: "vertical", gap: "SP2" }, /* @__PURE__ */ React.createElement(Box, { paddingBottom: "SP1" }, /* @__PURE__ */ React.createElement(Text, { size: "small", weight: "bold" }, t("LinkPreview_Design_Panel_Image"))), /* @__PURE__ */ React.createElement(
    FormField,
    {
      label: t("LinkPreview_Design_Panel_Image_Display_Show"),
      labelPlacement: "left",
      labelWidth: "1fr"
    },
    /* @__PURE__ */ React.createElement(
      ToggleSwitch,
      {
        checked: pmNodeAttrs?.styles?.thumbnailPosition !== "HIDDEN",
        dataHook: SETTINGS_LINKPREVIEW_IMAGE_DISPLAY_TOGGLE,
        onChange: () => {
          const nextPosition = pmNodeAttrs?.styles?.thumbnailPosition === "HIDDEN" ? "START" : "HIDDEN";
          logBi({
            dataHook: SETTINGS_LINKPREVIEW_IMAGE_DISPLAY_TOGGLE,
            value: nextPosition !== "HIDDEN"
          });
          patchPmNodeAttrs({
            ...pmNodeAttrs,
            styles: {
              ...pmNodeAttrs?.styles,
              thumbnailPosition: nextPosition
            }
          });
        },
        size: "small"
      }
    )
  ), pmNodeAttrs?.styles?.thumbnailPosition !== "HIDDEN" && !isMobile && /* @__PURE__ */ React.createElement(
    FormField,
    {
      label: t("LinkPreview_Design_Panel_Image_Position"),
      labelPlacement: "left",
      labelWidth: "1fr"
    },
    /* @__PURE__ */ React.createElement(Box, { direction: "horizontal", gap: "SP1", align: "left" }, /* @__PURE__ */ React.createElement(
      Tooltip,
      {
        size: "small",
        inline: true,
        content: isRTL ? t("LinkPreview_Design_Panel_Image_Position_Right") : t("LinkPreview_Design_Panel_Image_Position_Left"),
        appendTo: containerEl
      },
      /* @__PURE__ */ React.createElement(
        Thumbnail,
        {
          size: "tiny",
          selected: ["START", "HIDDEN"].includes(
            pmNodeAttrs?.styles?.thumbnailPosition || "HIDDEN"
          ),
          onClick: () => {
            logBi({ dataHook: SETTINGS_LINKPREVIEW_IMAGE_POSITION_LEFT_THUMBNAIL });
            patchPmNodeAttrs({
              ...pmNodeAttrs,
              styles: {
                ...pmNodeAttrs?.styles,
                thumbnailPosition: LinkPreviewData_Styles_Position.START
              }
            });
          },
          noPadding: true,
          width: 30,
          height: 30,
          contentAlignment: "center",
          textPosition: "outside",
          image: isRTL ? /* @__PURE__ */ React.createElement(ObjectPositionRightSmall, { height: "100%" }) : /* @__PURE__ */ React.createElement(ObjectPositionLeftSmall, { height: "100%" }),
          dataHook: SETTINGS_LINKPREVIEW_IMAGE_POSITION_LEFT_THUMBNAIL,
          tooltipProps: { appendTo: containerEl }
        }
      )
    ), /* @__PURE__ */ React.createElement(
      Tooltip,
      {
        size: "small",
        inline: true,
        content: t("LinkPreview_Design_Panel_Image_Position_Top"),
        appendTo: containerEl
      },
      /* @__PURE__ */ React.createElement(
        Thumbnail,
        {
          size: "tiny",
          selected: pmNodeAttrs?.styles?.thumbnailPosition === "TOP",
          onClick: () => {
            logBi({ dataHook: SETTINGS_LINKPREVIEW_IMAGE_POSITION_TOP_THUMBNAIL });
            patchPmNodeAttrs({
              ...pmNodeAttrs,
              styles: {
                ...pmNodeAttrs?.styles,
                thumbnailPosition: LinkPreviewData_Styles_Position.TOP
              }
            });
          },
          noPadding: true,
          width: 30,
          height: 30,
          contentAlignment: "center",
          textPosition: "outside",
          image: /* @__PURE__ */ React.createElement(ObjectPositionTopSmall, { height: "100%" }),
          dataHook: SETTINGS_LINKPREVIEW_IMAGE_POSITION_TOP_THUMBNAIL
        }
      )
    ), /* @__PURE__ */ React.createElement(
      Tooltip,
      {
        size: "small",
        inline: true,
        content: isRTL ? t("LinkPreview_Design_Panel_Image_Position_Left") : t("LinkPreview_Design_Panel_Image_Position_Right"),
        appendTo: containerEl
      },
      /* @__PURE__ */ React.createElement(
        Thumbnail,
        {
          size: "tiny",
          selected: pmNodeAttrs?.styles?.thumbnailPosition === "END",
          onClick: () => {
            logBi({ dataHook: SETTINGS_LINKPREVIEW_IMAGE_POSITION_RIGHT_THUMBNAIL });
            patchPmNodeAttrs({
              ...pmNodeAttrs,
              styles: {
                ...pmNodeAttrs?.styles,
                thumbnailPosition: LinkPreviewData_Styles_Position.END
              }
            });
          },
          noPadding: true,
          width: 30,
          height: 30,
          contentAlignment: "center",
          textPosition: "outside",
          image: isRTL ? /* @__PURE__ */ React.createElement(ObjectPositionLeftSmall, { height: "100%" }) : /* @__PURE__ */ React.createElement(ObjectPositionRightSmall, { height: "100%" }),
          dataHook: SETTINGS_LINKPREVIEW_IMAGE_POSITION_RIGHT_THUMBNAIL
        }
      )
    ))
  ))), /* @__PURE__ */ React.createElement(Divider, null), /* @__PURE__ */ React.createElement(Box, { direction: "vertical", gap: "SP2", padding: "SP3" }, /* @__PURE__ */ React.createElement(Box, { direction: "vertical", gap: "SP2" }, /* @__PURE__ */ React.createElement(Box, { paddingBottom: "SP1" }, /* @__PURE__ */ React.createElement(Text, { size: "small", weight: "bold" }, t("LinkPreview_Design_Panel_Text"))), /* @__PURE__ */ React.createElement(
    FieldSet,
    {
      legend: t("LinkPreview_Design_Panel_Title_Color"),
      legendPlacement: "left",
      columns: "auto 30px",
      alignment: "center"
    },
    /* @__PURE__ */ React.createElement("div", null),
    /* @__PURE__ */ React.createElement(
      FillPreview,
      {
        fill: resolveDisplayColor(pmNodeAttrs?.styles?.titleColor) ?? resolveDisplayColor(defaultColors.titleColor),
        onClick: () => {
          logBi({ dataHook: SETTINGS_LINKPREVIEW_TITLE_COLOR_PICKER_TRIGGER });
          openColorPicker("titleColor");
        },
        ref: titlePickerToggleRef,
        dataHook: SETTINGS_LINKPREVIEW_TITLE_COLOR_PICKER_TRIGGER
      }
    )
  ), /* @__PURE__ */ React.createElement(
    FieldSet,
    {
      legend: t("LinkPreview_Design_Panel_Subtitle_Color"),
      legendPlacement: "left",
      columns: "auto 30px",
      alignment: "center"
    },
    /* @__PURE__ */ React.createElement("div", null),
    /* @__PURE__ */ React.createElement(
      FillPreview,
      {
        fill: resolveDisplayColor(pmNodeAttrs?.styles?.subtitleColor) ?? resolveDisplayColor(defaultColors.subtitleColor),
        onClick: () => {
          logBi({ dataHook: SETTINGS_LINKPREVIEW_SUBTITLE_COLOR_PICKER_TRIGGER });
          openColorPicker("subtitleColor");
        },
        ref: subtitlePickerToggleRef,
        dataHook: SETTINGS_LINKPREVIEW_SUBTITLE_COLOR_PICKER_TRIGGER
      }
    )
  ), /* @__PURE__ */ React.createElement(
    FieldSet,
    {
      legend: t("LinkPreview_Design_Panel_Link_Color"),
      legendPlacement: "left",
      columns: "auto 30px",
      alignment: "center"
    },
    /* @__PURE__ */ React.createElement("div", null),
    /* @__PURE__ */ React.createElement(
      FillPreview,
      {
        fill: resolveDisplayColor(pmNodeAttrs?.styles?.linkColor) ?? resolveDisplayColor(defaultColors.linkColor),
        onClick: () => {
          logBi({ dataHook: SETTINGS_LINKPREVIEW_LINK_COLOR_PICKER_TRIGGER });
          openColorPicker("linkColor");
        },
        ref: linkPickerToggleRef,
        dataHook: SETTINGS_LINKPREVIEW_LINK_COLOR_PICKER_TRIGGER
      }
    )
  ))), /* @__PURE__ */ React.createElement(Divider, null), /* @__PURE__ */ React.createElement(Box, { direction: "vertical", gap: "SP2", padding: "SP3" }, /* @__PURE__ */ React.createElement(Box, { direction: "vertical", gap: "SP2" }, /* @__PURE__ */ React.createElement(Box, { paddingBottom: "SP1" }, /* @__PURE__ */ React.createElement(Text, { size: "small", weight: "bold" }, t("LinkPreview_Design_Panel_Card"))), /* @__PURE__ */ React.createElement(
    ColorWithOpacityInput,
    {
      label: t("LinkPreview_Design_Panel_Background_Color"),
      inputDataHook: SETTINGS_LINKPREVIEW_BACKGROUND_COLOR_INPUT,
      fillPreviewDataHook: SETTINGS_LINKPREVIEW_BACKGROUND_COLOR_TRIGGER,
      fill: {
        type: "color",
        color: pmNodeAttrs?.styles?.backgroundColor ?? defaultColors.backgroundColor,
        onChange: (color) => {
          logBi({ dataHook: SETTINGS_LINKPREVIEW_BACKGROUND_COLOR_INPUT, value: color });
          patchPmNodeAttrs({
            styles: {
              ...pmNodeAttrs?.styles,
              backgroundColor: color ?? null
            }
          });
        }
      },
      onColorPress: () => {
        logBi({ dataHook: SETTINGS_LINKPREVIEW_BACKGROUND_COLOR_INPUT });
        openColorPicker("backgroundColor");
      },
      colorPickerRef: backgroundPickerToggleRef,
      zIndex
    }
  ), /* @__PURE__ */ React.createElement(
    ColorWithOpacityInput,
    {
      label: t("LinkPreview_Design_Panel_Border_Color"),
      inputDataHook: SETTINGS_LINKPREVIEW_BORDER_COLOR_INPUT,
      fillPreviewDataHook: SETTINGS_LINKPREVIEW_BORDER_COLOR_TRIGGER,
      fill: {
        type: "color",
        color: pmNodeAttrs?.styles?.borderColor ?? defaultColors.borderColor,
        onChange: (color) => {
          logBi({ dataHook: SETTINGS_LINKPREVIEW_BORDER_COLOR_INPUT, value: color });
          patchPmNodeAttrs({
            styles: {
              ...pmNodeAttrs?.styles,
              borderColor: color ?? null
            }
          });
        }
      },
      onColorPress: () => {
        logBi({ dataHook: SETTINGS_LINKPREVIEW_BORDER_COLOR_INPUT });
        openColorPicker("borderColor");
      },
      colorPickerRef: borderPickerToggleRef,
      zIndex
    }
  ), /* @__PURE__ */ React.createElement(
    NumberInputWithLabel,
    {
      label: t("LinkPreview_Design_Panel_Border_Width"),
      dataHook: SETTINGS_LINKPREVIEW_BORDER_WIDTH_INPUT,
      suffix: /* @__PURE__ */ React.createElement(Input.Affix, null, t("Common_Units_PX")),
      value: pmNodeAttrs?.styles?.borderWidth ?? 1,
      min: 0,
      max: 15,
      onChange: (width) => patchPmNodeAttrs({ styles: { ...pmNodeAttrs?.styles, borderWidth: width } }),
      logBi,
      zIndex
    }
  ), /* @__PURE__ */ React.createElement(
    NumberInputWithLabel,
    {
      label: t("LinkPreview_Design_Panel_Corner_Radius"),
      dataHook: SETTINGS_LINKPREVIEW_CORNER_RADIUS_INPUT,
      suffix: /* @__PURE__ */ React.createElement(Input.Affix, null, t("Common_Units_PX")),
      value: pmNodeAttrs?.styles?.borderRadius ?? 0,
      min: 0,
      max: 30,
      onChange: (radius) => patchPmNodeAttrs({ styles: { ...pmNodeAttrs?.styles, borderRadius: radius } }),
      logBi,
      zIndex
    }
  ))));
};
export {
  DesignTab
};
//# sourceMappingURL=design-tab.js.map
