managarten/apps-archived/memoro/apps/mobile/features/memos/hooks/useDirectMemoTitle.ts

import { useState, useEffect, useRef } from 'react';
import { useTranslation } from 'react-i18next';
import { memoRealtimeService } from '../services/memoRealtimeService';
import { useRecordingStore } from '~/features/audioRecordingV2/store/recordingStore';
import { RecordingStatus } from '~/features/audioRecordingV2/types';

interface UseDirectMemoTitleOptions {
	memoId: string;
	initialTitle?: string;
	reactToGlobalRecordingStatus?: boolean;
	onTitleChange?: (title: string, isInitial?: boolean) => void;
}

interface UseDirectMemoTitleReturn {
	title: string;
	isLoading: boolean;
}

/**
 * Hook that replicates DirectMemoTitle functionality using the centralized MemoRealtimeService
 * This provides the same API and behavior as the original DirectMemoTitle component
 */
export function useDirectMemoTitle(options: UseDirectMemoTitleOptions): UseDirectMemoTitleReturn {
	const {
		memoId,
		initialTitle = 'New Recording',
		reactToGlobalRecordingStatus = false,
		onTitleChange,
	} = options;
	const { t } = useTranslation();

	// Local state for the title
	const [title, setTitle] = useState(initialTitle);
	const [isLoading, setIsLoading] = useState(true);
	const [hasFetchedFreshData, setHasFetchedFreshData] = useState(false);

	// Get recording status from the store only if we should react to it
	const recordingStatus = useRecordingStore((state) =>
		reactToGlobalRecordingStatus ? state.status : undefined
	);

	// Ref to track if component is mounted
	const isMountedRef = useRef(true);

	// Handle recording status changes (mimics DirectMemoTitle behavior)
	useEffect(() => {
		if (reactToGlobalRecordingStatus && recordingStatus !== undefined) {
			console.log(`useDirectMemoTitle ${memoId}: Handling recording status:`, recordingStatus);

			// Show recording/uploading status based on the global recording state
			if (
				recordingStatus === RecordingStatus.RECORDING ||
				recordingStatus === RecordingStatus.PAUSED
			) {
				const newTitle = t('memo.status.recording_in_progress');
				setTitle(newTitle);
				onTitleChange?.(newTitle, false);
			} else if (recordingStatus === RecordingStatus.UPLOADING) {
				const newTitle = t('memo.status.uploading_recording');
				setTitle(newTitle);
				onTitleChange?.(newTitle, false);
			}
		}
	}, [recordingStatus, reactToGlobalRecordingStatus, t, memoId, onTitleChange]);

	// Setup centralized subscription
	useEffect(() => {
		let unsubscribe: (() => void) | null = null;

		// Skip subscription for non-latest memos (mimics DirectMemoTitle behavior)
		if (!reactToGlobalRecordingStatus) {
			console.log(
				`useDirectMemoTitle ${memoId}: Skipping subscription (not latest memo), using initial title`
			);

			// For non-latest memos, just use the initialTitle
			if (initialTitle !== title && initialTitle !== 'Loading...') {
				setTitle(initialTitle);
				onTitleChange?.(initialTitle, true);
			}
			setIsLoading(false);
			return;
		}

		console.log(`useDirectMemoTitle ${memoId}: Setting up centralized subscription`);

		// Use the centralized service for memo title subscription
		unsubscribe = memoRealtimeService.subscribeToMemoTitle(memoId, {
			onTitleChange: (newTitle, isInitial) => {
				if (!isMountedRef.current) return;

				console.log(
					`useDirectMemoTitle ${memoId}: Title update - "${newTitle}" (initial: ${isInitial})`
				);

				setTitle(newTitle);
				onTitleChange?.(newTitle, isInitial);

				if (isInitial && !hasFetchedFreshData) {
					setHasFetchedFreshData(true);
					setIsLoading(false);
				} else if (!isInitial) {
					setIsLoading(false);
				}
			},
			initialTitle,
			reactToRecordingStatus: reactToGlobalRecordingStatus,
			translateFunction: t,
		});

		// Cleanup subscription on unmount
		return () => {
			if (unsubscribe) {
				console.log(`useDirectMemoTitle ${memoId}: Cleaning up subscription`);
				unsubscribe();
			}
		};
	}, [
		memoId,
		initialTitle,
		reactToGlobalRecordingStatus,
		t,
		onTitleChange,
		title,
		hasFetchedFreshData,
	]);

	// Cleanup on unmount
	useEffect(() => {
		return () => {
			isMountedRef.current = false;
		};
	}, []);

	return {
		title,
		isLoading,
	};
}

export default useDirectMemoTitle;