import { useEffect, useState } from "react"

export const useStorage = (property: string) => {
  const [value, setValue] = useState(null)

  useEffect(() => {
    chrome.storage.sync.get([property], (result) => {
      setValue(result[property] as any)
    })
  }, [property])

  useEffect(() => {
    const listener = changes => {
      if (property in changes) {
        setValue(changes[property].newValue)
      }
    }

    chrome.storage.onChanged.addListener(listener)

    return () =>
      chrome.storage.onChanged.removeListener(listener)
  }, [property])

  return value
}