import { createQueryOptions } from '@/api-client/query-config';
import type { ThemeExtractionResult } from '@/schema/theme-extraction';
import { useQuery } from '@tanstack/react-query';
import { generateThemeCss, type GenerateThemeCssResponse } from './index';

/**
 * テーマCSS生成フック
 * テーマデータが渡された場合のみCSS生成を実行
 */
export function useThemeCss(themeData: ThemeExtractionResult | null, enabled: boolean = true) {
  return useQuery<GenerateThemeCssResponse>({
    ...createQueryOptions<GenerateThemeCssResponse>(),
    queryKey: ['themeCss', themeData ? JSON.stringify(themeData) : 'no-theme'],
    queryFn: () => {
      if (!themeData) {
        return {
          success: true,
          css: undefined,
        };
      }
      return generateThemeCss(themeData);
    },
    enabled: enabled && !!themeData,
    staleTime: Infinity, // テーマデータが同じならキャッシュを使う
  });
}