'use client';

/**
 * useDevFill Hook
 *
 * 각 폼 컴포넌트에서 DevFill 기능을 사용하기 위한 hook
 *
 * 사용법:
 * ```tsx
 * function MyFormComponent() {
 *   const [formData, setFormData] = useState(initialData);
 *
 *   useDevFill('quote', (data) => {
 *     setFormData(data as QuoteFormData);
 *   });
 *
 *   return <form>...</form>;
 * }
 * ```
 */

import { useEffect, useCallback } from 'react';
import { useDevFillContext, type DevFillPageType } from './DevFillContext';

type FillFormCallback<T = unknown> = (data: T) => void | Promise<void>;

/**
 * DevFill hook
 *
 * @param pageType - 현재 페이지 타입
 * @param onFill - 데이터 채우기 콜백 (DevToolbar에서 호출됨)
 */
export function useDevFill<T = unknown>(
  pageType: DevFillPageType,
  onFill: FillFormCallback<T>
) {
  const {
    isEnabled,
    setCurrentPage,
    registerFillForm,
    unregisterFillForm,
    flowData,
  } = useDevFillContext();

  // 안정적인 콜백 참조
  const stableFillCallback = useCallback(
    (data?: unknown) => {
      return onFill(data as T);
    },
    [onFill]
  );

  // 컴포넌트 마운트 시 등록, 언마운트 시 해제
  useEffect(() => {
    if (!isEnabled) return;

    // 현재 페이지 설정
    setCurrentPage(pageType);

    // 폼 채우기 함수 등록
    registerFillForm(pageType, stableFillCallback);

    return () => {
      // 클린업: 현재 페이지 해제 및 함수 등록 해제
      setCurrentPage(null);
      unregisterFillForm(pageType);
    };
  }, [isEnabled, pageType, setCurrentPage, registerFillForm, unregisterFillForm, stableFillCallback]);

  // 플로우 데이터 반환 (이전 단계에서 생성된 ID 등)
  return {
    isEnabled,
    flowData,
  };
}

export default useDevFill;