import React from 'react';
import {
  Text,
  View,
  TouchableOpacity,
  FlatList,
  Image,
  ActivityIndicator,
  RefreshControl,
} from 'react-native';
import styles from './style';
import FAB from '../../components/FAB/fab';
import SubButton from '../../components/FAB/sub_button';
import R from '../../assets/R';
import * as SCREENNAME from '../../routers/ScreenNames';
import { useNavigation } from '@react-navigation/native';

const EmailHomeView = props => {
  const {groupedEmails, loading, onEmailPress, onRefresh, formatEmailDate} = props;

  const navigation = useNavigation();

  if (loading) {
    return (
      <View style={styles.loadingContainer}>
        <ActivityIndicator size="large" color="#007AFF" />
        <Text style={styles.loadingText}>Đang tải email...</Text>
      </View>
    );
  }

  const renderEmailItem = ({item}) => (
    <TouchableOpacity
      style={[styles.emailItem, !item.isRead && styles.unreadEmail]}
      onPress={() => onEmailPress(item)}>
      <View style={styles.avatarContainer}>
        <View style={styles.avatar}>
          <Text style={styles.avatarText}>
            {item.sender.charAt(0).toUpperCase()}
          </Text>
        </View>
      </View>

      <View style={styles.emailContent}>
        <View style={styles.emailHeader}>
          <Text style={[styles.senderName, !item.isRead && styles.unreadText]}>
            {item.sender}
          </Text>
        </View>

        <Text
          style={[styles.emailSubject, !item.isRead && styles.unreadText]}
          numberOfLines={1}>
          {item.subject}
        </Text>

        <Text
          style={[styles.emailPreview, !item.isRead && styles.unreadEmail]}
          numberOfLines={2}>
          {item.preview}
        </Text>
      </View>

      <View
        style={{
          justifyContent: 'center',
          alignItems: 'flex-end',
          position: 'absolute',
          right: 15,
          top: 10,
        }}>
        <Text style={styles.emailDate}>
          {`${item.date.getDate().toString().padStart(2, '0')}/${(
            item.date.getMonth() + 1
          )
            .toString()
            .padStart(2, '0')}/${item.date.getFullYear()}`}
        </Text>
        {item.hasAttachment && (
          <View style={styles.attachmentIndicator}>
            <Text style={styles.attachmentCount}>2</Text>
          </View>
        )}
      </View>
    </TouchableOpacity>
  );

  const renderDateSection = (dateLabel, emailsForDate) => (
    <View key={dateLabel} style={styles.dateSection}>
      <Text style={styles.dateSectionHeader}>{dateLabel}</Text>
      {emailsForDate.map(email => (
        <View key={email.id}>{renderEmailItem({item: email})}</View>
      ))}
    </View>
  );

  return (
    <View style={styles.container}>
      <View style={styles.body}>
        <FlatList
          data={Object.keys(groupedEmails)}
          keyExtractor={item => item}
          renderItem={({item: dateLabel}) =>
            renderDateSection(dateLabel, groupedEmails[dateLabel])
          }
          refreshControl={
            <RefreshControl
              refreshing={loading}
              onRefresh={onRefresh}
              colors={['#007AFF']}
            />
          }
          showsVerticalScrollIndicator={false}
          contentContainerStyle={styles.listContainer}
        />
      </View>

      <FAB>
        <SubButton
          onPress={() => navigation.navigate(SCREENNAME.SENDEMAIL)}
          label="Soạn email"
          images={R.images.icEdit}
          backgroundColor={R.colors.orange}
        />
      </FAB>
     
    </View>
  );
};

export default EmailHomeView;
