import {
  createContext,
  createRenderEffect,
  createSignal,
  untrack,
  useContext,
  type Accessor,
  type Signal,
} from "solid-js";

export type HeroSource = {
  [key: string | symbol | number]: DOMRect | undefined;
};

const HeroSourceContext = createContext<Signal<HeroSource>>(undefined);

export const HeroSourceProvider = HeroSourceContext.Provider;

function useHeroSource() {
  return useContext(HeroSourceContext);
}

export function useHeroSignal(
  key: string | symbol | number,
): Accessor<DOMRect | undefined> {
  const source = useHeroSource();
  if (source) {
    const [get, set] = createSignal<DOMRect>();

    createRenderEffect(() => {
      const value = source[0]();
      console.debug("value", value);
      if (value[key]) {
        set(value[key]);
        source[1]((x) => {
          const cpy = Object.assign({}, x);
          delete cpy[key];
          return cpy;
        });
      }
    });

    return get;
  } else {
    return () => undefined;
  }
}