import { useAtomValue } from 'jotai';
import { useCallback } from 'react';
import { useLocalStorage } from 'react-use';
import { activeWorkspaceIdAtom } from './useActiveWorkspace';

export function useSidebarWidth() {
  const activeWorkspaceId = useAtomValue(activeWorkspaceIdAtom);
  const [width, setWidth] = useLocalStorage<number>(
    `sidebar_width::${activeWorkspaceId ?? 'n/a'}`,
    250,
  );
  const resetWidth = useCallback(() => setWidth(250), [setWidth]);
  return [width ?? null, setWidth, resetWidth] as const;
}