import React from 'react';
import {
  Text,
  View,
  TouchableOpacity,
  StyleSheet,
  SafeAreaView,
  TextInput,
  Image,
  Platform,
  ScrollView,
  FlatList,
} from 'react-native';
import Header from '../../../components/Header/Header';
import styles from './style';
import R from '../../../assets/R';
const ListStudentView = props => {
  const {searchText, onSearchChange, filter, statusStats} = props;
  console.log(props);
  //Search
  const renderSearchBox = () => {
    return (
      <View style={styles.containerSearchBox}>
        <View style={styles.boxIconSearch}>
          <Image
            source={R.images.icSearchHeader}
            maxWidth={Platform.OS === 'ios' ? 16 : 20}
            maxHeight={Platform.OS === 'ios' ? 16 : 20}
            resizeMode="contain"
            tintColor={R.colors.gray}
          />
        </View>
        <TextInput
          placeholder="Tìm kiếm"
          value={searchText}
          onChangeText={onSearchChange}
          placeholderTextColor={R.colors.gray}
          color={R.colors.black}
          style={styles.inputSearch}
        />
      </View>
    );
  };
  //List status
  const renderListStatus = () => {
    return (
      <View
        style={styles.statusContainer}
        >
        {statusStats.map((stat, index) => (
          <View
            key={index}
            style={[styles.statusCard, {borderLeftColor: stat.color}]}>
            <View style={[styles.statusDot, {backgroundColor: stat.color}]} />
            <Text style={[styles.statusText, {color: stat.color}]}>
              {stat.status}
            </Text>
            <Text style={[styles.statusCount, {color: stat.color}]}>
              ({stat.count})
            </Text>
          </View>
        ))}
      </View>
    );
  };

  //List student
  const renderStudentItem = ({item}) => {
    const isLeftIcon = item.gender === 'Nam';
    const genderIcon =
      item.gender === 'Nam' ? R.images.icMale : R.images.icFemale;

    const statusColor = getStatusColor(item.status);

    return (
      <TouchableOpacity style={styles.studentCard}>
        <View style={styles.studentCardContent}>
          <View style={styles.studentInfo}>
            {/*Tên sinh viên*/}
            <View style={styles.leftSection}>
              <Text style={styles.studentName}>{item.name}</Text>
              {isLeftIcon && (
                <Image source={genderIcon} style={styles.genderIcon}  resizeMode="contain"/>
              )}
              {!isLeftIcon && (
                <Image source={genderIcon} style={styles.genderIcon} resizeMode="contain"/>
              )}
            </View>
            <View style={styles.rightSection}>
              {/*Mã sinh viên*/}
              <Text style={styles.studentName}>MSV: {item.code_student}</Text>
              {/*Trạng thái*/}
              <View
                style={[
                  styles.statusIndicator,
                  {backgroundColor: statusColor},
                ]}>
                <Text style={styles.statusIndicatorText}></Text>
              </View>
            </View>
          </View>
        </View>
        <View style={styles.sizedBox}></View>
        <View style={styles.studentCardContent}>
          <View style={styles.studentInfo}>
            {/*Tên sinh viên*/}
            <View style={styles.leftSection}>
              <Text style={[styles.studentName,{fontFamily:R.fonts.fontRegular,fontWeight:'400'}]}>Ngày sinh: {item.date_student}</Text>
            </View>
            <View style={styles.rightSection}>
              {/*Mã sinh viên*/}
              <Text style={[styles.studentName,{fontFamily:R.fonts.fontRegular,fontWeight:'400'}]}>SĐT: {item.tele_phone}</Text>
            </View>
          </View>
        </View>
      </TouchableOpacity>
    );
  };

  const getStatusColor = status => {
    const statusColors = {
      'Đang học': '#4CAF50',
      'Cảnh cáo': '#FF9800',
      'Thôi học': '#F44336',
    };
    return statusColors[status] || '#9E9E9E';
  };

  return (
    <SafeAreaView style={styles.container}>
      <Header title={'Danh sách sinh viên lớp ATTT2024.1'} isBack />
      <View style={styles.body}>
        {renderSearchBox()}
        {renderListStatus()}
        <View>
          <FlatList
            data={filter || []}
            renderItem={renderStudentItem}
            vertical
            keyExtractor={(item, index) => `${index}`}
            showsVerticalScrollIndicator={false}
          />
        </View>
      </View>
    </SafeAreaView>
  );
};

export default ListStudentView;
