import { createStore } from 'zustand/vanilla'
import { persist, createJSONStorage } from 'zustand/middleware'
import { get, set } from 'idb-keyval'

const storage = createJSONStorage(() => ({
  getItem: async (name) => {
    const value = await get(name)
    return value ?? null
  },
  setItem: async (name, value) => {
    await set(name, value)
  },
  removeItem: async (name) => {
    await del(name)
  },
}))

export const store = createStore(
  persist(
    (set, get) => ({
      _hydrated: false,
      user: null,
      items: [],
      route: 'home',
      setUser: (user) => set({ user }),
      addItem: (item) => set(s => ({ items: [...s.items, item] })),
      removeItem: (id) => set(s => ({ items: s.items.filter(i => i.id !== id) })),
      navigate: (route) => set({ route }),
    }),
    {
      name: 'app-store',
      storage,
      onRehydrateStorage: () => {
        return (state, error) => {
          if (!error) {
            store.setState({ _hydrated: true })
          }
        }
      },
    }
  )
)