import {
  createContext,
  useContext,
  // useEffect,
  useMemo,
  useRef,
  // useState,
} from 'react';
import { useParams } from 'react-router-dom';
import { useLazyQuery, gql } from '@apollo/client';
import { useStatelessSubscription } from 'lib/apollo';
import { ALLIANCE } from './schema/queries';

import {
  AllianceEventsSubscription,
  AllianceEventsSubscriptionVariables,
  AllianceQuery,
} from 'types/graphql';

interface AllianceContextValue {
  allianceId: string | undefined;
  isOwner: boolean;
}

export const ALLIANCE_EVENTS = gql`
  subscription ALLIANCE_EVENTS($allianceId: ID!) {
    event: listenOnAllianceEvents(channelId: $allianceId) {
      alliance {
        id
        status
      }
      channelId
    }
  }
`;

export const AllianceContext = createContext<AllianceContextValue | null>(null);

export const useAllianceContext = () => {
  const context = useContext(AllianceContext);
  if (context === null) {
    throw new Error('useAllianceContext must be used within a AllianceContext');
  }
  return context;
};

export const AllianceProvider = ({
  data,
  children,
}: {
  data: AllianceQuery['alliance'];
  children: React.ReactNode;
}) => {
  const { allianceId } = useParams();
  // const lastUpdated = useRef(data.lastUpdated);
  // const [wasUpdated, setWasUpdated] = useState(false);

  const [queryAllianceData] = useLazyQuery(ALLIANCE, {
    variables: { allianceId },
  });

  // useEffect(() => {
  //   console.log('data', data);
  //   if (
  //     data.status === 'finished' &&
  //     data.lastUpdated !== lastUpdated.current
  //   ) {
  //     lastUpdated.current = data.lastUpdated;
  //     setWasUpdated(true);
  //     console.log('alliance was updated');
  //   }
  // }, [data]);

  const subscription = useRef<boolean>(false);
  useStatelessSubscription<
    AllianceEventsSubscription,
    AllianceEventsSubscriptionVariables
  >(ALLIANCE_EVENTS, {
    skip: !allianceId,
    variables: { allianceId: allianceId! },
    onUpdate: (data) => {
      console.log('AllianceProvider subscription', data);
      queryAllianceData();
    },
    onError: (err, sub) => {
      console.log('AllianceProvider subscription', err);
    },
    onSubscribe: () => {
      if (subscription.current) {
        queryAllianceData();
      } else {
        subscription.current = true;
      }
    },
  });

  const isOwner = data.createdBy.me;

  const ctx = useMemo(
    () => ({
      allianceId,
      isOwner,
      // wasUpdated,
    }),
    [
      allianceId,
      isOwner,
      // wasUpdated
    ]
  );

  return <AllianceContext.Provider value={ctx} children={children} />;
};