"use client";

import { useVariant } from "@unleash/proxy-client-react";
import { useEffect, useRef, memo } from "react";

interface FlagVariantFetcherProps {
  flag: string;
  onVariantLoaded: (flag: string, variant: string | undefined) => void;
}

/**
 * Компонент для получения варианта одного флага
 * Каждый экземпляр этого компонента вызывает useVariant на верхнем уровне
 * Это позволяет обходить ограничение правил хуков React
 * 
 * ВАЖНО: Мемоизация и useRef критически важны для предотвращения
 * множественных impression событий. Каждый вызов useVariant() генерирует
 * новое impression событие, поэтому минимизируем ре-рендеры.
 * 
 * В aura-webapp дедупликации нет - каждое impression отправляется в GA напрямую.
 */
export const FlagVariantFetcher = memo(function FlagVariantFetcher({ flag, onVariantLoaded }: FlagVariantFetcherProps) {
  const variant = useVariant(flag);
  const lastVariantRef = useRef<string | undefined>(undefined);
  
  useEffect(() => {
    const currentVariant = variant?.name;
    
    // Отправляем только если вариант изменился
    if (currentVariant !== lastVariantRef.current) {
      lastVariantRef.current = currentVariant;
      onVariantLoaded(flag, currentVariant);
    }
  }, [flag, variant?.name, onVariantLoaded]);
  
  return null; // Этот компонент не рендерит UI
});
