import React, {useCallback} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {IconCircleCheck, IconCircleX} from '@tabler/icons-react-native';
import {Avatar, Button, Title, Typography} from '@components';
import {useSafeAreaBottomPadding} from '@hooks/useSafeAreaBottomPadding';
import {useTheme} from '@shared/theme';
import {getHelpCenterUrl, openUrlFromApp} from '@shared/utils';

import {styles} from './styles';

interface Props {
  variant: 'success' | 'error';
  onPressOk: () => void;
  onRetry?: () => void;
  onCancel?: () => void;
  isLoading?: boolean;
}

export function ReportResult({
  variant,
  onPressOk,
  onRetry,
  onCancel,
  isLoading,
}: Props) {
  const {t, i18n} = useTranslation();
  const {theme, spacing} = useTheme();
  const paddingBottom = useSafeAreaBottomPadding({bottom: spacing.x2});

  const isSuccess = variant === 'success';
  const helpCenterUrl = getHelpCenterUrl(i18n.language);

  const onPressHelpCenter = useCallback(() => {
    if (!helpCenterUrl) return;
    openUrlFromApp(helpCenterUrl);
  }, [helpCenterUrl]);

  const title = isSuccess
    ? t('general.bug_report.success_title')
    : t('general.bug_report.error_title');
  const description = isSuccess
    ? t('general.bug_report.success_description')
    : t('general.bug_report.error_description');

  return (
    <View style={styles.container}>
      <View style={styles.content}>
        <Avatar
          size="md"
          variant={isSuccess ? 'success' : 'error'}
          Icon={isSuccess ? IconCircleCheck : IconCircleX}
        />
        <Title
          title={title}
          description={description}
          titleNumberOfLines={2}
          descriptionNumberOfLines={3}
          center
        />
      </View>
      {isSuccess && helpCenterUrl && (
        <View style={styles.helpRow}>
          <Typography
            variant="xs"
            color={theme.text.neutral.lighter}
            style={styles.helpText}>
            {t('general.bug_report.success_help_prompt')}{' '}
            <Typography
              variant="xs"
              color={theme.text.neutral.brand}
              onPress={onPressHelpCenter}>
              {t('general.bug_report.success_help_link')}
            </Typography>
          </Typography>
        </View>
      )}
      <View
        style={[
          styles.footer,
          {
            paddingBottom,
            backgroundColor: theme.background.elements.default,
            borderTopColor: theme.border.neutral.default,
          },
        ]}>
        {isSuccess ? (
          <Button variant="primary" text="Ok" onPress={onPressOk} />
        ) : (
          <>
            <Button
              variant="primary"
              text={t('general.bug_report.retry')}
              onPress={onRetry ?? onPressOk}
              isLoading={isLoading}
            />
            <Button
              variant="tertiary"
              text={t('general.cancel')}
              onPress={onCancel ?? onPressOk}
            />
          </>
        )}
      </View>
    </View>
  );
}