import React from 'react';
import {
  Text,
  View,
  TouchableOpacity,
  StyleSheet,
  Image,
  TextInput,
  FlatList,
} from 'react-native';
import R from '../../assets/R';
import styles from './style';
import Header from '../../components/Header/Header';
import {useNavigation} from '@react-navigation/native';
import * as SCREENNAME from '../../routers/ScreenNames';
import Button from '../../components/Button';

const ListRollCallView = props => {
  const {dataList} = props;
  const navigation = useNavigation();
  const renderItem = ({item}) => {
    console.log(item);
    return (
      <View style={styles.item}>
        <View style={styles.row}>
          <Text style={styles.textTitle}>
            Mã lớp:
            <Text style={[styles.text ,{color:R.colors.blue , fontWeight:'600', fontFamily:R.fonts.fontMedium}]}>{item.classCode}</Text>
          </Text>
          <Text style={styles.textTitle}>
            Đã học / Tổng tiết:
            <Text style={[styles.text ,{color:R.colors.blue }]}>
              {item.lessonLearned}/{item.generalDetails}
            </Text>
          </Text>
        </View>
        <View style={styles.row}>
          <Text style={styles.textTitle}>
            Sĩ số:{' '}
            <Text style={[styles.text ,{color:R.colors.blue }]}>{item.numberOfStudent}</Text>
          </Text>
          <Text style={styles.textTitle}>
            Tổng số sv trượt điểm danh:{' '}
            <Text style={[styles.text, {color:R.colors.red }]}>{item.totalStudentFailedRollCall}</Text>
          </Text>
        </View>
        <Text style={styles.textTitle}>
          Ngày bắt đầu:{' '}
          <Text style={[styles.text ,{color:R.colors.blue }]}>{item.dateStart}</Text>
        </Text>
        <Text style={styles.textTitle}>
          Ngày kết thúc:{' '}
          <Text style={[styles.text ,{color:R.colors.blue }]}>{item.dateEnd}</Text>
        </Text>
        <View style={styles.btnContainer}>
            <Button
                title="Tạo QR điểm danh"
                onPress={()=>{}}
                backgroundColor={R.colors.brown}
                textColor={R.colors.white}
                fontSize={12}
                containerStyle={{paddingHorizontal:5,paddingVertical:5, borderRadius:20}}
            />
            <Button
                title="Điểm danh"
                onPress={()=>{}}
                containerStyle={{paddingHorizontal:5, borderRadius:20}}
                backgroundColor={R.colors.brown}
                textColor={R.colors.white}
                fontSize={12}
                width={85}
            />
            <Button
                title="Chi tiết"
                onPress={()=>{}}
                containerStyle={{paddingHorizontal:5, borderRadius:20}}
                backgroundColor={R.colors.blue}
                textColor={R.colors.white}
                fontSize={12}
                width={85}
            />
        </View>
      </View>
    );
  };
  return (
    <View style={styles.container}>
      <Header title={'Danh sách lớp điểm danh'} isBack />
      <View style={styles.body}>
        <View style={styles.card}>
          <TouchableOpacity style={styles.btnCard}>
            <Text style={styles.text}>Học kỳ 2, Năm 2025</Text>
          </TouchableOpacity>
        </View>
        <View style={styles.searchContainer}>
          <Image source={R.images.icSearch} style={styles.iconSearch} />
          <TextInput
            placeholder="Tìm kiếm"
            placeholderTextColor={R.colors.grayText}
            style={styles.textInput}
          />
        </View>
        <FlatList
          data={dataList}
          renderItem={renderItem}
          keyExtractor={(item, index) => `${index}`}
          style={styles.list}
        />
 
      </View>
    </View>
  );
};

export default ListRollCallView;
