import { Box, Input } from "@wix/design-system";
import lodash from "lodash";
import React, { useContext, useRef } from "react";
import {
  EditorContext,
  ModalServiceContext,
  RicosContext,
  ZIndexContext
} from "./../../ricos-context/index.js";
import { toHexFormat } from "./../../ricos-styles/index.js";
import { useBiNext } from "./../../_shared/bi-context-provider/bi-context-provider.js";
import { BorderColorPicker } from "./../components/border-color-picker.js";
import {
  ColorWithOpacityInput,
  NumberInputWithLabel
} from "./../../ui-components/index.js";
import { IMAGE_EDITOR_COLOR_PICKER_MODAL_ID, IMAGE_SETTINGS_MODAL_ID } from "../consts.js";
import {
  SETTINGS_DESIGN_TAB_BORDER_COLOR_PICKER,
  SETTINGS_DESIGN_TAB_BORDER_WIDTH_INPUT,
  SETTINGS_DESIGN_TAB_CORNER_RADIUS_INPUT
} from "../data-hooks.js";
const DesignTab = ({ pmNodeAttrs, patchPmNodeAttrs, nodeId, config }) => {
  const { t, isMobile } = useContext(RicosContext);
  const modalService = useContext(ModalServiceContext) || {};
  const { adapter } = useContext(EditorContext);
  const zIndexService = useContext(ZIndexContext);
  const zIndex = zIndexService.getZIndex("DIALOG");
  const colorPickerRef = useRef(null);
  const logBi = useBiNext({ modalId: IMAGE_SETTINGS_MODAL_ID, pluginId: "image", nodeId });
  const image = nodeId ? adapter.tiptapEditor.view.dom.querySelector(`[data-hook=image-viewer-${nodeId}`) : void 0;
  const imageStyle = image ? window.getComputedStyle(image) : void 0;
  const customImageBorderColor = imageStyle?.getPropertyValue("--ricos-custom-image-border-color");
  const customImageBorderColorHex = customImageBorderColor ? toHexFormat(customImageBorderColor) : "#000000";
  const borderColorValue = pmNodeAttrs.styles?.border.color ?? customImageBorderColorHex.toUpperCase();
  const borderRadiusValue = pmNodeAttrs.styles?.border.radius ?? parseToInt(imageStyle?.getPropertyValue("border-radius")) ?? 0;
  const borderWidthValue = pmNodeAttrs.styles?.border.width ?? parseToInt(imageStyle?.getPropertyValue("border-width")) ?? 0;
  const openColorPicker = () => {
    const modalId = IMAGE_EDITOR_COLOR_PICKER_MODAL_ID;
    const referenceElement = colorPickerRef.current ?? void 0;
    modalService.togglePluginPanel({
      id: modalId,
      Component: BorderColorPicker,
      componentProps: {
        modalId,
        nodeId,
        referenceElement,
        config,
        defaultColor: borderColorValue,
        onColorSelected: (color) => patchPmNodeAttrs({
          styles: {
            border: {
              color: color ?? pmNodeAttrs.styles?.border?.color,
              radius: pmNodeAttrs.styles?.border.radius,
              width: pmNodeAttrs.styles?.border.width
            }
          }
        }),
        onColorAdded: config.onBorderColorAdded
      },
      isMobile,
      positioning: {
        referenceElement,
        placement: "left"
      },
      type: void 0,
      onClickOutside: {
        on: "pointerup",
        handler: lodash.noop
      },
      focusReturnElement: referenceElement ?? void 0
    });
  };
  return /* @__PURE__ */ React.createElement(Box, { direction: "vertical", gap: "SP2", overflow: "auto", paddingTop: "SP3", paddingBottom: "SP3" }, /* @__PURE__ */ React.createElement(Box, { direction: "vertical", gap: "SP2", paddingLeft: "SP3", paddingRight: "SP3" }, /* @__PURE__ */ React.createElement(
    ColorWithOpacityInput,
    {
      label: t("ImagePlugin_Design_Border_Color"),
      inputDataHook: SETTINGS_DESIGN_TAB_BORDER_COLOR_PICKER,
      fill: {
        type: "color",
        color: borderColorValue,
        onChange: (color) => {
          logBi({ dataHook: SETTINGS_DESIGN_TAB_BORDER_COLOR_PICKER, value: color });
          patchPmNodeAttrs({
            styles: {
              border: {
                ...pmNodeAttrs.styles?.border,
                color
              }
            }
          });
        }
      },
      onColorPress: openColorPicker,
      colorPickerRef,
      zIndex
    }
  ), /* @__PURE__ */ React.createElement(
    NumberInputWithLabel,
    {
      label: t("ImagePlugin_Design_Border_Width"),
      dataHook: SETTINGS_DESIGN_TAB_BORDER_WIDTH_INPUT,
      suffix: /* @__PURE__ */ React.createElement(Input.Affix, null, t("Common_Units_PX")),
      value: borderWidthValue,
      min: 0,
      max: 15,
      onChange: (width) => {
        patchPmNodeAttrs({
          styles: {
            border: {
              ...pmNodeAttrs.styles?.border,
              width
            }
          }
        });
      },
      logBi,
      zIndex
    }
  ), /* @__PURE__ */ React.createElement(
    NumberInputWithLabel,
    {
      label: t("ImagePlugin_Design_Corner_Radius"),
      dataHook: SETTINGS_DESIGN_TAB_CORNER_RADIUS_INPUT,
      suffix: /* @__PURE__ */ React.createElement(Input.Affix, null, t("Common_Units_PX")),
      value: borderRadiusValue,
      min: 0,
      max: 300,
      onChange: (radius) => patchPmNodeAttrs({
        styles: {
          border: {
            ...pmNodeAttrs.styles?.border,
            radius
          }
        }
      }),
      logBi,
      zIndex
    }
  )));
};
const parseToInt = (value) => {
  if (value === void 0) {
    return void 0;
  }
  const parsedValue = parseInt(value);
  return isNaN(parsedValue) ? void 0 : parsedValue;
};
export {
  DesignTab
};
//# sourceMappingURL=design-tab.js.map
