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) => {
        console.log(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 }
}