import React, { useState } from 'react';
import { RouteProp } from '@react-navigation/native';
import { StackNavigationProp } from '@react-navigation/stack';
import { StackParams, Institution } from '../types';
import _get from 'lodash/get';
import Pluggy from 'pluggy-js';
import ConnectStatus from '../components/Connect/ConnectStatus';
import usePollItem from '../hooks/usePollItem';

type ConnectingProps = {
  navigation: StackNavigationProp<StackParams>;
  route: RouteProp<StackParams, 'Connecting'>;
  pluggy: Pluggy;
};

const ConnectingScreen = (props: ConnectingProps) => {
  const { route } = props;
  const { item } = route.params;
  const institution = item.connector as Institution;
  const color = `#${institution.primaryColor}`;
  // const logo = institution.imageUrl;
  const [delay, setDelay] = useState<number | null>(400);
  const freshItem = usePollItem(item.id, delay);
  const status = _get(freshItem, 'status')!;
  const executionStatus = _get(freshItem, 'executionStatus')!;
  const hasFinished = ['OUTDATED', 'LOGIN_ERROR', 'UPDATED'].includes(status);

  if (hasFinished && delay) {
    setDelay(null);
  }
  return <ConnectStatus status={status} executionStatus={executionStatus} color={color} />;
};

ConnectingScreen.displayName = 'ConnectingScreen';
export default ConnectingScreen;