stack/apps/web/src/hooks/useChatOverlay.ts

/**
 * @file useChatOverlay.ts
 * @description Hook for managing the global chat overlay state
 */

import { useState, useEffect, useCallback } from "react";

interface ChatOverlayState {
  isOpen: boolean;
  isMinimized: boolean;
}

interface UseChatOverlayResult extends ChatOverlayState {
  open: () => void;
  close: () => void;
  minimize: () => void;
  expand: () => void;
  toggle: () => void;
  toggleMinimize: () => void;
}

const STORAGE_KEY = "chatOverlayState";

const DEFAULT_STATE: ChatOverlayState = {
  isOpen: false,
  isMinimized: false,
};

/**
 * Load state from localStorage
 */
function loadState(): ChatOverlayState {
  if (typeof window === "undefined") {
    return DEFAULT_STATE;
  }

  try {
    const stored = window.localStorage.getItem(STORAGE_KEY);
    if (stored) {
      return JSON.parse(stored) as ChatOverlayState;
    }
  } catch (error) {
    console.warn("Failed to load chat overlay state from localStorage:", error);
  }

  return DEFAULT_STATE;
}

/**
 * Save state to localStorage
 */
function saveState(state: ChatOverlayState): void {
  if (typeof window === "undefined") {
    return;
  }

  try {
    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
  } catch (error) {
    console.warn("Failed to save chat overlay state to localStorage:", error);
  }
}

/**
 * Custom hook for managing chat overlay state
 * Persists state to localStorage for consistency across page refreshes
 */
export function useChatOverlay(): UseChatOverlayResult {
  const [state, setState] = useState<ChatOverlayState>(loadState);

  // Persist state changes to localStorage
  useEffect(() => {
    saveState(state);
  }, [state]);

  const open = useCallback(() => {
    setState({ isOpen: true, isMinimized: false });
  }, []);

  const close = useCallback(() => {
    setState((prev) => ({ ...prev, isOpen: false }));
  }, []);

  const minimize = useCallback(() => {
    setState((prev) => ({ ...prev, isMinimized: true }));
  }, []);

  const expand = useCallback(() => {
    setState((prev) => ({ ...prev, isMinimized: false }));
  }, []);

  const toggle = useCallback(() => {
    setState((prev) => ({ ...prev, isOpen: !prev.isOpen }));
  }, []);

  const toggleMinimize = useCallback(() => {
    setState((prev) => ({ ...prev, isMinimized: !prev.isMinimized }));
  }, []);

  return {
    ...state,
    open,
    close,
    minimize,
    expand,
    toggle,
    toggleMinimize,
  };
}