import React from 'react';
import {
  Text,
  View,
  TouchableOpacity,
  StyleSheet,
  FlatList,
  ScrollView,
} from 'react-native';
import styles from './style';
import Header from '../../../components/Header/Header';
import R from '../../../assets/R';
const DetailFeedBackView = props => {
  const {teacher, dataListQuestion} = props;
  console.log(props);

  const renderTableRow = (item, index) => {
    return (
      <View key={item.id} style={styles.tableRow}>
        <View style={styles.tableCellSmall}>
          <Text style={styles.tableCellText}>{item.id}</Text>
        </View>
        <View style={styles.tableCell}>
          <Text style={styles.tableCellText}>{item.Q1}</Text>
        </View>
        <View style={styles.tableCell}>
          <Text style={styles.tableCellText}>{item.Q2}</Text>
        </View>
        <View style={styles.tableCell}>
          <Text style={styles.tableCellText}>{item.Q3}</Text>
        </View>
        <View style={styles.tableCell}>
          <Text style={styles.tableCellText}>{item.Q4}</Text>
        </View>
        <View style={styles.tableCell}>
          <Text style={styles.tableCellText}>{item.GPA}</Text>
        </View>
        <View style={styles.tableCell}>
          <Text style={styles.tableCellText}>{item.comment}</Text>
        </View>
      </View>
    );
  };

  const renderItem = ({item}) => {
    return (
      <View style={styles.boxFeedBack}>
        <Text
          style={[
            styles.textSubTitle,
            {
              fontFamily: R.fonts.fontRegular,
              fontWeight: '400',
              color: R.colors.black,
            },
          ]}>
          Q{item.id}: {item.question}
        </Text>
      </View>
    );
  };

  return (
    <View style={styles.container}>
      <Header title={'Đánh giá giảng dạy'} isBack />
      <View style={styles.body}>
        <Text style={styles.textSubTitle}>
          Feedback của sinh viên lớp {teacher.class} môn {teacher.subject} đối
          với giảng viên {teacher.teacher}.
        </Text>
        <View style={styles.containerQuestion}>
          <FlatList
            nestedScrollEnabled
            data={dataListQuestion?.question || []}
            renderItem={renderItem}
            keyExtractor={item => item.id.toString()}
            showsVerticalScrollIndicator={false}
            vertical
          />
        </View>

        <ScrollView
          showsVerticalScrollIndicator={false}
          style={styles.tableContainer}>
          <View style={styles.tableRow}>
            <View style={styles.tableHeaderCellSmall}>
              <Text style={styles.tableHeaderText}>#</Text>
            </View>
            <View style={styles.tableHeaderCell}>
              <Text style={styles.tableHeaderText}>Q1</Text>
            </View>
            <View style={styles.tableHeaderCell}>
              <Text style={styles.tableHeaderText}>Q2</Text>
            </View>
            <View style={styles.tableHeaderCell}>
              <Text style={styles.tableHeaderText}>Q3</Text>
            </View>
            <View style={styles.tableHeaderCell}>
              <Text style={styles.tableHeaderText}>Q4</Text>
            </View>
            <View style={styles.tableHeaderCell}>
              <Text style={styles.tableHeaderText}>GPA</Text>
            </View>
            <View style={styles.tableHeaderCell}>
              <Text style={styles.tableHeaderText}>N.Xét</Text>
            </View>
          </View>

          {dataListQuestion?.results?.map((item, index) =>
            renderTableRow(item, index),
          )}
        </ScrollView>
      </View>
    </View>
  );
};

export default DetailFeedBackView;
