Dwinzo_dev/app/src/components/ui/log/LoggerContext.tsx

import React, { createContext, useContext, useState, useCallback, useMemo } from "react";

export type LogType = "log" | "info" | "warning" | "error" | "success";

export interface LogEntry {
  id: string;
  type: LogType;
  message: string;
  timestamp: Date;
}

interface LoggerContextValue {
  logs: LogEntry[];
  setLogs: React.Dispatch<React.SetStateAction<LogEntry[]>>;
  isLogListVisible: boolean;
  setIsLogListVisible: React.Dispatch<React.SetStateAction<boolean>>;
  log: (message: string) => void;
  info: (message: string) => void;
  warn: (message: string) => void;
  error: (message: string) => void;
  success: (message: string) => void;
  clear: () => void;
}

const LoggerContext = createContext<LoggerContextValue | undefined>(undefined);

export const LoggerProvider: React.FC<{ children: React.ReactNode }> = ({
  children,
}) => {
  const [logs, setLogs] = useState<LogEntry[]>([]);
  const [isLogListVisible, setIsLogListVisible] = useState<boolean>(false);

  const generateId = useCallback(
    () => Math.random().toString(36).substring(2, 9),
    []
  );

  const addLog = useCallback(
    (type: LogType, message: string) => {
      const newLog: LogEntry = {
        id: generateId(),
        type,
        message,
        timestamp: new Date(),
      };
      setLogs((prevLogs) => [...prevLogs, newLog]);
    },
    [generateId]
  );

  const loggerMethods: LoggerContextValue = useMemo(() => ({
    logs,
    setLogs,
    isLogListVisible,
    setIsLogListVisible,
    log: (message: string) => addLog("log", message),
    info: (message: string) => addLog("info", message),
    warn: (message: string) => addLog("warning", message),
    error: (message: string) => addLog("error", message),
    success: (message: string) => addLog("success", message),
    clear: () => setLogs([]),
  }), [logs, setLogs, isLogListVisible, setIsLogListVisible, addLog]);

  return (
    <LoggerContext.Provider value={loggerMethods}>
      {children}
    </LoggerContext.Provider>
  );
};

export const useLogger = () => {
  const context = useContext(LoggerContext);
  if (!context) {
    throw new Error("useLogger must be used within a LoggerProvider");
  }
  return context;
};