import { useQuery, useSubscription } from '@apollo/client';
import { EnrichmentProgress } from './EnrichmentProgress';
import {
  ENRICHMENT_STATUS,
  ENRICHMENT_STATUS_EVENTS,
  EnrichmentStatusData,
  EnrichmentStatusVariables,
  EnrichmentStatusEventData,
  EnrichmentStatusEventVariables,
} from './schema';

type EnrichmentStatusSubscriptionProps = {
  processId: string;
};

export const EnrichmentStatusSubscription = ({
  processId,
}: EnrichmentStatusSubscriptionProps) => {
  const query = useQuery<EnrichmentStatusData, EnrichmentStatusVariables>(
    ENRICHMENT_STATUS,
    { variables: { processId } }
  );

  const subscription = useSubscription<
    EnrichmentStatusEventData,
    EnrichmentStatusEventVariables
  >(ENRICHMENT_STATUS_EVENTS, {
    variables: {
      channelId: processId.split('-')[0],
      collectionId: processId,
    },
  });

  if (subscription.data && subscription.data.enrichment) {
    const { process } = subscription.data.enrichment;
    return <EnrichmentProgress {...process} />;
  } else if (query.data && query.data.enrichment) {
    const process = query.data.enrichment;
    return <EnrichmentProgress {...process} />;
  } else {
    return (
      <EnrichmentProgress
        status="initial"
        tasksTotal={0}
        tasksCompleted={0}
        estimatedTimeRemaining={0}
      />
    );
  }
};