import React from "react";
import {
  Text,
  View,
  StyleSheet,
  ScrollView,
} from "react-native";
import CheckBox from "../../components/CheckBox";
import Header from "../../components/Header/Header";
import I18n from "../../helper/i18/i18n";
import R from "../../assets/R";
import Button from "../../components/Button";
import CardButtonImage from "./card_button";
import DropdownSelect from "../../components/Dropdown/DropdownSel";
import CustomTextInput from "../../components/Input/TextFieldCus";

const CertificateRegistrationView = (props) => {
  const { titleHeader, dataList, isSelected, setSelection } = props;
  return (
    <ScrollView
      showsVerticalScrollIndicator={false}
      contentContainerStyle={styles.scrollContent}>
      <View style={styles.container}>
        <Header isBack title={I18n.t(titleHeader)} />

        <DropdownSelect
          title={"Loại chứng chỉ *"}
          titleFontFamily={R.fonts.InterRegular}
          titleFontSize={R.fontsize.fontsSize12}
          titleFontWeight={"400"}
          titleColor={R.colors.black}
          data={dataList}
          placeholder="HS"
          placeholderFontFamily={R.fonts.InterRegular}
          placeholderFontSize={R.fontsize.fontsSize12}
          placeholderFontWeight={"400"}
          placeholderColor={R.colors.grey}
          borderRadius={10}
          height={40}
          marginHorizontal={15}
          marginVertical={5}
          iconColor={R.colors.black}
          iconSize={10}
        />
        <View style={{ marginHorizontal: 15, }}>
          <CustomTextInput
            title={"Ngày sinh "}
            backgroundColor={R.colors.gray400}

          />
        </View>
        <View style={{ marginHorizontal: 15 }}>
          <CustomTextInput
            title={"CMND/CCCD (thí sinh dùng để đăng ký thi)"}
            backgroundColor={R.colors.gray400}

          />
        </View>

        <View style={styles.container_row}>
          <View style={{ flex: 1, marginLeft: 15 }}>
            <CustomTextInput
              title={"Điểm nghe "}
            />
          </View>
          <View style={{ width: '3%' }}></View>
          <View style={{ flex: 1, marginRight: 15 }}>
            <CustomTextInput
              title={"Điểm nói "}
            />
          </View>
        </View>

        <View style={styles.container_row}>
          <View style={{ flex: 1, marginLeft: 15 }}>
            <CustomTextInput
              title={"Điểm đọc"}
            />
          </View>
          <View style={{ width: '3%' }}></View>
          <View style={{ flex: 1, marginRight: 15 }}>
            <CustomTextInput
              title={"Điểm viết "}
            />  
          </View>
        </View>

        <View
          style={styles.container_row}
        >
          <View style={{ flex: 0.85, marginBottom: 10, marginHorizontal: 15 }}>
            <CustomTextInput
              title={"Tổng điểm "}
            />
          </View>
          <CheckBox
            label={"Đăng kí học bổng"}
            titleFontFamily={R.fonts.InterRegular}
            titleFontSize={R.fontsize.fontsSize12}
            titleFontWeight={"300"}
            borderRadius={30}
            size={15}
            labelStyle={{
              fontSize: R.fontsize.fontsSize12,
              fontWeight: "300",
              color: R.colors.black,
              fontFamily: R.fonts.InterRegular,
            }}
            style={{ marginTop: 15, flex: 1 }}
          />
        </View>

        <View style={styles.container_row_body}>
          <CustomTextInput
            title={"Ngày thi "}

          />
        </View>

        <View style={styles.container_row_body}>
          <CustomTextInput
            title={"Có hiệu lực đến"}

          />
        </View>
        <View style={styles.container_row_body}>
          <CustomTextInput
            title={"Số TRF"}

          />
        </View>

        <Text style={{ marginHorizontal: 15, color: R.colors.black }}>
          Ảnh chứng chỉ <Text style={{ color: "red" }}>*</Text>
        </Text>
        <CardButtonImage />

        <View style={styles.footer}>
          <CheckBox
            value={isSelected}
            onValueChange={setSelection}
            borderRadius={10}
            marginLeft={15}

          />
          <Text style={styles.text_footer}>
            "Tôi xin cam đoan rằng chứng chỉ mà tôi đã nộp là chứng chỉ hoàn
            toàn hợp lệ và có giá trị pháp lý. Nếu phát hiện bất kỳ sai phạm
            nào liên quan đến tính xác thực của chứng chỉ, tôi xin hoàn toàn
            chịu trách nhiệm và chấp nhận mọi hình thức xử lý theo quy định,
            bao gồm cả việc bị buộc thôi học và cấm thi vào trường Đại học
            Công nghệ Thông tin (UIT) trong thời hạn 5 năm."
          </Text>
        </View>

        <Button
          title="Thanh toán"
          marginHorizontal={15}
          fontSize={R.fontsize.fontSizeContent}
          fontWeight={300}
          fontFamily={R.fonts.InterRegular}
          textStyle={styles.text_button}
          backgroundColor={R.colors.buttonColorSel}
          textColor={R.colors.white}
          borderRadius={10}
          paddingVertical={4}
        />
      </View>
    </ScrollView>
  );
};

export default CertificateRegistrationView;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: R.colors.white,
  },
  container_row: {
    flexDirection: 'row'
  },
  container_row_body: {
    marginHorizontal: 15,
  },
  footer: {
    flexDirection: "row",
    marginBottom: 84,
    marginRight: 15
  },
  text_footer: {
    marginLeft: 10,
    flex: 1,
    fontFamily: R.fonts.InterRegular,
    fontSize: R.fontsize.fontsSize12,
    color: R.colors.black,
    fontWeight: '400'
  }
});
