import * as React from "react";
import { Spinner } from "@applicaster/zapp-react-native-ui-components/Components/Spinner";

import {
  favoritesListener,
  getAllFavorites,
} from "@applicaster/zapp-react-native-bridge/Favorites";

import { FavoritesComponent } from "./FavoritesComponent";

const createFeed = (entry: ZappEntry[]): ZappFeed => ({
  id: "fav",
  type: { value: "feed" },
  title: "Favorites",
  entry,
});

type Props = {
  screenData: {
    ui_components: [{ id: string }];
  };
};

export function Favorites({ screenData }: Props) {
  const [favouritesFeed, setFavouritesFeed] =
    React.useState<Nullable<ZappFeed>>(null);

  let disposeHandler;

  const fetchFavourites = async (newFavorites = [], dispose = null) => {
    if (dispose && !disposeHandler) {
      disposeHandler = dispose;
    }

    if (newFavorites && newFavorites.length !== 0) {
      setFavouritesFeed(createFeed(newFavorites));
    } else {
      const favorites = await getAllFavorites();
      setFavouritesFeed(createFeed(favorites));
    }
  };

  React.useEffect(() => {
    favoritesListener.on("FAVORITES_CHANGED", fetchFavourites);

    fetchFavourites();

    return () => {
      if (disposeHandler) {
        disposeHandler({});
      }
    };
  }, []);

  if (!favouritesFeed) {
    return <Spinner />;
  }

  const component = screenData?.ui_components?.[0];

  return (
    <FavoritesComponent
      component={component as ZappUIComponent}
      feed={favouritesFeed}
    />
  );
}