import { BorderWidth } from "@wix/wix-ui-icons-common";
import React, { useContext, useEffect, useState } from "react";
import { RicosContext } from "./../../../ricos-context/index.js";
import { useModalService } from "./../../../ricos-modals/modal-service-provider.js";
import { ToolbarButton as ToolbarButtonComponent } from "./../../../_shared/toolbar-button/toolbar-button.js";
import { DATA_HOOKS } from "../../data-hooks.js";
const BorderSettingsButton = ({ toolbarItem }) => {
  const { isMobile, t } = useContext(RicosContext);
  const [referenceElement, setReferenceElement] = useState(null);
  const [isActive, setIsActive] = useState(toolbarItem.attributes.active);
  const modalService = useModalService();
  const onClick = () => toolbarItem.commands.click({ referenceElement, isMobile });
  useEffect(() => {
    const handler = () => setIsActive(Boolean(toolbarItem.attributes.active));
    const openedSub = modalService.onModalOpened(handler);
    const closedSub = modalService.onModalClosed(handler);
    return () => {
      openedSub.cancel();
      closedSub.cancel();
    };
  }, [modalService, toolbarItem.attributes.active]);
  return /* @__PURE__ */ React.createElement(
    ToolbarButtonComponent,
    {
      ref: setReferenceElement,
      prefix: BorderWidth,
      active: isActive,
      onClick,
      dataHook: DATA_HOOKS.DESIGN_BUTTON,
      tooltip: t("SmartBlock_Toolbar_Borders_Tooltip"),
      tabIndex: toolbarItem.presentation.tabIndex
    }
  );
};
export {
  BorderSettingsButton
};
//# sourceMappingURL=border-settings-button.js.map
