import {Assets} from '@pixi/assets';
import {createContext, useContext, useEffect} from 'react';

const context = createContext();

export default context;

const loading = {};

export function useAsset(source) {
  const [assets, setAssets] = useContext(context);
  useEffect(() => {
    if (!assets[source]) {
      if (!loading[source]) {
        (loading[source] = Assets.load(source)).then((asset) => {
          setAssets((assets) => ({
            ...assets,
            [source]: asset,
          }));
        });
      }
    }
  }, [assets, setAssets, source]);
  return assets[source];
}