import type { ComputedRef, Ref } from 'vue';
import { createContext } from 'reka-ui';

export const SIDEBAR_COOKIE_NAME = 'sidebar:state';
export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
export const SIDEBAR_WIDTH = '16rem';
export const SIDEBAR_WIDTH_MOBILE = '18rem';
export const SIDEBAR_WIDTH_ICON = '3rem';
export const SIDEBAR_KEYBOARD_SHORTCUT = 'b';

export const getSidebarWidth = (size: string) => {
  if (size === 'small') return '13rem';
  if (size === 'large') return '18rem';
  return SIDEBAR_WIDTH;
};

export const [useSidebar, provideSidebarContext] = createContext<{
  color: string;
  size: string;
  state: ComputedRef<'expanded' | 'collapsed'>;
  open: Ref<boolean>;
  setOpen: (value: boolean) => void;
  isMobile: Ref<boolean>;
  openMobile: Ref<boolean>;
  setOpenMobile: (value: boolean) => void;
  toggleSidebar: () => void;
}>('Sidebar');