import { useState, useEffect, useMemo } from 'react';
import type { Label, ResolvedLabel } from '../api/types';
import { resolveLabels, resolveLabelsSync } from './labelCache';


export function useResolvedLabels(labels: Label[] | undefined): ResolvedLabel[] {
  
  const syncResult = useMemo(() => {
    if (!labels || labels.length === 0) return [];
    return resolveLabelsSync(labels);
  }, [labels]);

  
  
  
  const labelsKey = useMemo(
    () => (labels ? labels.map((l) => `${l.src}:${l.val}`).join(',') : ''),
    [labels],
  );

  const [resolved, setResolved] = useState<{ key: string; result: ResolvedLabel[] }>({
    key: '',
    result: [],
  });

  
  useEffect(() => {
    if (!labels || labels.length === 0) return;

    const currentKey = labels.map((l) => `${l.src}:${l.val}`).join(',');

    let cancelled = false;
    resolveLabels(labels).then((result) => {
      if (!cancelled) {
        setResolved({ key: currentKey, result });
      }
    });

    return () => { cancelled = true; };
  }, [labels]);

  
  if (resolved.key === labelsKey && resolved.result.length > 0) return resolved.result;
  if (syncResult.length > 0) return syncResult;
  return resolved.result;
}