import { Replace } from "@wix/wix-ui-icons-common";
import React, { useContext, useEffect, useState } from "react";
import { RicosContext } from "./../../../ricos-context/ricos-context.js";
import { useModalService } from "./../../../ricos-modals/index.js";
import { ToolbarButton } from "./../../../_shared/toolbar-button/toolbar-button.js";
import { DATA_HOOKS } from "../../data-hooks.js";
const VariantSwitcherButton = ({ toolbarItem }) => {
  const [referenceElement, setReferenceElement] = useState(null);
  const [isActive, setIsActive] = useState(toolbarItem.attributes.active);
  const { isMobile, t } = useContext(RicosContext);
  const modalService = useModalService();
  const onClick = toolbarItem.commands.click;
  useEffect(() => {
    modalService.onModalOpened(() => {
      setIsActive(Boolean(toolbarItem.attributes.active));
    });
    modalService.onModalClosed(() => {
      setIsActive(Boolean(toolbarItem.attributes.active));
    });
  }, [modalService]);
  return /* @__PURE__ */ React.createElement(
    ToolbarButton,
    {
      prefix: Replace,
      active: isActive,
      onClick: () => onClick({ isMobile, referenceElement }),
      dataHook: DATA_HOOKS.VARIANT_BUTTON_DATA_HOOK,
      ariaLabel: t("SmartBlock_Toolbar_SwitchLayout_AriaLabel"),
      ref: setReferenceElement,
      label: t("SmartBlock_Toolbar_SwitchLayout_Label"),
      tabIndex: toolbarItem.presentation.tabIndex
    }
  );
};
export {
  VariantSwitcherButton
};
//# sourceMappingURL=variant-switcher-button.js.map
