import React, {useCallback} from 'react';
import {StyleProp, View, ViewStyle} from 'react-native';
import {useTranslation} from 'react-i18next';
import {useNavigation, NavigationProp} from '@react-navigation/native';
import {IconArrowRight} from '@tabler/icons-react-native';
import {Button} from '@components';
import {useCollaboratorStatus} from '@modules/loans/hooks/useCollaboratorStatus';
import {LoansStackParamList} from '@modules/loans/navigation/interfaces';
import {AMPLITUDE_EVENTS, Screens} from '@shared/constants';
import {logAmplitudeEvent} from '@shared/utils';

import {styles} from './styles';

export type HistoryLinkSource = 'request-offer' | 'status';

interface Props {
  source: HistoryLinkSource;
  containerStyle?: StyleProp<ViewStyle>;
}

export function HistoryLink({source, containerStyle}: Props) {
  const {t} = useTranslation();
  const navigation = useNavigation<NavigationProp<LoansStackParamList>>();
  const {hasFinishedPlans, isReady} = useCollaboratorStatus();

  const onPress = useCallback(() => {
    logAmplitudeEvent(AMPLITUDE_EVENTS.LOAN_HISTORY_LINK_CLICKED, {source});
    navigation.navigate(Screens.LOAN_HISTORY);
  }, [navigation, source]);

  if (!isReady || !hasFinishedPlans) {
    return null;
  }

  return (
    <View style={[styles.container, containerStyle]}>
      <Button
        text={t('loans.history.link')}
        variant="flat"
        size="sm"
        IconRight={IconArrowRight}
        onPress={onPress}
      />
    </View>
  );
}