import { useEffect, useState } from "react";

const KEY = "app_name";
const EVENT = "app-name-changed";
const DEFAULT = "GuardForce Pro";

export function useAppName() {
  const [name, setName] = useState<string>(DEFAULT);

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

  const save = (value: string) => {
    const v = value.trim();
    if (v) localStorage.setItem(KEY, v);
    else localStorage.removeItem(KEY);
    window.dispatchEvent(new Event(EVENT));
  };

  return { name, save, defaultName: DEFAULT };
}