import { getContext, setContext } from 'svelte';
import { browser } from '$app/environment';
import { SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './constants.js';

export const SIDEBAR_ID = Symbol('sidebar');

export type SidebarVariant = 'sidebar' | 'floating' | 'inset';
export type SidebarCollapsible = 'offcanvas' | 'icon' | 'none';

export type SidebarProps = {
  variant?: SidebarVariant;
  collapsible?: SidebarCollapsible;
  side?: 'left' | 'right';
};

export type SidebarContextValue = {
  state: 'expanded' | 'collapsed';
  open: boolean;
  setOpen: (open: boolean) => void;
  openMobile: boolean;
  setOpenMobile: (open: boolean) => void;
  isMobile: boolean;
  variant: SidebarVariant;
  collapsible: SidebarCollapsible;
  side: 'left' | 'right';
  toggleSidebar: () => void;
};

export function useSidebar() {
  return getContext<SidebarContextValue>(SIDEBAR_ID);
}

export function setSidebarContext(value: SidebarContextValue) {
  setContext(SIDEBAR_ID, value);
}

export { SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON };