import { usePrevious } from "@applicaster/zapp-react-native-utils/reactHooks/utils";
import React, { Suspense, useEffect } from "react";
import { Suspender } from "./Suspender";

interface Props {
  freeze: boolean;
  children: React.ReactNode;
  placeholder?: React.ReactNode;
  onRelease?: () => void;
}

export function Freeze({
  freeze,
  children,
  placeholder = null,
  onRelease,
}: Props) {
  const prevFreeze = usePrevious(freeze);

  useEffect(() => {
    if (prevFreeze && !freeze && onRelease) {
      onRelease();
    }
  }, [freeze, onRelease, prevFreeze]);

  return (
    <Suspense fallback={placeholder}>
      <Suspender freeze={freeze}>{children}</Suspender>
    </Suspense>
  );
}