import { withStable } from "react-with-stable";
import { useEffect } from "react-better-effect";

function App({ movie }) {
  const [uppercase, setUppercase] = useState(false);
  const format = useCallback((str) => {
    return uppercase ? str.toUpperCase() : str;
  }, [uppercase]);
  
  useSyncTitle(format, movie);
  useShowRating(format, movie);
  
  return (
    <div>
      <Movie format={format} movie={movie} />
      <Click format={format} />
    </div>
  );
}

function useSyncTitle(format, movie) {
  useEffect(() => {
    document.title = format(movie.name);
  }, [format, movie]);
}

function useShowRating(format, movie) {
  useEffect(($) => {
    (async () => {
      const rating = await fetchRating(movie.id);
      showToast($.format(`This movie's rating is ${rating}`));
    })();
  }, [movie], {format});
}

function Movie({ format, movie }) {
  return <h1>{format(movie.name)}</h1>;
}

const Like = withStable(["format"], function Like({ format }) {
  return <button onClick={() => alert(format("Liked this movie"))}>Like</button>;
});