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

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

const HeroSourceContext = createContext<Signal<HeroSource>>(
  /* __@PURE__ */ undefined,
);

export const HeroSourceProvider = HeroSourceContext.Provider;

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

/**
 * Use hero value for the {@link key}.
 *
 * Note: the setter here won't set the value of the hero source.
 * To set hero source, use {@link useHeroSource} and set the corresponding key.
 */
export function useHeroSignal(
  key: string | symbol | number,
): Signal<HTMLElement | undefined> {
  const source = useHeroSource();
  if (source) {
    const [get, set] = createSignal<HTMLElement>();

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

    return [get, set];
  } else {
    console.debug("no hero source")
    return [() => undefined, () => undefined];
  }
}