import React from 'react';
import {Text, View, TouchableOpacity, StyleSheet, ScrollView} from 'react-native';
import styles from './style';
import Header from '../../../components/Header/Header';
import TextField from '../../../components/Input/TextField';
import R from '../../../assets/R';
import Dropdown from '../../../components/DropdownAlert/Dropdown';
import TextMulti from '../../../components/Input/TextMulti';
import Button from '../../../components/Button';
const CompensateRegisterView = props => {
  const {
    isShow,
    setShowSchedule,
    scheduleData,
  } = props;
  const handleToggleSchedule = () => {
    setShowSchedule(prevState => !prevState);
  };
  //Header Lịch học 
  const renderHeaderSchedule = () =>{
    return(
      <View style= {styles.headerRow}>

        <View style={styles.dateColumn}>
          <Text style={styles.headerText}>Thứ / Tiết</Text>
        </View>

            {Array.from({length: 15}, (_, i) => (
            <View key={i} style={styles.periodColumn}>
              <Text style={styles.headerText}>Tiết {i + 1} </Text>
            </View>
          ))}

        </View>
    )
  }

  const renderSchedule = (item) =>{
    if (!isShow) return null;
    return(
      <ScrollView horizontal  style={{marginTop:15}}>
        {renderHeaderSchedule()}
      </ScrollView>
    )
  }
  return (
    <View style={styles.container}>
      <Header title={'Đăng kí báo bù'} isBack />
      <ScrollView>
        <View style={styles.body}>
        <View style={styles.containerInput}>
          <TextField
            title={'Học kì'}
            color={R.colors.black}
            fontSize={R.sizes.sm}
            backgroundColor={R.colors.gray}
            required
            fontSizeTitle={R.sizes.sm}
            containerBackgroundColor={R.colors.white}
            width={'48%'}
          />
          <View style={styles.sizedBox}></View>
          <TextField
            title={'Năm học'}
            color={R.colors.black}
            fontSize={R.sizes.sm}
            backgroundColor={R.colors.gray}
            required
            fontSizeTitle={R.sizes.sm}
            containerBackgroundColor={R.colors.white}
            width={'48%'}
          />
        </View>
        <View style={styles.containerInput}>
          <TextField
            title={'Mã CBGV'}
            color={R.colors.black}
            fontSize={R.sizes.sm}
            required
            backgroundColor={R.colors.gray}
            fontSizeTitle={R.sizes.sm}
            width={'100%'}
            containerBackgroundColor={R.colors.white}
          />
        </View>
        <View style={styles.containerDropDown}>
          <View style={{flexDirection: 'row'}}>
            <Text style={[styles.txtSubtitle , {marginBottom: 5}]}>Mã lớp </Text> 
            <Text style={{color: R.colors.red}}>*</Text>
          </View>
          <Dropdown title={'Giảng viên thay thế'} />
        </View>
        <View style={styles.containerDropDown}>
          <View style={{flexDirection: 'row'}}>
            <Text style={[styles.txtSubtitle , {marginBottom: 5}]}>Lịch báo cần bù </Text>
            <Text style={{color: R.colors.red}}>*</Text>
          </View>
          <Dropdown title={'Lịch báo cần bù'} />
        </View>
        <View style={styles.containerInput}>
          <TextField
            title={'Số tiết đã nghỉ'}
            color={R.colors.black}
            fontSize={R.sizes.sm}
            backgroundColor={R.colors.white}
            fontSizeTitle={R.sizes.sm}
            containerBackgroundColor={R.colors.white}
            width={'38%'}
          />
          <View style={styles.sizedBox}></View>
          <TextField
            title={'Ngày học bù'}
            color={R.colors.black}
            fontSize={R.sizes.sm}
            backgroundColor={R.colors.white}
            required
            fontSizeTitle={R.sizes.sm}
            containerBackgroundColor={R.colors.white}
            width={'58%'}
          />
        </View>
        <TextMulti
          title={'Ghi chú'}
          color={R.colors.black}
          fontSize={R.sizes.sm}
          titleFontSize={R.sizes.sm}
          containerMarginBottom={15}
          containerBackgroundColor={R.colors.white}
        />
        <View style={styles.btnRegister}>
          <Button
            title={isShow ? 'Đóng' : 'Xem lịch rảnh SV'}
            textColor={R.colors.white}
            onPress={handleToggleSchedule}
            backgroundColor={R.colors.blue}
            fontSize={R.sizes.sm}
            fontFamily={R.fonts.fontMedium}
            height={35}
            containerStyle={{paddingHorizontal: 15, borderRadius: 10}}
          />
        </View>

        {renderSchedule()}

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

export default CompensateRegisterView;
