export const useSidebar = () => {
    const open = useState<boolean>('sidebar:open', () => true);
    const sidebarWidth = useState<number>('sidebar:width', () => {
        return Number(
            useCookie('sidebar:width', {
                default: () => '226',
                maxAge: 60 * 60 * 24 * 30,
            }).value,
        );
    });

    // I still want the state to update when the cookie change, like it does for the theme cookies
    // but I dont want to use the cookie value as the state value because then when we change the
    // cookie value, we thrash the hell out of the cookie and gobble CPU cycles
    watch(useCookie('sidebar:width'), (value) => {
        sidebarWidth.value = Number(value);
    });

    const toggle = () => {
        open.value = !open.value;
    };
    const close = () => {
        open.value = false;
    };
    const openSidebar = () => {
        open.value = true;
    };

    const resize = (width: number) => {
        const minWidth = 200;
        const maxWidth = 400;
        const clampedWidth = Math.max(minWidth, Math.min(maxWidth, width));
        sidebarWidth.value = clampedWidth;
    };

    const saveWidth = () => {
        useCookie('sidebar:width').value = sidebarWidth.value.toString();
    };

    return {
        open,
        toggle,
        close,
        openSidebar,
        sidebarWidth: readonly(sidebarWidth),
        resize,
        saveWidth,
    };
};