import { useEffect, useState } from "react";

const KEY = "app_logo_data_url";
const EVENT = "app-logo-changed";

export function useAppLogo() {
  const [logo, setLogo] = useState<string | null>(null);

  useEffect(() => {
    setLogo(localStorage.getItem(KEY));
    const onChange = () => setLogo(localStorage.getItem(KEY));
    window.addEventListener(EVENT, onChange);
    window.addEventListener("storage", onChange);
    return () => {
      window.removeEventListener(EVENT, onChange);
      window.removeEventListener("storage", onChange);
    };
  }, []);

  const setFromDataUrl = (dataUrl: string) => {
    localStorage.setItem(KEY, dataUrl);
    window.dispatchEvent(new Event(EVENT));
  };
  const clear = () => {
    localStorage.removeItem(KEY);
    window.dispatchEvent(new Event(EVENT));
  };

  return { logo, setFromDataUrl, clear };
}