import * as React from "react";
import database, {
  FirebaseDatabaseTypes,
} from "@react-native-firebase/database";

export function useFirebase<T = any>(path: string) {
  const [data, setData] = React.useState<T>();
  const [loading, setLoading] = React.useState(true);

  const onUpdate = React.useMemo(
    () => (data: FirebaseDatabaseTypes.DataSnapshot) => {
      setData(data.val());
      setLoading(false);
    },
    [path]
  );

  React.useEffect(() => {
    const ref = database().ref(path);
    ref.on("value", onUpdate);
    return () => ref.off("value", onUpdate);
  }, [path]);

  return {
    data,
    loading,
  };
}

export function useFirebases<T = any>(paths: string[]) {
  const [data, setData] = React.useState<{ data: T; loading: boolean }[]>([]);

  const onUpdate = React.useMemo(
    () => (firebaseData: FirebaseDatabaseTypes.DataSnapshot, index: number) => {
      data[index] = { data: firebaseData.val(), loading: false };
      setData([...data]);
    },
    [...paths, setData]
  );

  React.useEffect(() => {
    const refs: FirebaseDatabaseTypes.Reference[] = [];
    setData(paths.map(() => ({ loading: true, data: {} as T })));
    paths.forEach((path: string, index: number) => {
      const ref = database().ref(path);
      ref.on("value", (item: any) => onUpdate(item, index));
      refs.push(ref);
    });

    return () =>
      refs.forEach((ref, index) =>
        ref.off("value", (item: any) => onUpdate(item, index))
      );
  }, paths);

  return data;
}