import React, { useCallback, useRef } from 'react';
import { StyleSheet, Text, View, ViewStyle } from 'react-native';
import _isEqual from 'lodash/isEqual';
import { useNavigation } from '@react-navigation/native';
import { StackNavigationProp } from '@react-navigation/stack';
import { StackParams } from '../../types';
import ProgressBar from '../ProgressBar';

type ConnectStatusProp = {
  status: string;
  executionStatus: string;
  color: string;
};

const ConnectStatus = React.memo(
  (props: ConnectStatusProp) => {
    const { executionStatus, color } = props;
    const navigation = useNavigation<StackNavigationProp<StackParams>>();

    const accounts = useRef<number>(0);
    const credit = useRef<number>(0);
    const investments = useRef<number>(0);
    const transactions = useRef<number>(0);

    const durationAccounts = 1500;
    const durationCredit = 4500;
    const durationInvestments = 5000;
    const durationTransactions = 6000;
    const myColor = 'rgb(230, 71, 105)';

    const onAnimationEnds = useCallback(
      animation => {
        if (animation.finished) {
          navigation.replace('Connected');
        }
      },
      [navigation],
    );

    if (
      accounts.current !== 100 &&
      (executionStatus === 'ACCOUNTS_IN_PROGRESS' ||
        executionStatus === 'CREDITCARDS_IN_PROGRESS' ||
        executionStatus === 'INVESTMENTS_IN_PROGRESS' ||
        executionStatus === 'TRANSACTIONS_IN_PROGRESS' ||
        executionStatus === 'IDENTITY_IN_PROGRESS' ||
        executionStatus === 'SUCCESS')
    ) {
      accounts.current = 100;
    }

    if (
      credit.current !== 100 &&
      (executionStatus === 'CREDITCARDS_IN_PROGRESS' ||
        executionStatus === 'INVESTMENTS_IN_PROGRESS' ||
        executionStatus === 'TRANSACTIONS_IN_PROGRESS' ||
        executionStatus === 'IDENTITY_IN_PROGRESS' ||
        executionStatus === 'SUCCESS')
    ) {
      credit.current = 100;
    }

    if (
      investments.current !== 100 &&
      (executionStatus === 'INVESTMENTS_IN_PROGRESS' ||
        executionStatus === 'TRANSACTIONS_IN_PROGRESS' ||
        executionStatus === 'IDENTITY_IN_PROGRESS' ||
        executionStatus === 'SUCCESS')
    ) {
      investments.current = 100;
    }

    if (
      transactions.current !== 100 &&
      (executionStatus === 'TRANSACTIONS_IN_PROGRESS' ||
        executionStatus === 'IDENTITY_IN_PROGRESS' ||
        executionStatus === 'SUCCESS')
    ) {
      transactions.current = 100;
    }

    const containerStyles: ViewStyle = {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: color,
    };

    return (
      <View style={containerStyles}>
        <View style={styles.content}>
          <View>
            <ProgressBar progress={100} duration={1000} color={myColor} />
            <Text style={styles.text}>{'Validating account'}</Text>
          </View>
          <View>
            <ProgressBar progress={accounts.current} duration={durationAccounts} color={myColor} />
            <Text style={styles.text}>{'Retrieving Account data'}</Text>
          </View>
          <View>
            <ProgressBar progress={credit.current} duration={durationCredit} color={myColor} />
            <Text style={styles.text}>{'Recovering credit cards data'}</Text>
          </View>
          <View>
            <ProgressBar
              progress={investments.current}
              duration={durationInvestments}
              color={myColor}
            />
            <Text style={styles.text}>{'Collecting investments'}</Text>
          </View>
          <View>
            <ProgressBar
              progress={transactions.current}
              duration={durationTransactions}
              color={myColor}
              onAnimationEnds={onAnimationEnds}
            />
            <Text style={styles.text}>{'Fetch transactions from the last 12 months'}</Text>
          </View>
        </View>
      </View>
    );
  },
  (prevProps, nextProps) => {
    return _isEqual(prevProps, nextProps);
  },
);

ConnectStatus.displayName = 'ConnectStatus';

const styles = StyleSheet.create({
  content: {
    height: '40%',
    width: '70%',
    justifyContent: 'space-between',
  },
  text: {
    textAlign: 'center',
  },
});

export default ConnectStatus;