'use client'

import { type ReactNode, createContext, useContext, useRef } from 'react'
import { useStore } from 'zustand'
import { type DmStore, StoreZus } from './store'


export type StoreApi = ReturnType<typeof StoreZus>

export const StoreContext = createContext<StoreApi | undefined>(
  undefined,
)

export interface StoreProviderProps {
  children: ReactNode
}

export const StoreProvider = ({
  children,
}: StoreProviderProps) => {
  const storeRef = useRef<StoreApi | null>(null)
  if (!storeRef.current) {
    // Create store instance if not initialized
    storeRef.current = StoreZus() as StoreApi
  }
  return (
    <StoreContext.Provider value={storeRef.current}>
      {children}
    </StoreContext.Provider>
  )
}

export const useDmStore = <T,>(
  selector: (store: DmStore) => T,
): T => {
  const storeContext = useContext(StoreContext)
  if (!storeContext) {
    throw new Error(`useStore must be used within StoreProvider`)
  }

  return useStore(storeContext, selector)
}