import { useState } from "react"

/** Returns a state variable that is persisted in local storage */
export function usePersistedState<T>(key: string, defaultValue: T): [T, (value: T) => void] {
  const [value, setValue] = useState<T>(() => {
    const persistedValue = localStorage.getItem(key)
    if (persistedValue) {
      return JSON.parse(persistedValue)
    } else {
      return defaultValue
    }
  })

  function setValueAndPersist(value: T | ((prev: T) => T)) {
    localStorage.setItem(key, JSON.stringify(value))
    setValue(value)
  }

  return [value, setValueAndPersist]
}

/** Non-hook version of usePersistedState */
export function getPersistedState<T>(key: string, defaultValue: T): T {
  const persistedValue = localStorage.getItem(key)
  if (persistedValue) {
    return JSON.parse(persistedValue)
  } else {
    return defaultValue
  }
}