"use client";

import { useLayoutEffect, useRef, type ReactNode } from "react";

const STORAGE_KEY = "admin-sidebar-scroll";

type AdminSidebarScrollProps = {
  children: ReactNode;
  className?: string;
};

export function AdminSidebarScroll({ children, className }: AdminSidebarScrollProps) {
  const asideRef = useRef<HTMLElement>(null);

  useLayoutEffect(() => {
    const aside = asideRef.current;
    if (!aside) {
      return;
    }

    const saved = sessionStorage.getItem(STORAGE_KEY);
    if (saved) {
      aside.scrollTop = Number(saved);
    }

    const onScroll = () => {
      sessionStorage.setItem(STORAGE_KEY, String(aside.scrollTop));
    };

    const onClick = (event: MouseEvent) => {
      const target = event.target as HTMLElement;
      if (target.closest("a[href]")) {
        sessionStorage.setItem(STORAGE_KEY, String(aside.scrollTop));
      }
    };

    aside.addEventListener("scroll", onScroll, { passive: true });
    aside.addEventListener("click", onClick);
    return () => {
      aside.removeEventListener("scroll", onScroll);
      aside.removeEventListener("click", onClick);
    };
  }, []);

  return (
    <aside className={className} ref={asideRef}>
      {children}
    </aside>
  );
}