import { useEffect, useState } from 'react';
import { Subscription } from 'apollo-client/util/Observable';
import client from '../config/apollo';

function getQueryName(query: any) {
  return query.definitions[0].selectionSet.selections[0].name.value;
}

const useGraphQlQuery = <T>(
  query: any,
  variables?: DictType<string | number>,
  subscriptionQuery?: any
): [T | null, boolean, any | null] => {
  const [data, setData] = useState<T | null>(null);
  const [error, setError] = useState();
  const [loading, setLoading] = useState<boolean>(false);
  const [subscription, setSubscription] = useState<Subscription | null>(null);

  useEffect(() => {
    setLoading(true);
    client
      .query({ query, variables })
      .then(res => setData(res.data[getQueryName(query)]))
      .catch(err => setError(err))
      .finally(() => setLoading(false));

    if (subscriptionQuery) {
      const sub = client.subscribe({ query: subscriptionQuery, variables }).subscribe(res => {
        setData((oldstate: any) => {
          const x = res.data[getQueryName(subscriptionQuery)];
          return { ...oldstate, ...x };
        });
      });
      setSubscription(sub);
    }

    return () => {
      if (subscription) {
        subscription.unsubscribe();
      }
    };
  }, [query, subscriptionQuery]);

  return [data, loading, error];
};

export default useGraphQlQuery;