import React from 'react';
import {Text, View, TouchableOpacity, StyleSheet, SafeAreaView, FlatList} from 'react-native';
import styles from './style';
import Header from '../../components/Header/Header';
import Button from '../../components/Button';
import R from '../../assets/R';
import*as SCREENNAME from '../../routers/ScreenNames';
import { useNavigation } from '@react-navigation/native';
const ClassActivityView = (props) => {
  const {dataList,setDataList} = props;
  const navigate = useNavigation();
  const renderItem =({
    item,
  }) => {
    return (
      <View style={styles.containerCard}>
      <Text style={styles.text}>Lớp sinh hoạt: {item.class_activity}</Text>
      <View style={styles.containerText}>
        <Text style={styles.text}>Khoá: {item.course}</Text>
        <View style={styles.sizedBox}></View>
        <Text style={styles.text}>Hệ ĐT: {item.training_system}</Text>
      </View>
        <Text style={styles.text}>Lớp theo khoa: {item.class_by_course}</Text>
        <Text style={styles.text}>Khoa: {item.science}</Text>
        <Text style={styles.text}>Lớp trưởng: {item.class_leader}</Text>
        <View style={styles.containerButton}>
          <Button 
          title='Chi tiết'
          onPress={()=>{navigate.navigate(SCREENNAME.LISTSTUDENTCLASS)}}
          backgroundColor={R.colors.blue}
          textColor={R.colors.white}
          height={30}
          borderRadius={15}
          fontSize={R.sizes.sm}
          fontWeight={'600'}
          fontFamily={R.fonts.fontMedium}
          paddingHorizontal={15}
          paddingVertical={3}
        
          />
        </View>
    </View>
    )
  }
  return (
    < View style={styles.container}>
      <Header title={'Danh sách lớp sinh hoạt'} isBack/>
      <View style={styles.body}>
        <View style={styles.card}>
          <TouchableOpacity style={styles.btnCard}>
            <Text style={styles.text}>Khoá 2024</Text>
          </TouchableOpacity>
        </View>
        <FlatList
          data={dataList || []}
          renderItem={renderItem} 
          showsVerticalScrollIndicator={false}
          vertical
          keyExtractor={(item, index) => `${index}`}
        />
      
      </View>
   
    </View>
  );
};

export default ClassActivityView;
