"use client";

import { useEffect, useRef } from "react";
import { useSidebar } from "@/components/ui/sidebar";
import { getAppShellLayoutConfig } from "@/components/app-shell-layout-utils";
import { useAppSelector } from "@/store/hooks";
import {
  selectAppShellLayoutPreset,
  type AppShellLayoutPreset,
} from "@/store/slices/layout-builder-slice";

/** Applies sidebar expanded/collapsed state when the app shell layout preset changes. */
export function SidebarLayoutSync() {
  const preset = useAppSelector(selectAppShellLayoutPreset);
  const { setOpen, isMobile } = useSidebar();
  const lastSyncedPreset = useRef<AppShellLayoutPreset | null>(null);

  useEffect(() => {
    if (isMobile) return;
    if (lastSyncedPreset.current === preset) return;

    lastSyncedPreset.current = preset;
    const { sidebarExpanded } = getAppShellLayoutConfig(preset);
    setOpen(sidebarExpanded);
  }, [preset, isMobile, setOpen]);

  return null;
}