'use client'

import { type ReactNode, createContext, useContext, useRef } from 'react'
import { useStore } from 'zustand'
import { type FoStore, 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>()
  
  if (!storeRef.current) {
    const store = StoreZus()
    storeRef.current = store
  }

  return (
    <StoreContext.Provider value={storeRef.current}>
      {children}
    </StoreContext.Provider>
  )
}

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

  return useStore(storeContext, selector)
}