import React, { createContext, useContext, useMemo, useState, useEffect } from 'react';
import { useMediaQuery } from '@/shared/hooks/useMediaQuery';

/** Desktop sidebar is visible at viewport widths >= 1024px. */
export const SIDEBAR_DESKTOP_MIN_WIDTH = '(min-width: 1024px)';
export const SIDEBAR_MOBILE_MAX_WIDTH = '(max-width: 1023px)';
const MOBILE_BREAKPOINT = SIDEBAR_MOBILE_MAX_WIDTH;

export type SidebarNavContextValue = {
  isMobile: boolean;
  isDrawerOpen: boolean;
  openDrawer: () => void;
  closeDrawer: () => void;
  toggleDrawer: () => void;
};

const SidebarNavContext = createContext<SidebarNavContextValue | undefined>(undefined);

export function useSidebarNav(): SidebarNavContextValue | undefined {
  return useContext(SidebarNavContext);
}

export const SidebarNavProvider: React.FC<{ children: React.ReactNode }> = ({
  children,
}) => {
  const isMobile = useMediaQuery(MOBILE_BREAKPOINT);
  const [isDrawerOpen, setDrawerOpen] = useState(false);

  useEffect(() => {
    if (!isMobile) {
      setDrawerOpen(false);
    }
  }, [isMobile]);

  const value = useMemo<SidebarNavContextValue>(
    () => ({
      isMobile,
      isDrawerOpen,
      openDrawer: () => setDrawerOpen(true),
      closeDrawer: () => setDrawerOpen(false),
      toggleDrawer: () => setDrawerOpen((v) => !v),
    }),
    [isMobile, isDrawerOpen]
  );

  return (
    <SidebarNavContext.Provider value={value}>{children}</SidebarNavContext.Provider>
  );
};