import { useEffect, useRef } from 'react';
import { useAppDispatch, useAppState } from './state';

export function useMessaging() {
    const dispatch = useAppDispatch();
    const { vscode, design } = useAppState();
    const initializedRef = useRef(false);

    useEffect(() => {
        const handler = (event: MessageEvent) => {
            const message = event.data;
            switch (message.type) {
                case 'designData':
                case 'loadDesign':
                    initializedRef.current = true;
                    dispatch({ type: 'init', payload: message.data });
                    break;
                default:
                    break;
            }
        };
        window.addEventListener('message', handler);
        return () => window.removeEventListener('message', handler);
    }, [dispatch]);

    useEffect(() => {
        if (!initializedRef.current) return;
        vscode.postMessage({ type: 'designUpdated', data: design });
    }, [design, vscode]);

    useEffect(() => {
        vscode.postMessage({ type: 'getDesignData' });
        vscode.postMessage({ type: 'webviewReady' });
    }, [vscode]);
}