import React, {useCallback, useEffect} from 'react';
import {View} from 'react-native';
import {StackScreenProps} from '@react-navigation/stack';
import {ParamListBase, StackActions} from '@react-navigation/native';
import Icon from '@components/Icon';
import Text from '@components/Text';
import {useBackHandler} from '@hooks/useBackHandler';
import {COLORS} from '@shared/colors';

import {styles} from './styles';
import {DEFAULT_POP_QUANTITY, TIMEOUT_DELAY} from './constants';

interface SuccessScreenProps extends StackScreenProps<ParamListBase> {
  text?: string;
  popQuantity?: number;
  routeName?: string | string[];
  backgroundColor?: string;
}

function SuccessScreen({
  navigation,
  text,
  popQuantity,
  route,
  routeName,
  backgroundColor = COLORS.PRIMARY,
}: SuccessScreenProps) {
  useEffect(() => {
    const timeout = setTimeout(() => {
      navigation.dispatch(
        StackActions.pop(popQuantity || DEFAULT_POP_QUANTITY),
      );
      routeName &&
        (Array.isArray(routeName) ? routeName : [routeName]).forEach(name =>
          navigation.navigate(name, route.params),
        );
    }, TIMEOUT_DELAY);
    return () => clearTimeout(timeout);
  }, [navigation, popQuantity, route?.params, routeName]);

  const blockBack = useCallback(() => true, []);
  useBackHandler(blockBack);

  return (
    <View style={[styles.container, {backgroundColor}]}>
      <Icon name="check" size="xxl" color={COLORS.GREEN_TWO} />
      <Text style={styles.bodyText}>{text}</Text>
    </View>
  );
}

export default SuccessScreen;