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, Typography} from '@components';
import ActivityIndicator from '@components/ActivityIndicator';
import {useGoBack} from '@hooks/useGoBack';
import {useTheme} from '@shared/theme';
import {commonStyles} from '@shared/styles';

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

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

export function ConnectionFeedback({
  isLoading,
  isError,
  isReconnecting,
  errorText,
  showBackButton,
}: 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>
      )}
      <View style={commonStyles.flex}>
        {isLoading || isReconnecting ? (
          <View style={styles.loaderContainer}>
            <ActivityIndicator color={theme.white} />
            {isReconnecting && (
              <Typography variant="s" color={theme.white}>
                {t('livestream.reconnecting')}
              </Typography>
            )}
          </View>
        ) : isError ? (
          <View style={styles.errorContainer}>
            <Typography variant="s" color={theme.white} align="center">
              {errorText || t('livestream.errors.generic')}
            </Typography>
          </View>
        ) : null}
      </View>
    </View>
  );
}