import React, {useMemo} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
import {IconArrowLeft} from '@tabler/icons-react-native';
import {IconButton, Spinner, Typography} from '@components';
import {useGoBack} from '@hooks/useGoBack';
import {useTheme} from '@shared/theme';

import {styles, getBackButtonStyle} from './styles';

interface Props {
  isLoading?: boolean;
  isError?: boolean;
  isReconnecting?: boolean;
  errorText?: string;
  showBackButton?: boolean;
}

export function CallConnectionFeedback({
  isLoading,
  isError,
  errorText,
  showBackButton = isError,
}: Props) {
  const {t} = useTranslation();
  const {top} = useSafeAreaInsets();
  const {theme} = useTheme();
  const {goBack} = useGoBack();
  const backButtonStyle = useMemo(() => getBackButtonStyle(top), [top]);

  return (
    <View style={styles.container}>
      {showBackButton && (
        <View style={backButtonStyle}>
          <IconButton
            Icon={IconArrowLeft}
            iconColor={theme.white}
            onPress={goBack}
            variant="tertiary"
          />
        </View>
      )}
      {isError ? (
        <View style={styles.errorContainer}>
          <Typography variant="s" color={theme.white} align="center">
            {errorText || t('calls.errors.generic')}
          </Typography>
        </View>
      ) : isLoading ? (
        <View accessibilityLabel={t('calls.calling')}>
          <Spinner />
        </View>
      ) : null}
    </View>
  );
}