const aEventThreshold = 3;

let aCount = 0;
let bCount = 0;
let networkRequestInProgress = false;

// A 이벤트 핸들러
document.getElementById('buttonA').addEventListener('click', () => {
  aCount++;
  console.log(`A 이벤트 발생, 현재 카운트: ${aCount}`);

  if (bCount >= 1) {
    startNetworkRequest();
  }
});

// B 이벤트 핸들러
document.getElementById('buttonB').addEventListener('click', () => {
  bCount++;
  if (aCount >= aEventThreshold && !networkRequestInProgress) {
    console.log('네트워크 호출 조건 만족')
    startNetworkRequest();
  }
});

// C 이벤트 핸들러
document.getElementById('buttonC').addEventListener('click', () => {
  if (networkRequestInProgress) {
    tap(() => console.log('C 이벤트 발생, 취소 시그널 전달')),
    cancelNetworkRequest();
  }
  invokeEventD();
});

// 네트워크 요청 관리
let currentRequest = null;

function startNetworkRequest() {
  console.log('네트워크 요청 시작');
  networkRequestInProgress = true;

  // fetchWithCancel 호출
  currentRequest = fetchWithCancel('https://jsonplaceholder.typicode.com/posts');

  currentRequest.promise
    .then(data => {
      console.log('네트워크 요청 완료:', data);
      networkRequestInProgress = false;
    })
    .catch(err => {
      if (err.name === 'AbortError') {
        console.log('네트워크 요청 취소됨');
      } else {
        console.error('네트워크 요청 중 에러 발생:', err);
      }
      networkRequestInProgress = false;
    });
}

// 네트워크 요청 함수 (AbortController 포함)
function fetchWithCancel(url) {
  const controller = new AbortController();
  const signal = controller.signal;

  const fetchPromise = fetch(url, { signal }).then(response => response.json());

  return { promise: fetchPromise, abort: () => controller.abort() };
}

// 네트워크 요청 취소
function cancelNetworkRequest() {
  if (currentRequest) {
    console.log('네트워크 요청 취소');
    currentRequest.abort();
    networkRequestInProgress = false;
    currentRequest = null;
  }
}

function invokeEventD() {
  console.log('D 동작 실행');
}

import { fromEvent, combineLatest, Subject, from } from 'rxjs';
import { scan, filter, switchMap, takeUntil, tap, finalize, shareReplay } from 'rxjs/operators';

// 이벤트 스트림 생성
const aEvent$ = fromEvent(document.getElementById('buttonA'), 'click'); // A 이벤트
const bEvent$ = fromEvent(document.getElementById('buttonB'), 'click'); // B 이벤트
const cEvent$ = fromEvent(document.getElementById('buttonC'), 'click'); // C 이벤트

const aEventThreshold = 3;

// A 이벤트 발생 횟수 상태 관리
const aCount$ = aEvent$.pipe(scan(count => count + 1, 0));

// 네트워크 이벤트 트리거 조건: A 이벤트가 n번 이상, B이벤트 1번 이상 발생
const trigger$ = combineLatest([aCount$, bEvent$]).pipe(
  filter(([aCount, bEvent]) => aCount >= aEventThreshold && bEvent)
  tap(() => console.log('네트워크 호출 조건 만족'))
);

// C 이벤트로 네트워크 요청 취소 시그널 생성
const cancel$ = cEvent$.pipe(
  tap(() => {
    console.log('C 이벤트 발생, 취소 시그널 전달')
    }),
  shareReplay(1) // 여러 구독에서 재사용 가능하도록 공유
);

// 네트워크 요청
const networkRequest$ = trigger$.pipe(
  switchMap(() => {
    const { promise, abort } = fetchWithCancel('https://jsonplaceholder.typicode.com/users/7?_delay=3000');

    // Observable로 변환하여 취소 관리
    const fetchObservable$ = from(promise).pipe(
      takeUntil(cancel$), // C 이벤트로 취소 처리
      finalize(() => {
        console.log('네트워크 요청 취소');
        abort();
      })
    );

    return fetchObservable$;
  })
);

// 네트워크 요청 완료 시 동작
networkRequest$.subscribe({
  next: data => console.log('네트워크 요청 완료:', data),
  error: err => console.log('네트워크 요청 중 에러 발생:', err),
});

// 취소 이벤트 발생 시 D 동작 실행
cancel$.subscribe(() => {
  invokeEventD();
});

// 네트워크 요청 함수 (AbortController 포함)
function fetchWithCancel(url) {
  const controller = new AbortController();
  const signal = controller.signal;

  const fetchPromise = fetch(url, { signal }).then(response => response.json());

  return { promise: fetchPromise, abort: () => controller.abort() };
}

function invokeEventD() {
  console.log('D 동작 실행');
}

[POST] `/api/zip`
[Body]
- data: JSON
[Response]
- requestId: string;

[GET] `/api/zip/<requestId: string>`
[Response]
- downloadUrl: string | null;

const MyComponent = () => {
  const methods = useForm();
  const { mutateAsync, error: generateError } = useMutation({
    mutationFn: (values) => fetch('/api/zip', {
      method: 'POST',
      body: JSON.stringify(values),
    })
  });
  cons [requestId, setRequestId] = useState(null);

  const { data, error: queryError } = useQuery(
    ['pollDownloadUrl', requestId],
    () => fetch(`/api/zip/${requestId}`),
    {
      enabled: Boolean(requestId), // requestId가 존재하고 폴링이 활성화된 경우에만 실행
      refetchInterval: (data) => {
        if (data.downloadUrl) return undefined;
        return 5000; // 5초마다 폴링
      },
    }
  );

  useEffect(() => {
    if (data?.downloadUrl) {
      downloadFile(data.downloadUrl);
      setRequestId(null);
      toast.dismiss();
    }
  }, [data]);

  useEffect(() => {
    if (generateError || queryError) {
      toast.error((generateError || queryError).message);
    }
  }, [generateError, queryError]);

  const onSubmit = async (values) => {
    try {
      toast('Generating and compressing files');
      const response = await mutateAsync(values);
      
      setRequestId(response.requestId);
    } catch (err) {
      toast.error(err.message);
    }
  };

  return (
    <form onSubmit={methods.handleSubmit(onSubmit)}>
      {/* ... */}
    </form>
  );
};

const MyComponent = () => {
  const methods = useForm();
  const [onGenerateResponse, onPollingResponse$] = useObservableCallback((generateResponse$) =>
    generateResponse$.pipe(
      tap(() => {
        toast('Generating and compressing files');
      }),
      switchMap((response) => {
        return interval(1000 * 5).pipe(
          switchMap(() => fetch(`/api/zip/${response.requestId}`)),
          catchError((error) => {
            toast.error(error.message);
            return EMPTY;
          }),
          takeWhile((res) => {
            return !isString(res.downloadUrl);
          }, true),
        );
      }),
    ),
  );

  useSubscription(onPollingResponse$, ({ downloadUrl }) => {
    if (downloadUrl) {
      downloadFile(downloadUrl);
      toast.dismiss();
    }
  });

  const onSubmit = (values) => {
    fetch('/api/zip', {
      method: 'POST',
      body: JSON.stringify(values),
    })
      .then(onGenerateResponse)
      .catch((err) => toast.error(err.message));
  }

  return (
    <form onSubmit={methods.handleSubmit(onSubmit)}>
      {/* ... */}
    </form>
  );
}

export function List() {
  const { data, isLoading } = useList();
  const invalidate = useInvalidateList();

  // 너무 많은 요청을 방지하기 위한 쓰로틀링
  const [throttledOnClick, throttledOnClickStream$] =
    useObservableCallback<PressEvent>((event$) =>
      event$.pipe(throttleTime(2000)),
    );

  useSubscription(throttledOnClickStream$, invalidateList);

  return (
    <div className="flex flex-col">
      <RefreshButton onPress={throttledOnClick} />

      <Table loading={isLoading} rows={data} />
    </div>
  );
}

import {Observable} from 'rxjs';
import {tap} from 'rxjs/operators';

export enum RxJsLoggingLevel {
    TRACE,
    DEBUG,
    INFO,
    ERROR
}

let rxjsLoggingLevel = RxJsLoggingLevel.INFO;

export function setRxJsLoggingLevel(level: RxJsLoggingLevel) {
    rxjsLoggingLevel = level;
}


export const debug = (level: number, message:string) =>
  (source: Observable<any>) => source
    .pipe(
      tap(val => {
        if (level >= rxjsLoggingLevel) {
            console.log(message + ': ', val);
        }
      })
    );

countdownStartTime$.pipe(
  debug(LogginLevel.DEBUG, "Start Time")
  distinctUntilChanged(),
  switchMap(() =>
    of(animationFrameScheduler.now(), animationFrameScheduler).pipe(
      repeat(),
      map((startTime) => Math.floor((Date.now() - startTime) / 1000)),
      debug(LogginLevel.DEBUG, "How many left?")
      distinctUntilChanged(),
      take(expiresIn),
      scan((timeLeft) => timeLeft - 1, expiresIn),
    ),
  ),
),