import React from 'react';
import {
  Text,
  View,
  TouchableOpacity,
  StyleSheet,
  SafeAreaView,
} from 'react-native';
import Header from '../../../../components/Header/Header';
import R from '../../../../assets/R';
import styles from './style';
import {useNavigation} from '@react-navigation/native';
import CheckBox from '../../../../components/CheckBox';
const DetailStudentView = props => {
  const {student, onCheckboxChange} = props;
  const navigate = useNavigation();
  const getStatusColor = status => {
    const statusColors = {
      'Đang học': '#4CAF50',
      'Cảnh cáo': '#FF9800',
      'Thôi học': '#F44336',
    };
    return statusColors[status] || '#9E9E9E';
  };
  const statusColor = getStatusColor(student.status);
  return (
    <View style={styles.container}>
      <Header title={'Nguyễn Minh Đức - 2598671'} isBack />
      <View style={styles.body}>
        <View style={styles.card}>
          <View style={styles.containerText}>
            <View style={styles.containerTextItemLeft}>
              <Text style={styles.text}>STC TL / STC CTDT 23 / 102</Text>
            </View>
            <View style={styles.sizedBox}></View>
            <View style={styles.containerTextItemRight}>
              <Text style={[styles.text]}>
                Tình trạng:  
              </Text>
              <Text style={[styles.text,{color:statusColor}]}>{student.status}</Text>
            </View>
          </View>
          {/*Row 2*/}
          <View style={styles.containerSubText}>
            <View style={styles.containerSubTextItemLeft}>
              <Text style={[styles.text]}>
                Ngày sinh:
                <Text
                  style={[
                    styles.text,
                    {fontFamily: R.fonts.fontRegular, fontWeight: '400'},
                  ]}>
                  {student.date_student}
                </Text>
              </Text>
            </View>
            <View style={styles.sizedBox}></View>
            <View style={styles.containerSubTextItemRight}>
              <Text style={[styles.text]}>
                SDT:
                <Text
                  style={[
                    styles.text,
                    {fontFamily: R.fonts.fontRegular, fontWeight: '400'},
                  ]}>
                  {student.tele_phone}
                </Text>
              </Text>
            </View>
          </View>
          {/*Row 3*/}
          <View style={styles.containerSubText}>
            <View style={styles.containerSubTextItemLeft}>
              <Text style={[styles.text]}>
                Giới tính:
                <Text
                  style={[
                    styles.text,
                    {fontFamily: R.fonts.fontRegular, fontWeight: '400'},
                  ]}>
                  {student.gender}
                </Text>
              </Text>
            </View>
            <View style={styles.sizedBox}></View>
            <View style={styles.containerSubTextItemRight}>
              <Text style={[styles.text]}>
                Điểm trung bình:
                <Text
                  style={[
                    styles.text,
                    {fontFamily: R.fonts.fontRegular, fontWeight: '400'},
                  ]}>
                  {student.average_score}
                </Text>
              </Text>
            </View>
          </View>

          {/*Row 4*/}
          <View style={styles.containerSubText}>
            <View style={styles.containerSubTextItemLeft}>
              <Text style={[styles.text]}>
                Điểm TB học kì gần nhất:
                <Text
                  style={[
                    styles.text,
                    {fontFamily: R.fonts.fontRegular, fontWeight: '400'},
                  ]}>
                  {student.average_score}
                </Text>
              </Text>
            </View>
          </View>
          {/*Row 5*/}
          <View style={styles.containerSubText}>
            <View style={styles.containerSubTextItemLeft}>
              <Text style={[styles.text]}>
                Điểm rèn luyện TB:
                <Text
                  style={[
                    styles.text,
                    {fontFamily: R.fonts.fontRegular, fontWeight: '400'},
                  ]}>
                  {student.training_average_score}
                </Text>
              </Text>
            </View>
          </View>

          {/*Row 6*/}
          <View style={styles.checkboxContainer}>
            {student.type.map((item, index) => (
              <View key={item.id} style={styles.checkboxItem}>
                <CheckBox
                  value={item.status}
                  onValueChange={value => onCheckboxChange(item.id, value)}
                  size={20}
                  labelStyle={styles.label}
                  checkedColor={R.colors.main}
                  tickColor={R.colors.white}
                  label={item.name}
                  imageStyle={styles.imageStyle}
                />
              </View>
            ))}
          </View>

          
        </View>
        <Text style={styles.textTitle}>Lịch sử tình trạng của sinh viên</Text>

        <View style={styles.card}>
          <View style={styles.containerText}>
            <View style={{flex: 4}}>
              <Text
                style={[
                  {
                    fontSize: R.sizes.sm,
                    fontFamily: R.fonts.fontRegular,
                    fontWeight: '400',
                    color:R.colors.black,
                  },
                ]}>
                Học kỳ 2, Năm học 2024
              </Text>
            </View>

            <View style={{flex: 3, flexDirection:'row'}}>
              <Text
                style={[
                  {
                    fontSize: R.sizes.sm,
                    fontFamily: R.fonts.fontRegular,
                    fontWeight: '400',
                    color: R.colors.black,
                  },
                ]}>
                Tình trạng: 
              </Text>
              <Text style={[styles.text,{color:statusColor}]}>{student.status}</Text>
            </View>
          </View>

          <View style={styles.containerText}>
            <View style={{flex: 4}}>
              <Text
                style={[
                  {
                    fontSize: R.sizes.sm,
                    fontFamily: R.fonts.fontRegular,
                    fontWeight: '400',
                    color:R.colors.black,
                  },
                ]}>
                  Ngày quyết định: {student.date_student}
              </Text>
            </View>
           
            

          </View>

          
          <View style={styles.containerText}>
            <View style={{flex: 4}}>
              <Text
                style={[
                  {
                    fontSize: R.sizes.sm,
                    fontFamily: R.fonts.fontRegular,
                    fontWeight: '400',
                    color:R.colors.black,
                  },
                ]}>
                  Lý do: {student.date_student}
              </Text>
            </View>
           
            

          </View>

          <View style={styles.containerText}>
            <View style={{flex: 4}}>
              <Text
                style={[
                  {
                    fontSize: R.sizes.sm,
                    fontFamily: R.fonts.fontRegular,
                    fontWeight: '400',
                    color:R.colors.black,
                  },
                ]}>
                  Ghi chú: {student.date_student}
              </Text>
            </View>
           
            

          </View>
        </View>
      </View>
    </View>
  );
};

export default DetailStudentView;
