import React from 'react';
import {Text, View, TouchableOpacity, StyleSheet, FlatList} from 'react-native';
import styles from './style';
import Header from '../../components/Header/Header';
import R from '../../assets/R';
import Button from '../../components/Button';
const SubTeacherView = props => {
  const {dataList, setDataList} = props;

  const renderItem = ({item}) => {
    return (
      <View style={styles.containerCard}>
        <View style={styles.containerText}>
          <View style={{flexDirection:'row'}}>
            <Text style={styles.text}>Mã lớp: </Text>
            <Text style={[styles.text,{color:R.colors.blue, fontWeight:'600', fontFamily:R.fonts.fontMedium}]}>{item.classCode} </Text>
          </View>
          <View style={{flexDirection:'row'}}>
            <Text style={styles.text}>Trạng thái: </Text>
            <Text style={[styles.text,{color: getStatusColor(item.status), fontWeight:'600', fontFamily:R.fonts.fontMedium}]}>{item.status}</Text>
          </View>
        </View>
        <Text style={styles.text}>Thời gian: {item.time}</Text>
        <Text style={styles.text}>Địa điểm: {item.location}</Text>
        <Text style={styles.text}>Giảng viên yêu cầu: {item.requestedLecturer}</Text>
        <Text style={styles.text}>Ghi chú: {item.note}</Text>
        {item.status === 'Chờ xác nhận' && (
          <View style={styles.containerButton}>
            <Button
              title="Xác nhận"
              onPress={() => {
              }}
              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}
              marginRight={10}
            />
            <Button
              title="Từ chối"
              onPress={() => {
                // Xử lý từ chối
              }}
              backgroundColor={R.colors.brown}
              textColor={R.colors.white}
              height={30}
              borderRadius={15}
              fontSize={R.sizes.sm}
              fontWeight={'600'}
              fontFamily={R.fonts.fontMedium}
              paddingHorizontal={15}
              paddingVertical={3}
            />
          </View>
        )}
      </View>
    );
  };
  const getStatusColor = (status) => {
    switch (status) {
      case 'Chờ xác nhận':
        return R.colors.blue;
      case 'Đã xác nhận':
        return R.colors.green;
      case 'Từ chối':
        return R.colors.brown;
    }
  };
  return (
    <View style={styles.container}>
      <Header title={'Xác nhận dạy thay'} 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>
        <FlatList
          data={dataList || []}
          renderItem={renderItem}
          showsVerticalScrollIndicator={false}
          vertical
          keyExtractor={(item, index) => `${index}`}
        />
      </View>
    </View>
  );
};

export default SubTeacherView;
