aliasvault/apps/mobile-app/components/EmailCard.tsx

import { router } from 'expo-router';
import { useEffect, useState } from 'react';
import { StyleSheet, View, TouchableOpacity } from 'react-native';

import type { Credential } from '@/utils/dist/shared/models/vault';
import type { MailboxEmail } from '@/utils/dist/shared/models/webapi';

import { useColors } from '@/hooks/useColorScheme';

import { ThemedText } from '@/components/themed/ThemedText';
import { IconSymbol } from '@/components/ui/IconSymbol';
import { IconSymbolName } from '@/components/ui/IconSymbolName';
import { useDb } from '@/context/DbContext';

type EmailCardProps = {
  email: MailboxEmail;
};

/**
 * Email card component.
 */
export function EmailCard({ email }: EmailCardProps) : React.ReactNode {
  const colors = useColors();
  const dbContext = useDb();
  const [associatedCredential, setAssociatedCredential] = useState<Credential | null>(null);

  /**
   * Load the associated credential for this email.
   */
  useEffect(() => {
    /**
     * Load the credential associated with the email's recipient address.
     */
    const loadCredential = async (): Promise<void> => {
      if (!dbContext?.sqliteClient || !email.toLocal || !email.toDomain) {
        return;
      }

      const emailAddress = `${email.toLocal}@${email.toDomain}`;
      const credential = await dbContext.sqliteClient.getCredentialByEmail(emailAddress);
      setAssociatedCredential(credential);
    };

    loadCredential();
  }, [dbContext?.sqliteClient, email.toLocal, email.toDomain]);

  /**
   * Format the email date.
   */
  const formatEmailDate = (dateSystem: string): string => {
    const now = new Date();
    const emailDate = new Date(dateSystem);
    const secondsAgo = Math.floor((now.getTime() - emailDate.getTime()) / 1000);

    if (secondsAgo < 60) {
      return 'just now';
    } else if (secondsAgo < 3600) {
      const minutes = Math.floor(secondsAgo / 60);
      return `${minutes} ${minutes === 1 ? 'min' : 'mins'} ago`;
    } else if (secondsAgo < 86400) {
      const hours = Math.floor(secondsAgo / 3600);
      return `${hours} ${hours === 1 ? 'hr' : 'hrs'} ago`;
    } else if (secondsAgo < 172800) {
      return 'yesterday';
    } else {
      return emailDate.toLocaleDateString('en-GB', {
        day: '2-digit',
        month: '2-digit'
      });
    }
  };

  const styles = StyleSheet.create({
    emailCard: {
      backgroundColor: colors.accentBackground,
      borderRadius: 8,
      elevation: 3,
      marginBottom: 12,
      padding: 12,
      shadowColor: colors.text,
      shadowOffset: {
        width: 0,
        height: 2,
      },
      shadowOpacity: 0.1,
      shadowRadius: 3,
    },
    emailDate: {
      color: colors.textMuted,
      fontSize: 12,
      opacity: 0.6,
    },
    emailHeader: {
      alignItems: 'flex-start',
      flexDirection: 'row',
      justifyContent: 'space-between',
      marginBottom: 8,
    },
    emailPreview: {
      color: colors.text,
      fontSize: 14,
      opacity: 0.8,
    },
    emailSubject: {
      color: colors.text,
      flex: 1,
      fontSize: 16,
      fontWeight: 'bold',
      marginRight: 8,
    },
    serviceContainer: {
      alignItems: 'center',
      flexDirection: 'row',
      marginTop: 4,
    },
    serviceIcon: {
      marginRight: 4,
    },
    serviceName: {
      color: colors.primary,
      fontSize: 12,
    },
  });

  return (
    <TouchableOpacity
      style={styles.emailCard}
      onPress={() => router.push(`/(tabs)/emails/${email.id}`)}
      activeOpacity={0.7}
    >
      <View style={styles.emailHeader}>
        <ThemedText style={styles.emailSubject} numberOfLines={1}>
          {email.subject}
        </ThemedText>
        <ThemedText style={styles.emailDate}>
          {formatEmailDate(email.dateSystem)}
        </ThemedText>
      </View>
      <ThemedText style={styles.emailPreview} numberOfLines={2}>
        {email.messagePreview}
      </ThemedText>
      {associatedCredential && (
        <View style={styles.serviceContainer}>
          <IconSymbol size={14} name={IconSymbolName.Key} color={colors.primary} style={styles.serviceIcon} />
          <ThemedText style={styles.serviceName}>
            {associatedCredential.ServiceName}
          </ThemedText>
        </View>
      )}
    </TouchableOpacity>
  );
}