Toolbar Controls

/**
 * Storybook toolbar component for color mode switching
 * Renders an IconButton with sun/moon icons based on current mode
 */
const ColorModeTool: React.FC;

// The ColorModeTool is automatically registered by the addon
// Available in Storybook toolbar once addon is configured

// Programmatic access to color mode state
const isDarkMode = localStorage.getItem("chakra-ui-color-mode") === "dark";

// The tool automatically handles:
// - Icon switching (sun/moon)
// - localStorage updates
// - Event emission to stories

/**
 * Storybook toolbar component for layout direction switching
 * Renders an IconButton with directional arrows based on current/target direction
 */
const DirectionTool: React.FC;

// The DirectionTool is automatically registered by the addon
// Available in Storybook toolbar once addon is configured

// The tool manages direction through Storybook globals:
// - Reads from globals[DIRECTION_TOOL_ID] 
// - Updates via setGlobals({ [DIRECTION_TOOL_ID]: direction })
// - Syncs with useAddonState for persistence

/**
 * Addon registration that adds both toolbar tools
 * Tools are conditionally shown based on viewMode (story/docs)
 */
addons.register(ADDON_ID, () => {
  const match = ({ viewMode }: { viewMode?: string }) =>
    Boolean(viewMode && viewMode.match(/^(story|docs)$/));

  addons.add(DIRECTION_TOOL_ID, {
    type: types.TOOL,
    title: "Direction",
    render: DirectionTool,
    match,
  });

  addons.add(COLOR_MODE_TOOL_ID, {
    type: types.TOOL,
    title: "Color Mode", 
    render: ColorModeTool,
    match,
  });
});

// Internal state tracking
const [darkMode, setDarkMode] = React.useState(isDarkMode);

// Event emission on toggle
const handleToggle = () => {
  channel.emit(EVENTS.TOGGLE_COLOR_MODE, !darkMode ? "dark" : "light");
  setDarkMode((prev) => !prev);
};

// Multi-level state management
const [globals, setGlobals] = useGlobals();
const [direction, setDirection] = useAddonState(
  DIRECTION_TOOL_ID,
  globals[DIRECTION_TOOL_ID] || "ltr"
);

// Bidirectional sync between global and addon state
useEffect(() => {
  setGlobals({ [DIRECTION_TOOL_ID]: direction });
}, [direction, setGlobals]);

// Event emission with target direction
const toggleDirection = useCallback(() => {
  const channel = addons.getChannel();
  channel.emit(EVENTS.TOGGLE_DIRECTION, targetDirection);
  setDirection(targetDirection);
}, [setDirection, targetDirection]);

/**
 * Moon icon for dark mode indication
 */
const MoonIcon: React.FC;

/**
 * Sun icon for light mode indication  
 */
const SunIcon: React.FC;

/**
 * Left-to-right arrow icon
 */
const LTRIcon: React.FC<React.SVGProps<SVGSVGElement>>;

/**
 * Right-to-left arrow icon
 */
const RTLIcon: React.FC<React.SVGProps<SVGSVGElement>>;

const EVENTS = {
  TOGGLE_COLOR_MODE: "@chakra-ui/storybook-addon/toggleColorMode",
  TOGGLE_DIRECTION: "@chakra-ui/storybook-addon/toggleDirection", 
};