//@ts-nocheck
import {
  CommonActions,
  StackActions,
  useNavigation,
} from '@react-navigation/native';
import { Formik } from 'formik';
import { observer, Observer } from 'mobx-react-lite';
import React, { useEffect, useRef, useState } from 'react';
import {
  ActivityIndicator,
  SafeAreaView,
  ScrollView,
  StyleSheet,
  TextInput,
  TouchableOpacity,
  View,
} from 'react-native';
import { CIMBBank, DropDown2, IconBack } from '../../assets/icons';
import KeyboardSpacer from '../../components/keyboardspace';
import MButton from '../../components/MButton';
import { MText } from '../../components/MText';
import { commonStyles } from '../CommonStyles';
import { color } from '../../theme';
import * as yup from 'yup';
import QuickSubmitStore from './store';
import { ScreenNames } from '../../navigation';
import { formatDDMMYYY, formatMoney } from '../../utils';
import moment from 'moment';
import nationalIDStore from '../nationalIDBack/Store';
import CIMBLoading from '../../components/CIMBLoading';
import LinearGradient from 'react-native-linear-gradient';
import DatePicker from 'react-native-date-picker';
import MHeader from '../../components/MHeader';

const cardRegExp = /^(\b\d{12}\b|\b\d{9}\b)$/;

export const QuickSubmit = observer(function QuickSubmit(props: any) {
  const navigation = useNavigation();
  const ref = useRef(null);
  const [loan, setLoan] = useState(null);
  const [showDatePicker, setShowDatePicker] = useState(false);
  const [typePicker, setTypePicker] = useState(0);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    setIsLoading(true);
    QuickSubmitStore.getBrandProduct();
    QuickSubmitStore.getProvinces();
    QuickSubmitStore.getDetailLoan(
      props?.route?.params?.loan?.id,
      (data) => {
        setLoan(data);
        ref.current.setFieldValue(
          'fullName',
          data?.fullName ? data?.fullName : ''
        );
        ref.current.setFieldValue('dob', data?.dob ? data?.dob : '');
        ref.current.setFieldValue('phone', data?.phone ? data?.phone : '');
        ref.current.setFieldValue(
          'nationalCard',
          data?.nationalId ? data?.nationalId : ''
        );
        ref.current.setFieldValue(
          'nationalCardDate',
          data?.dateNationalId ? data?.dateNationalId : ''
        );
        ref.current.setFieldValue('email', data?.email ? data?.email : '');
        ref.current.setFieldValue(
          'loanAmount',
          data?.loanAmount ? data?.loanAmount : 0
        );
        ref.current.setFieldValue(
          'loanTime',
          data?.loanTime ? data?.loanTime : ''
        );
        ref.current.setFieldValue(
          'salary',
          data?.totalIncome ? data?.totalIncome : 0
        );
        ref.current.setFieldValue(
          'province',
          data?.provinceId
            ? { id: data?.provinceId, name: data?.provinceName }
            : null
        );
        ref.current.setFieldValue(
          'brand',
          data?.brandId ? { id: data?.brandId, name: data?.brandName } : null
        );
        if (data?.brandId) {
          QuickSubmitStore.getYearProduct(data?.brandId);
        }
        ref.current.setFieldValue(
          'year',
          data?.yearProductBrand
            ? {
                id: data?.yearProductBrand,
                name: `Năm ${data?.yearProductBrand}`,
              }
            : null
        );
        if (data?.yearProductBrand) {
          QuickSubmitStore.getModelProduct(
            data?.brandId,
            data?.yearProductBrand
          );
        }
        ref.current.setFieldValue(
          'model',
          data?.productBrandId
            ? { id: data?.productBrandId, name: data?.productBrandName }
            : null
        );
        ref.current.setFieldValue(
          'occupation',
          data?.jobNameCIMB
            ? {
                id: data?.jobCIMBId,
                name: data?.jobNameCIMB,
              }
            : null
        );
        ref.current.setFieldValue('productId', data?.productId),
          ref.current.setFieldValue(
            'vehiclesCar',
            data?.vehiclesCar ? data?.vehiclesCar : ''
          ),
          ref.current.setFieldValue(
            'yearCar',
            data?.yearCar ? String(data?.yearCar) : ''
          ),
          ref.current.setFieldValue(
            'brandCar',
            data?.brandCar ? data?.brandCar : ''
          );
        setIsLoading(false);
      },
      () => {
        setIsLoading(false);
      }
    );
  }, []);

  const onSubmit = (values: any) => {
    const body = {
      id: props?.route?.params?.loan?.id,
      fullName: values.fullName,
      dob: moment(values.dob).format('YYYY-MM-DD'),
      phone: values?.phone,
      nationalId: values.nationalCard,
      dateNationalId: moment(values.nationalCardDate).format('YYYY-MM-DD'),
      email: values.email ? values.email : '',
      provinceId: loan?.provinceId,
      address: loan?.address,
      loanAmount: values?.loanAmount,
      loanTime: values?.loanTime,
      totalIncome: values?.salary,
      brandId: values.brand?.id,
      productBrandId: values.model?.id,
      yearProductBrand: values.year?.id,
      districtId: loan?.districtId,
      wardId: loan?.wardId,
      jobId: loan?.jobId,
      jobCIMBId:
        props?.route?.params?.loan?.typeLoan === 4 ||
        props?.route?.params?.loan?.typeLoan === 2
          ? values?.occupation?.id
          : loan?.jobCIMBId,
      productId: loan?.productId,
      brandCar: loan?.brandCar,
      yearCar: loan?.yearCar,
      vehiclesCar: loan?.vehiclesCar,
    };

    QuickSubmitStore.quickSubmit(body, () => {
      navigation.dispatch(
        CommonActions.reset({
          index: 1,
          routes: [{ name: ScreenNames.Main }],
        })
      );
    });
  };

  return (
    <View style={{ flex: 1, backgroundColor: '#FFFFFF' }}>
      <MHeader
        title="Chuẩn bị hồ sơ"
        onBack={() => {
          navigation.dispatch(
            CommonActions.reset({
              index: 1,
              routes: [{ name: ScreenNames.Main }],
            })
          );
        }}
      />
      <SafeAreaView style={{ flex: 1 }}>
        <View
          style={{
            flexDirection: 'row',
            borderWidth: 1,
            borderColor: '#EF4123',
            borderRadius: 30,
            marginHorizontal: 16,
            marginTop: 16,
          }}
        >
          <View
            style={{
              flex: 1,
              alignItems: 'center',
              paddingVertical: 12,
            }}
          >
            <MText style={{ color: '#333333' }}>Xác thực thông tin</MText>
          </View>
          <View
            style={{
              flex: 1,
            }}
          >
            <LinearGradient
              colors={['#FF7A00', '#EF4123']}
              style={{
                flex: 1,
                alignItems: 'center',
                borderRadius: 30,
                paddingVertical: 12,
              }}
            >
              <MText style={{ color: '#FFFFFF' }}>Cập nhật thông tin</MText>
            </LinearGradient>
          </View>
        </View>
        <ScrollView
          style={{ flex: 1, paddingHorizontal: 16, marginVertical: 16 }}
        >
          <Formik
            innerRef={ref}
            initialValues={{
              fullName: '',
              phone: '',
              dob: '',
              email: '',
              nationalCard: '',
              nationalCardDate: '',
              province: null,
              brand: null,
              year: null,
              model: null,
              loanAmount: '',
              loanTime: null,
              salary: '',
              occupation: null,
              productId: 2,
              brandCar: '',
              yearCar: '',
              vehiclesCar: '',
            }}
            onSubmit={onSubmit}
            validationSchema={yup.object().shape({
              fullName: yup.string().required('Vui lòng nhập họ tên'),
              loanAmount: yup
                .number()
                .required('Vui lòng nhập số tiền vay')
                .min(1, 'Vui lòng nhập số tiền vay'),
              nationalCard: yup
                .string()
                .required('Vui lòng số CCCD/CMND')
                .matches(cardRegExp, 'Định dạng không đúng'),
              email: yup
                .string()
                .matches(
                  /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/,
                  'Email không đúng định dạng'
                ),
              salary: yup
                .number()
                .required('Vui lòng nhập thu nhập')
                .min(3000000, 'Số tiền không được nhỏ hơn 3 triệu'),
              brand:
                loan?.productId === 2
                  ? yup.object().required('Vui lòng chọn hãng xe').nullable()
                  : null,
              year:
                loan?.productId === 2
                  ? yup
                      .object()
                      .required('Vui lòng chọn năm sản xuất')
                      .nullable()
                  : null,
              model:
                loan?.productId === 2
                  ? yup.object().required('Vui lòng chọn dòng xe').nullable()
                  : null,
              occupation: yup
                .object()
                .required('Vui lòng chọn nghề nghiệp')
                .nullable(),
            })}
          >
            {({
              handleChange,
              errors,
              values,
              handleSubmit,
              setFieldValue,
              isValid,
            }) => (
              <View>
                <View>
                  <MText style={[commonStyles.textNormal]}>
                    Họ và tên <MText style={{ color: 'red' }}>*</MText>
                  </MText>
                  <TextInput
                    editable={false}
                    style={[styles.input, { backgroundColor: '#F2F3F5' }]}
                    // style={[styles.input]}
                    value={values.fullName}
                    onChangeText={handleChange('fullName')}
                  />
                  {errors && errors.fullName && (
                    <MText
                      style={{
                        fontSize: 12,
                        color: 'red',
                        fontStyle: 'italic',
                        marginTop: 5,
                      }}
                    >
                      {errors.fullName}
                    </MText>
                  )}
                </View>
                <View
                  style={{
                    marginTop: 16,
                    flexDirection: 'row',
                    justifyContent: 'space-between',
                  }}
                >
                  <View style={{ flex: 1, marginRight: 8 }}>
                    <MText style={[commonStyles.textNormal]}>
                      Sinh ngày <MText style={{ color: 'red' }}>*</MText>
                    </MText>
                    <TouchableOpacity
                      disabled
                      style={[
                        styles.input,
                        {
                          justifyContent: 'space-between',
                          flexDirection: 'row',
                          alignItems: 'center',
                          backgroundColor: '#F2F3F5',
                        },
                      ]}
                      onPress={() => {
                        setShowDatePicker(true);
                        setTypePicker(0);
                      }}
                    >
                      <MText style={[commonStyles.textNormalBold]}>
                        {values.dob ? formatDDMMYYY(values.dob) : ''}
                      </MText>
                    </TouchableOpacity>
                  </View>
                  <View style={{ flex: 1, marginLeft: 8 }}>
                    <MText style={[commonStyles.textNormal]}>
                      Số điện thoại <MText style={{ color: 'red' }}>*</MText>
                    </MText>
                    <TextInput
                      style={[styles.input, { backgroundColor: '#F2F3F5' }]}
                      value={values.phone}
                      onChangeText={handleChange('phone')}
                      keyboardType="phone-pad"
                      editable={false}
                    />
                    {errors && errors.phone && (
                      <MText
                        style={{
                          fontSize: 12,
                          color: 'red',
                          fontStyle: 'italic',
                          marginTop: 5,
                        }}
                      >
                        {errors.phone}
                      </MText>
                    )}
                  </View>
                </View>
                <View
                  style={{
                    marginTop: 16,
                    flexDirection: 'row',
                    justifyContent: 'space-between',
                  }}
                >
                  <View style={{ flex: 1, marginRight: 8 }}>
                    <MText style={[commonStyles.textNormal]}>
                      Số CCCD/CMND <MText style={{ color: 'red' }}>*</MText>
                    </MText>
                    <TextInput
                      style={[styles.input, { backgroundColor: '#F2F3F5' }]}
                      // style={styles.input}
                      value={values.nationalCard}
                      onChangeText={handleChange('nationalCard')}
                      keyboardType="numeric"
                      editable={false}
                    />
                    {errors && errors.nationalCard && (
                      <MText
                        style={{
                          fontSize: 12,
                          color: 'red',
                          fontStyle: 'italic',
                          marginTop: 5,
                        }}
                      >
                        {errors.nationalCard}
                      </MText>
                    )}
                  </View>
                  <View style={{ flex: 1, marginLeft: 8 }}>
                    <MText style={[commonStyles.textNormal]}>
                      Ngày cấp CMND/ CCCD{' '}
                      <MText style={{ color: 'red' }}>*</MText>
                    </MText>
                    {/* <TextInput
                      placeholder="DD/MM/YYYY"
                      placeholderTextColor={"#E0E0E0"}
                      style={[styles.input, { backgroundColor: "#F2F3F5" }]}
                      value={values.nationalCardDate}
                      onChangeText={handleChange("nationalCardDate")}
                      editable={false}
                    /> */}
                    <TouchableOpacity
                      disabled
                      style={[
                        styles.input,
                        {
                          justifyContent: 'space-between',
                          flexDirection: 'row',
                          alignItems: 'center',
                          backgroundColor: '#F2F3F5',
                        },
                      ]}
                      onPress={() => {
                        setShowDatePicker(true);
                        setTypePicker(1);
                      }}
                    >
                      <MText style={[commonStyles.textNormalBold]}>
                        {values.nationalCardDate
                          ? formatDDMMYYY(values.nationalCardDate)
                          : ''}
                      </MText>
                    </TouchableOpacity>
                    {errors && errors.nationalCardDate && (
                      <MText
                        style={{
                          fontSize: 12,
                          color: 'red',
                          fontStyle: 'italic',
                          marginTop: 5,
                        }}
                      >
                        {errors.nationalCardDate}
                      </MText>
                    )}
                  </View>
                </View>
                <View style={{ marginTop: 16 }}>
                  <MText style={[commonStyles.textNormal]}>Email</MText>
                  <TextInput
                    style={styles.input}
                    value={values.email}
                    onChangeText={handleChange('email')}
                  />
                </View>
                <View style={{ marginTop: 16 }}>
                  <MText style={[commonStyles.textNormal]}>
                    Thành phố sinh sống{' '}
                    <MText style={{ color: 'red' }}>*</MText>
                  </MText>
                  <TouchableOpacity
                    disabled={true}
                    style={[
                      styles.input,
                      {
                        justifyContent: 'space-between',
                        flexDirection: 'row',
                        alignItems: 'center',
                        backgroundColor: '#F2F3F5',
                      },
                    ]}
                    onPress={() =>
                      navigation.dispatch(
                        StackActions.push(ScreenNames.CommonSelect, {
                          title: 'Chọn tỉnh/thành phố',
                          data: QuickSubmitStore.listProvinces,
                          callback: (value) => {
                            setFieldValue('province', value);
                          },
                        })
                      )
                    }
                  >
                    <MText style={[commonStyles.textNormalBold]}>
                      {values.province ? values.province?.name : ''}
                    </MText>
                    <DropDown2 />
                  </TouchableOpacity>
                  {errors && errors.province && (
                    <MText
                      style={{
                        fontSize: 12,
                        color: 'red',
                        fontStyle: 'italic',
                        marginTop: 5,
                      }}
                    >
                      {errors.province}
                    </MText>
                  )}
                </View>
                <View
                  style={{
                    marginTop: 16,
                    flexDirection: 'row',
                    justifyContent: 'space-between',
                  }}
                >
                  <View style={{ flex: 1, marginRight: 8 }}>
                    <MText style={[commonStyles.textNormal]}>
                      Loại tài sản
                    </MText>
                    <View
                      style={[
                        styles.input,
                        {
                          justifyContent: 'space-between',
                          flexDirection: 'row',
                          alignItems: 'center',
                          backgroundColor: '#F2F3F5',
                        },
                      ]}
                    >
                      <MText style={[commonStyles.textNormalBold]}>
                        {values.productId === 8
                          ? 'Ô tô'
                          : values.productId === 31
                          ? 'Vay mua xe'
                          : 'Xe máy'}
                      </MText>
                      <DropDown2 />
                    </View>
                  </View>
                  <View style={{ flex: 1, marginLeft: 8 }}></View>
                </View>
                {values.productId === 2 ? (
                  <>
                    <View
                      style={{
                        marginTop: 16,
                        flexDirection: 'row',
                        justifyContent: 'space-between',
                      }}
                    >
                      <View style={{ flex: 1, marginRight: 8 }}>
                        <MText style={[commonStyles.textNormal]}>
                          Hãng xe <MText style={{ color: 'red' }}>*</MText>
                        </MText>
                        <TouchableOpacity
                          style={[
                            styles.input,
                            {
                              justifyContent: 'space-between',
                              flexDirection: 'row',
                              alignItems: 'center',
                              backgroundColor: '#F2F3F5',
                            },
                          ]}
                          disabled
                          onPress={() =>
                            navigation.dispatch(
                              StackActions.push(ScreenNames.CommonSelect, {
                                title: 'Chọn hãng xe',
                                data: QuickSubmitStore.listBrand,
                                callback: (value) => {
                                  setFieldValue('brand', value);
                                  QuickSubmitStore.getYearProduct(value.id);
                                  setFieldValue('model', null);
                                  setFieldValue('year', null);
                                },
                              })
                            )
                          }
                        >
                          <MText style={[commonStyles.textNormalBold]}>
                            {values.brand ? values.brand?.name : ''}
                          </MText>
                          <DropDown2 />
                        </TouchableOpacity>
                        {errors && errors.brand && (
                          <MText
                            style={{
                              fontSize: 12,
                              color: 'red',
                              fontStyle: 'italic',
                              marginTop: 5,
                            }}
                          >
                            {errors.brand}
                          </MText>
                        )}
                      </View>
                      <View style={{ flex: 1, marginLeft: 8 }}>
                        <MText style={[commonStyles.textNormal]}>
                          Năm sản xuất <MText style={{ color: 'red' }}>*</MText>
                        </MText>
                        <TouchableOpacity
                          style={[
                            styles.input,
                            {
                              justifyContent: 'space-between',
                              flexDirection: 'row',
                              alignItems: 'center',
                              backgroundColor: '#F2F3F5',
                            },
                          ]}
                          disabled
                          onPress={() =>
                            navigation.dispatch(
                              StackActions.push(ScreenNames.CommonSelect, {
                                title: 'Chọn năm sản xuất',
                                data: QuickSubmitStore.listYear,
                                callback: (value) => {
                                  setFieldValue('year', value);
                                  QuickSubmitStore.getModelProduct(
                                    values.brand?.id,
                                    value.id
                                  );
                                  setFieldValue('model', null);
                                },
                              })
                            )
                          }
                        >
                          <MText style={[commonStyles.textNormalBold]}>
                            {values.year ? values.year?.name : ''}
                          </MText>
                          <DropDown2 />
                        </TouchableOpacity>
                        {errors && errors.year && (
                          <MText
                            style={{
                              fontSize: 12,
                              color: 'red',
                              fontStyle: 'italic',
                              marginTop: 5,
                            }}
                          >
                            {errors.year}
                          </MText>
                        )}
                      </View>
                    </View>
                    <View style={{ marginTop: 16 }}>
                      <MText style={[commonStyles.textNormal]}>
                        Dòng xe <MText style={{ color: 'red' }}>*</MText>
                      </MText>
                      <TouchableOpacity
                        style={[
                          styles.input,
                          {
                            justifyContent: 'space-between',
                            flexDirection: 'row',
                            alignItems: 'center',
                            backgroundColor: '#F2F3F5',
                          },
                        ]}
                        disabled
                        onPress={() =>
                          navigation.dispatch(
                            StackActions.push(ScreenNames.CommonSelect, {
                              title: 'Chọn dòng xe',
                              data: QuickSubmitStore.listModel,
                              callback: (value) => {
                                setFieldValue('model', value);
                              },
                            })
                          )
                        }
                      >
                        <MText style={[commonStyles.textNormalBold]}>
                          {values.model ? values.model?.name : ''}
                        </MText>
                        <DropDown2 />
                      </TouchableOpacity>
                      {errors && errors.model && (
                        <MText
                          style={{
                            fontSize: 12,
                            color: 'red',
                            fontStyle: 'italic',
                            marginTop: 5,
                          }}
                        >
                          {errors.model}
                        </MText>
                      )}
                    </View>
                  </>
                ) : (
                  <>
                    <View
                      style={{
                        marginTop: 16,
                        flexDirection: 'row',
                        justifyContent: 'space-between',
                      }}
                    >
                      <View style={{ flex: 1, marginRight: 8 }}>
                        <MText style={[commonStyles.textNormal]}>
                          Hãng xe <MText style={{ color: 'red' }}>*</MText>
                        </MText>
                        <View
                          style={[
                            styles.input,
                            {
                              justifyContent: 'space-between',
                              flexDirection: 'row',
                              alignItems: 'center',
                              backgroundColor: '#F2F3F5',
                            },
                          ]}
                        >
                          <MText style={[commonStyles.textNormalBold]}>
                            {values.brandCar}
                          </MText>
                          <DropDown2 />
                        </View>
                      </View>
                      <View style={{ flex: 1, marginLeft: 8 }}>
                        <MText style={[commonStyles.textNormal]}>
                          Năm sản xuất <MText style={{ color: 'red' }}>*</MText>
                        </MText>
                        <View
                          style={[
                            styles.input,
                            {
                              justifyContent: 'space-between',
                              flexDirection: 'row',
                              alignItems: 'center',
                              backgroundColor: '#F2F3F5',
                            },
                          ]}
                        >
                          <MText style={[commonStyles.textNormalBold]}>
                            {values.yearCar}
                          </MText>
                          <DropDown2 />
                        </View>
                      </View>
                    </View>
                    <View style={{ marginTop: 16 }}>
                      <MText style={[commonStyles.textNormal]}>
                        Dòng xe <MText style={{ color: 'red' }}>*</MText>
                      </MText>
                      <View
                        style={[
                          styles.input,
                          {
                            justifyContent: 'space-between',
                            flexDirection: 'row',
                            alignItems: 'center',
                            backgroundColor: '#F2F3F5',
                          },
                        ]}
                      >
                        <MText style={[commonStyles.textNormalBold]}>
                          {values.vehiclesCar}
                        </MText>
                        <DropDown2 />
                      </View>
                    </View>
                  </>
                )}
                <View
                  style={{
                    marginTop: 16,
                    flexDirection: 'row',
                    justifyContent: 'space-between',
                  }}
                >
                  <View style={{ flex: 1, marginRight: 8 }}>
                    <MText style={[commonStyles.textNormal]}>
                      Số tiền vay <MText style={{ color: 'red' }}>*</MText>
                    </MText>
                    <TextInput
                      style={[styles.input, { backgroundColor: '#F2F3F5' }]}
                      // style={styles.input}
                      value={formatMoney(values.loanAmount)}
                      // onChangeText={(text) => {
                      //   if (text === "") {
                      //     setFieldValue("loanAmount", Number(0))
                      //   } else {
                      //     setFieldValue("loanAmount", Number(text.split(",").join("")))
                      //   }
                      // }}
                      keyboardType="numeric"
                      editable={false}
                    />
                    {errors && errors.loanAmount && (
                      <MText
                        style={{
                          fontSize: 12,
                          color: 'red',
                          fontStyle: 'italic',
                          marginTop: 5,
                        }}
                      >
                        {errors.loanAmount}
                      </MText>
                    )}
                  </View>
                  <View style={{ flex: 1, marginLeft: 8 }}>
                    <MText style={[commonStyles.textNormal]}>
                      Thời gian vay
                    </MText>
                    <TextInput
                      style={[styles.input, { backgroundColor: '#F2F3F5' }]}
                      value={`${values.loanTime} Tháng`}
                      onChangeText={handleChange('loanTime')}
                      keyboardType="numeric"
                      editable={false}
                    />
                  </View>
                </View>
                <View
                  style={{
                    marginTop: 16,
                    flexDirection: 'row',
                    justifyContent: 'space-between',
                  }}
                >
                  <View style={{ flex: 1, marginRight: 8 }}>
                    <MText style={[commonStyles.textNormal]}>
                      Thu nhập (VND) <MText style={{ color: 'red' }}>*</MText>
                    </MText>
                    <TextInput
                      editable={false}
                      style={[styles.input, { backgroundColor: '#F2F3F5' }]}
                      value={formatMoney(values.salary)}
                      onChangeText={(text) => {
                        if (text === '') {
                          setFieldValue('salary', Number(0));
                        } else {
                          setFieldValue(
                            'salary',
                            Number(text.split(',').join(''))
                          );
                        }
                      }}
                      keyboardType="numeric"
                    />
                    {errors && errors.salary && (
                      <MText
                        style={{
                          fontSize: 12,
                          color: 'red',
                          fontStyle: 'italic',
                          marginTop: 5,
                        }}
                      >
                        {errors.salary}
                      </MText>
                    )}
                  </View>
                  <View style={{ flex: 1, marginLeft: 8 }}>
                    <MText style={[commonStyles.textNormal]}>
                      Nghề nghiệp <MText style={{ color: 'red' }}>*</MText>
                    </MText>
                    <TouchableOpacity
                      style={[
                        styles.input,
                        {
                          justifyContent: 'space-between',
                          flexDirection: 'row',
                          alignItems: 'center',
                          backgroundColor:
                            props?.route?.params?.loan?.typeLoan !== 4 &&
                            props.route?.params?.loan?.typeLoan !== 2
                              ? '#F2F3F5'
                              : '#FFFFFF',
                        },
                      ]}
                      disabled={
                        props?.route?.params?.loan?.typeLoan === 4 ||
                        props.route?.params?.loan?.typeLoan === 2
                          ? false
                          : true
                      }
                      onPress={() =>
                        navigation.dispatch(
                          StackActions.push(ScreenNames.CommonSelect, {
                            title: 'Chọn nghề nghiệp',
                            data: QuickSubmitStore.listJobCimb,
                            callback: (value) => {
                              setFieldValue('occupation', value);
                            },
                          })
                        )
                      }
                    >
                      <MText
                        style={[commonStyles.textNormalBold]}
                        numberOfLines={1}
                      >
                        {props?.route?.params?.loan?.typeLoan === 4 ||
                        props?.route?.params?.loan?.typeLoan === 2
                          ? values.occupation?.name
                          : loan?.jobNameCIMB}
                      </MText>
                      <DropDown2 />
                    </TouchableOpacity>
                    {errors && errors.occupation && (
                      <MText
                        style={{
                          fontSize: 12,
                          color: 'red',
                          fontStyle: 'italic',
                          marginTop: 5,
                        }}
                      >
                        {errors.occupation}
                      </MText>
                    )}
                  </View>
                </View>
                {/* <View style={{ marginTop: 16 }}>
                  <MText style={[commonStyles.textNormalBold]}>Điều kiện và điều khoản:</MText>
                  <View style={{ flexDirection: "row", marginTop: 8 }}>
                    <TouchableOpacity
                      onPress={() => {
                        setFieldValue("terms", !values.terms)
                      }}
                    >
                      {!values.terms ? <CheckBox /> : <CheckBoxActive />}
                    </TouchableOpacity>
                    <TouchableOpacity
                      onPress={() => {
                        setFieldValue("terms", !values.terms)
                      }}
                    >
                      <MText style={[commonStyles.textNormal, { marginLeft: 8 }]}>
                        Tôi đồng ý với{" "}
                      </MText>
                    </TouchableOpacity>
                    <TouchableOpacity>
                      <MText style={[commonStyles.textNormal, { color: "#2F80ED" }]}>
                        điều kiện và điều khoản
                      </MText>
                    </TouchableOpacity>
                  </View>
                </View> */}
                <View style={{ marginTop: 40 }}>
                  <Observer>
                    {() => (
                      <TouchableOpacity
                        disabled={!isValid || QuickSubmitStore.loadingButton}
                        onPress={() => {
                          handleSubmit();
                        }}
                      >
                        <LinearGradient
                          colors={
                            isValid
                              ? ['#FF7A00', '#EF4123']
                              : ['#BDBDBD', '#BDBDBD']
                          }
                          style={{
                            alignItems: 'center',
                            borderRadius: 30,
                            height: 40,
                            justifyContent: 'center',
                          }}
                        >
                          {QuickSubmitStore.loadingButton ? (
                            <ActivityIndicator color={'white'} size="small" />
                          ) : (
                            <MText
                              style={[
                                commonStyles.textNormalBold,
                                { color: '#FFFFFF' },
                              ]}
                            >
                              Tiếp tục
                            </MText>
                          )}
                        </LinearGradient>
                      </TouchableOpacity>
                    )}
                  </Observer>
                </View>
                <View
                  style={{
                    marginBottom: 24,
                    marginTop: 8,
                    flexDirection: 'row',
                    justifyContent: 'center',
                  }}
                >
                  <MText style={{ fontSize: 12, color: '#333333' }}>
                    Cung cấp bởi{' '}
                  </MText>
                  <CIMBBank />
                </View>
                <KeyboardSpacer />
                <DatePicker
                  mode="date"
                  open={showDatePicker}
                  modal
                  title="Chọn thời gian"
                  locale="vi"
                  date={new Date()}
                  onCancel={() => {
                    setShowDatePicker(false);
                  }}
                  onConfirm={(date) => {
                    setShowDatePicker(false);
                    if (typePicker === 0) {
                      setFieldValue('dob', date);
                    }
                    if (typePicker === 1) {
                      setFieldValue('nationalCardDate', date);
                    }
                  }}
                />
              </View>
            )}
          </Formik>
        </ScrollView>
      </SafeAreaView>
      <CIMBLoading isLoading={isLoading} />
    </View>
  );
});
const styles = StyleSheet.create({
  input: {
    height: 40,
    marginVertical: 0,
    borderWidth: 0.5,
    borderColor: '#E0E0E0',
    borderRadius: 4,
    marginTop: 8,
    paddingHorizontal: 10,
    fontFamily: 'BeVietnamPro-Regular',
    color: '#333333',
    fontWeight: 'bold',
  },
});
