//@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,
  Alert,
  ScrollView,
  StyleSheet,
  TextInput,
  TouchableOpacity,
  View,
} from 'react-native';
import { CheckBox, CheckBoxActive, DropDown2 } from '../../assets/icons';
import KeyboardSpacer from '../../components/keyboardspace';
import { MText } from '../../components/MText';
import { ScreenNames } from '../../navigation';
import { color } from '../../theme';
import {
  EnumGender,
  EnumMaritalStatus,
  EnumPurpose,
  formatMoney,
} from '../../utils';
import { commonStyles } from '../CommonStyles';
import * as yup from 'yup';
import FullSubmitStore from './store';
import Loading from '../../components/Loading';
import LinearGradient from 'react-native-linear-gradient';
import appStore from '../../AppStore';

interface IProps {
  loan: any;
  callback: any;
}

export const UpdateInfo = observer(function UpdateInfo({
  loan,
  callback,
}: IProps) {
  const navigation = useNavigation();
  const ref = useRef(null);
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    if (loan) {
      setIsLoading(true);
      FullSubmitStore.getDetailLoan(
        loan?.id,
        (res) => {
          setData(res);
          ref.current.setFieldValue('rate', res?.rate ? `${res?.rate}` : '');
          ref.current.setFieldValue(
            'loanAmount',
            res?.loanAmount ? res?.loanAmount : ''
          );
          ref.current.setFieldValue(
            'loanTime',
            res?.loanTime ? res?.loanTime : ''
          );
          ref.current.setFieldValue(
            'gender',
            res?.gender === 0 ? { id: 0, name: 'Nam' } : { id: 1, name: 'Nữ' }
          );
          ref.current.setFieldValue(
            'married',
            res?.merried
              ? FullSubmitStore.listTypeMerried.filter(
                  (item) => item.id === res?.merried
                )[0]
              : null
          );
          ref.current.setFieldValue(
            'statusWorking',
            res?.jobStatusNameCIMB
              ? {
                  id: res?.jobStatusCIMBId,
                  name: res?.jobStatusNameCIMB,
                }
              : null
          );
          ref.current.setFieldValue(
            'jobTitle',
            res?.positionNameCIMB
              ? {
                  id: res?.positionCIMBId,
                  name: res?.positionNameCIMB,
                }
              : null
          );
          ref.current.setFieldValue(
            'sourceFund',
            res?.incomeNameCIMB
              ? {
                  id: res?.incomeCIMBId,
                  name: res?.incomeNameCIMB,
                }
              : null
          );
          ref.current.setFieldValue(
            'taxCode',
            res?.taxCode ? res?.taxCode : ''
          );

          ref.current.setFieldValue(
            'address',
            res?.addressResident ? res?.addressResident : ''
          );
          ref.current.setFieldValue(
            'addressHouseHold',
            res?.addressHouseHold ? res?.addressHouseHold : ''
          );
          ref.current.setFieldValue(
            'bank',
            res?.bankId ? { id: res?.bankId, name: res?.bankName } : null
          );
          ref.current.setFieldValue(
            'bank_account',
            res?.bankAccountNumber ? res?.bankAccountNumber : ''
          );
          ref.current.setFieldValue(
            'account_holder',
            res?.bankAccountName ? res?.bankAccountName : ''
          );
          setIsLoading(false);
        },
        () => {
          setIsLoading(false);
        }
      );
    }
  }, [loan]);

  const onSubmit = (values: any) => {
    setIsLoading(true);
    const body = {
      Id: data?.id,
      LoanAmount: data?.loanAmount,
      LoanTime: data?.loanTime,
      Gender: values?.gender.id,
      Merried: values?.married.id,
      AddressResident: values.address,
      AddressHouseHold: values?.addressHouseHold,
      // EmploymentStatus: values.statusWorking.id,
      // JobTitle: values.jobTitle.id,
      // SourceOfFund: values.sourceFund.id,
      TaxCode: values.taxCode,
      LoanPurpose: values.purpose.id,
      BankId: values?.bank.id,
      BankAccountName: values?.account_holder,
      BankAccountNumber: values?.bank_account,
      RequestForwardIP: appStore.publicIp,
      LocationLat: appStore.lat,
      LocationLong: appStore.long,
      CustomerDeviceID: appStore.deviceId,
      PartnerAppRefID: appStore.appRefID,
      UserDevicePayload: appStore.userDevicePayload,
      incomeCIMBId: values.sourceFund.id,
      jobStatusCIMBId: values.statusWorking.id,
      positionCIMBId: values.jobTitle.id,
    };

    FullSubmitStore.fullSubmit(
      body,
      () => {
        setIsLoading(false);
        FullSubmitStore.tab = 2;
        callback(2);
      },
      () => {
        setIsLoading(false);
      }
    );
  };

  return (
    <View style={{ flex: 1, backgroundColor: '#FFFFFF' }}>
      <ScrollView style={{ flex: 1 }}>
        <Formik
          innerRef={ref}
          initialValues={{
            loanAmount: '',
            terms: true,
            rate: '',
            gender: null,
            married: null,
            purpose: {
              id: 3008,
              name: 'Mua sắm trang thiết bị, vật dụng gia đình',
            },
            loanTime: '',
            statusWorking: null,
            jobTitle: null,
            sourceFund: null,
            taxCode: '',
            address: '',
            addressHouseHold: '',
            check: true,
            bank: null,
            bank_account: '',
            account_holder: '',
          }}
          onSubmit={onSubmit}
          validationSchema={yup.object().shape({
            terms: yup.bool().oneOf([true], ''),
            statusWorking: yup
              .object()
              .required('Vui lòng chọn tình trạng làm việc')
              .nullable(),
            married: yup
              .object()
              .required('Vui lòng chọn tình trạng hôn nhân')
              .nullable(),
            gender: yup.object().required('Vui lòng chọn giới tính').nullable(),
            bank: yup.object().required('Vui lòng chọn ngân hàng').nullable(),
            jobTitle: yup.object().required('Vui lòng chọn chức vụ').nullable(),
            sourceFund: yup
              .object()
              .required('Vui lòng chọn nguồn thu nhập')
              .nullable(),
            address: yup.string().required('Vui lòng nhập địa chỉ nơi ở'),
            addressHouseHold: yup
              .string()
              .required('Vui lòng nhập địa chỉ thường trú'),
            check: yup.bool().oneOf([true], ''),
            bank_account: yup
              .string()
              .required('Vui lòng nhập số tài khoản')
              .matches(/^[0-9]*$/, 'Định dạng không đúng'),
            account_holder: yup
              .string()
              .required('Vui lòng nhập chủ tài khoản'),
          })}
        >
          {({
            values,
            handleSubmit,
            setFieldValue,
            errors,
            handleChange,
            isValid,
          }) => (
            <View style={{ marginHorizontal: 16, marginBottom: 16 }}>
              <MText style={[commonStyles.textNormalBold, { fontSize: 16 }]}>
                THÔNG TIN ĐƠN
              </MText>
              <View
                style={{
                  marginTop: 16,
                  flexDirection: 'row',
                  justifyContent: 'space-between',
                }}
              >
                <View style={{ flex: 1, marginRight: 8 }}>
                  <MText style={[commonStyles.textNormal]}>
                    Số tiền vay (VND)
                  </MText>
                  <TextInput
                    style={[styles.input, { backgroundColor: '#F2F3F5' }]}
                    value={formatMoney(values.loanAmount)}
                    onChangeText={handleChange('loanAmount')}
                    keyboardType="numeric"
                    editable={false}
                  />
                </View>
                <View style={{ flex: 1, marginLeft: 8 }}>
                  <MText style={[commonStyles.textNormal]}>Kỳ hạn</MText>
                  <TextInput
                    style={[styles.input, { backgroundColor: '#F2F3F5' }]}
                    value={`${values.loanTime} tháng`}
                    onChangeText={handleChange('loanAmount')}
                    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]}>Lãi suất (%)</MText>
                  <TextInput
                    editable={false}
                    style={[styles.input, { backgroundColor: '#F2F3F5' }]}
                    keyboardType="numeric"
                    value={values.rate}
                    onChangeText={handleChange('rate')}
                  />
                </View>
                <View style={{ flex: 1, marginLeft: 8 }}></View>
              </View>
              <View
                style={{
                  marginTop: 16,
                  flexDirection: 'row',
                  justifyContent: 'space-between',
                }}
              >
                <View style={{ flex: 1, marginRight: 8 }}>
                  <MText style={[commonStyles.textNormal]}>
                    Giới tính <MText style={{ color: 'red' }}>*</MText>
                  </MText>
                  <TouchableOpacity
                    disabled
                    style={[
                      styles.input,
                      {
                        justifyContent: 'space-between',
                        flexDirection: 'row',
                        alignItems: 'center',
                        backgroundColor: '#F2F3F5',
                      },
                    ]}
                    onPress={() =>
                      navigation.dispatch(
                        StackActions.push(ScreenNames.CommonSelect, {
                          title: 'Chọn giới tính',
                          data: EnumGender,
                          callback: (value) => {
                            setFieldValue('gender', value);
                          },
                        })
                      )
                    }
                  >
                    <MText style={[commonStyles.textNormalBold]}>
                      {values.gender ? values.gender?.name : ''}
                    </MText>
                    <DropDown2 />
                  </TouchableOpacity>
                  {errors && errors.gender && (
                    <MText
                      style={{
                        fontSize: 12,
                        color: 'red',
                        fontStyle: 'italic',
                        marginTop: 5,
                      }}
                    >
                      {errors.gender}
                    </MText>
                  )}
                </View>
                <View style={{ flex: 1, marginLeft: 8 }}>
                  <MText style={[commonStyles.textNormal]}>
                    Tình trạng hôn nhân{' '}
                    <MText style={{ color: 'red' }}>*</MText>
                  </MText>
                  <TouchableOpacity
                    disabled={
                      loan?.typeLoan === 4 || loan?.typeLoan === 2
                        ? false
                        : true
                    }
                    style={[
                      styles.input,
                      {
                        justifyContent: 'space-between',
                        flexDirection: 'row',
                        alignItems: 'center',
                        backgroundColor:
                          loan?.typeLoan === 4 || loan?.typeLoan === 2
                            ? 'white'
                            : '#F2F3F5',
                      },
                    ]}
                    onPress={() =>
                      navigation.dispatch(
                        StackActions.push(ScreenNames.CommonSelect, {
                          title: 'Chọn tình trạng hôn nhân',
                          data: FullSubmitStore.listTypeMerried,
                          callback: (value) => {
                            setFieldValue('married', value);
                          },
                        })
                      )
                    }
                  >
                    <MText style={[commonStyles.textNormalBold]}>
                      {values.married ? values.married?.name : ''}
                    </MText>
                    <DropDown2 />
                  </TouchableOpacity>
                  {errors && errors.merried && (
                    <MText
                      style={{
                        fontSize: 12,
                        color: 'red',
                        fontStyle: 'italic',
                        marginTop: 5,
                      }}
                    >
                      {errors.merried}
                    </MText>
                  )}
                </View>
              </View>

              <View style={{ marginTop: 16 }}>
                <MText style={[commonStyles.textNormal]}>
                  Địa chỉ nơi ở <MText style={{ color: 'red' }}>*</MText>
                </MText>
                <TextInput
                  editable={false}
                  style={[styles.input, { backgroundColor: '#F2F3F5' }]}
                  value={values.address}
                  onChangeText={handleChange('address')}
                />
                {errors && errors.address && (
                  <MText
                    style={{
                      fontSize: 12,
                      color: 'red',
                      fontStyle: 'italic',
                      marginTop: 5,
                    }}
                  >
                    {errors.address}
                  </MText>
                )}
              </View>
              <View style={{ marginTop: 16 }}>
                <MText style={[commonStyles.textNormal]}>
                  Địa chỉ thường trú <MText style={{ color: 'red' }}>*</MText>
                </MText>
                <TextInput
                  editable={false}
                  style={[styles.input, { backgroundColor: '#F2F3F5' }]}
                  // style={styles.input}
                  value={values.addressHouseHold}
                  onChangeText={handleChange('addressHouseHold')}
                />
                {errors && errors.addressHouseHold && (
                  <MText
                    style={{
                      fontSize: 12,
                      color: 'red',
                      fontStyle: 'italic',
                      marginTop: 5,
                    }}
                  >
                    {errors.addressHouseHold}
                  </MText>
                )}
              </View>

              <View
                style={{
                  marginTop: 16,
                  flexDirection: 'row',
                  justifyContent: 'space-between',
                }}
              >
                <View style={{ flex: 1, marginRight: 8 }}>
                  <MText style={[commonStyles.textNormal]}>
                    Tình trạng việc làm{' '}
                    <MText style={{ color: 'red' }}>*</MText>
                  </MText>
                  <TouchableOpacity
                    style={[
                      styles.input,
                      {
                        justifyContent: 'space-between',
                        flexDirection: 'row',
                        alignItems: 'center',
                        backgroundColor:
                          loan?.typeLoan === 4 || loan?.typeLoan === 2
                            ? 'white'
                            : '#F2F3F5',
                      },
                    ]}
                    disabled={
                      loan?.typeLoan === 4 || loan?.typeLoan === 2
                        ? false
                        : true
                    }
                    onPress={() =>
                      navigation.dispatch(
                        StackActions.push(ScreenNames.CommonSelect, {
                          title: 'Tình trạng làm việc',
                          data: FullSubmitStore.lstStatusJobCIMB,
                          callback: (value) => {
                            setFieldValue('statusWorking', value);
                          },
                        })
                      )
                    }
                  >
                    <MText
                      style={[commonStyles.textNormalBold]}
                      numberOfLines={1}
                    >
                      {values.statusWorking?.name}
                    </MText>
                    <DropDown2 />
                  </TouchableOpacity>
                  {errors && errors.statusWorking && (
                    <MText
                      style={{
                        fontSize: 12,
                        color: 'red',
                        fontStyle: 'italic',
                        marginTop: 5,
                      }}
                    >
                      {errors.statusWorking}
                    </MText>
                  )}
                </View>
                <View style={{ flex: 1, marginLeft: 8 }}>
                  <MText style={[commonStyles.textNormal]}>
                    Chức vụ <MText style={{ color: 'red' }}>*</MText>
                  </MText>
                  <TouchableOpacity
                    style={[
                      styles.input,
                      {
                        justifyContent: 'space-between',
                        flexDirection: 'row',
                        alignItems: 'center',
                        backgroundColor:
                          loan?.typeLoan === 4 || loan?.typeLoan === 2
                            ? 'white'
                            : '#F2F3F5',
                      },
                    ]}
                    disabled={
                      loan?.typeLoan === 4 || loan?.typeLoan === 2
                        ? false
                        : true
                    }
                    onPress={() =>
                      navigation.dispatch(
                        StackActions.push(ScreenNames.CommonSelect, {
                          title: 'Chọn chức vụ',
                          data: FullSubmitStore.lstPositionCIMB,
                          callback: (value) => {
                            setFieldValue('jobTitle', value);
                          },
                        })
                      )
                    }
                  >
                    <MText
                      style={[commonStyles.textNormalBold]}
                      numberOfLines={1}
                    >
                      {values.jobTitle?.name}
                    </MText>
                    <DropDown2 />
                  </TouchableOpacity>
                  {errors && errors.jobTitle && (
                    <MText
                      style={{
                        fontSize: 12,
                        color: 'red',
                        fontStyle: 'italic',
                        marginTop: 5,
                      }}
                    >
                      {errors.jobTitle}
                    </MText>
                  )}
                </View>
              </View>
              <View
                style={{
                  marginTop: 16,
                  flexDirection: 'row',
                  justifyContent: 'space-between',
                }}
              >
                <View style={{ flex: 1, marginRight: 8 }}>
                  <MText style={[commonStyles.textNormal]}>
                    Nguồn thu nhập <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: 'Nguồn thu nhập',
                          data: FullSubmitStore.lstIncomeCIMB,
                          callback: (value) => {
                            setFieldValue('sourceFund', value);
                          },
                        })
                      )
                    }
                  >
                    <MText
                      style={[commonStyles.textNormalBold]}
                      numberOfLines={1}
                    >
                      {values.sourceFund?.name}
                    </MText>
                    <DropDown2 />
                  </TouchableOpacity>
                  {errors && errors.sourceFund && (
                    <MText
                      style={{
                        fontSize: 12,
                        color: 'red',
                        fontStyle: 'italic',
                        marginTop: 5,
                      }}
                    >
                      {errors.sourceFund}
                    </MText>
                  )}
                </View>
                <View style={{ flex: 1, marginLeft: 8 }}>
                  <MText style={[commonStyles.textNormal]}>Mã số thuế</MText>
                  <TextInput
                    style={styles.input}
                    keyboardType="number-pad"
                    value={values.taxCode}
                    onChangeText={handleChange('taxCode')}
                  />
                </View>
              </View>
              <View
                style={{
                  marginTop: 16,
                  flexDirection: 'row',
                  justifyContent: 'space-between',
                }}
              >
                <View style={{ flex: 1, marginRight: 8 }}>
                  <MText style={[commonStyles.textNormal]}>
                    Mục đích sử dụng vốn
                  </MText>
                  <TouchableOpacity
                    disabled
                    style={[
                      styles.input,
                      {
                        justifyContent: 'space-between',
                        flexDirection: 'row',
                        alignItems: 'center',
                        backgroundColor: '#F2F3F5',
                      },
                    ]}
                  >
                    <MText
                      style={[commonStyles.textNormalBold]}
                      numberOfLines={1}
                    >
                      {values.purpose ? values.purpose?.name : ''}
                    </MText>
                    <DropDown2 />
                  </TouchableOpacity>
                </View>
                <View style={{ flex: 1, marginLeft: 8 }}>
                  <MText style={[commonStyles.textNormal]}>Ngân hàng</MText>
                  <TouchableOpacity
                    disabled
                    style={[
                      styles.input,
                      {
                        justifyContent: 'space-between',
                        flexDirection: 'row',
                        alignItems: 'center',
                        backgroundColor: '#F2F3F5',
                      },
                    ]}
                    onPress={() =>
                      navigation.dispatch(
                        StackActions.push(ScreenNames.CommonSelect, {
                          title: 'Chọn ngân hàng',
                          data: FullSubmitStore.listBanks,
                          callback: (value) => {
                            setFieldValue('bank', value);
                          },
                        })
                      )
                    }
                  >
                    <MText
                      style={[commonStyles.textNormalBold]}
                      numberOfLines={1}
                    >
                      {values.bank ? values.bank?.name : ''}
                    </MText>
                    <DropDown2 />
                  </TouchableOpacity>
                  {errors && errors.bank && (
                    <MText
                      style={{
                        fontSize: 12,
                        color: 'red',
                        fontStyle: 'italic',
                        marginTop: 5,
                      }}
                    >
                      {errors.bank}
                    </MText>
                  )}
                </View>
              </View>
              <View
                style={{
                  marginTop: 16,
                  flexDirection: 'row',
                  justifyContent: 'space-between',
                }}
              >
                <View style={{ flex: 1, marginRight: 8 }}>
                  <MText style={[commonStyles.textNormal]}>Số tài khoản</MText>
                  <TextInput
                    numberOfLines={1}
                    editable={false}
                    style={[styles.input, { backgroundColor: '#F2F3F5' }]}
                    // style={styles.input}
                    value={values.bank_account}
                    onChangeText={handleChange('bank_account')}
                    keyboardType="numeric"
                  />
                  {errors && errors.bank_account && (
                    <MText
                      style={{
                        fontSize: 12,
                        color: 'red',
                        fontStyle: 'italic',
                        marginTop: 5,
                      }}
                    >
                      {errors.bank_account}
                    </MText>
                  )}
                </View>
                <View style={{ flex: 1, marginLeft: 8 }}>
                  <MText style={[commonStyles.textNormal]}>Chủ tài khoản</MText>
                  <TextInput
                    numberOfLines={1}
                    editable={false}
                    style={[styles.input, { backgroundColor: '#F2F3F5' }]}
                    // style={styles.input}
                    value={values.account_holder.toUpperCase()}
                    onChangeText={handleChange('account_holder')}
                    autoCapitalize="characters"
                  />
                  {errors && errors.account_holder && (
                    <MText
                      style={{
                        fontSize: 12,
                        color: 'red',
                        fontStyle: 'italic',
                        marginTop: 5,
                      }}
                    >
                      {errors.account_holder}
                    </MText>
                  )}
                </View>
              </View>
              <View
                style={{
                  height: 1,
                  backgroundColor: '#BDBDBD',
                  marginVertical: 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
                  onPress={() =>
                    navigation.dispatch(
                      StackActions.push(ScreenNames.QuickTerm, {
                        fullSubmit: true,
                      })
                    )
                  }
                >
                  <MText
                    style={[commonStyles.textNormalBold, { color: '#EF4123' }]}
                  >
                    điều kiện và điều khoản
                  </MText>
                </TouchableOpacity>
              </View>

              <TouchableOpacity
                style={{ flexDirection: 'row', marginTop: 16 }}
                onPress={() => {
                  setFieldValue('check', !values.check);
                }}
              >
                {values.check ? <CheckBoxActive /> : <CheckBox />}
                <MText style={[commonStyles.textNormal, { marginLeft: 8 }]}>
                  Tôi xác nhận những thông tin sau:
                </MText>
              </TouchableOpacity>
              <View style={{ paddingHorizontal: 30, marginTop: 8 }}>
                <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                  <View
                    style={{
                      height: 5,
                      width: 5,
                      backgroundColor: 'black',
                      borderRadius: 30,
                    }}
                  />
                  <MText style={[commonStyles.textNormal, { marginLeft: 5 }]}>
                    Tôi đang sống tại Việt Nam
                  </MText>
                </View>
                <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                  <View
                    style={{
                      height: 5,
                      width: 5,
                      backgroundColor: 'black',
                      borderRadius: 30,
                    }}
                  />
                  <MText style={[commonStyles.textNormal, { marginLeft: 5 }]}>
                    Đồng ý cung cấp thông tin cho bên thứ ba
                  </MText>
                </View>
                <View style={{ flexDirection: 'row' }}>
                  <View
                    style={{
                      height: 5,
                      width: 5,
                      backgroundColor: 'black',
                      borderRadius: 30,
                    }}
                  />
                  <MText style={[commonStyles.textNormal, { marginLeft: 5 }]}>
                    Không là người nhận ủy thác của tổ{'\n'}chức uỷ thác nước
                    ngoài
                  </MText>
                </View>
                <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                  <View
                    style={{
                      height: 5,
                      width: 5,
                      backgroundColor: 'black',
                      borderRadius: 30,
                    }}
                  />
                  <MText style={[commonStyles.textNormal, { marginLeft: 5 }]}>
                    Không là thường trú nhân/công dân tại Mỹ
                  </MText>
                </View>
                <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                  <View
                    style={{
                      height: 5,
                      width: 5,
                      backgroundColor: 'black',
                      borderRadius: 30,
                    }}
                  />
                  <MText style={[commonStyles.textNormal, { marginLeft: 5 }]}>
                    Không có người quen làm tại CIMB
                  </MText>
                </View>
              </View>
              <View style={{ marginTop: 40 }}>
                <Observer>
                  {() => (
                    <TouchableOpacity
                      disabled={!isValid || FullSubmitStore.loadingButton}
                      onPress={() => handleSubmit()}
                    >
                      <LinearGradient
                        colors={
                          isValid
                            ? ['#FF7A00', '#EF4123']
                            : ['#BDBDBD', '#BDBDBD']
                        }
                        style={{
                          alignItems: 'center',
                          borderRadius: 30,
                          height: 40,
                          justifyContent: 'center',
                        }}
                      >
                        {FullSubmitStore.loadingButton ? (
                          <ActivityIndicator color={'white'} size="small" />
                        ) : (
                          <MText
                            style={[
                              commonStyles.textNormalBold,
                              { color: '#FFFFFF' },
                            ]}
                          >
                            Tiếp tục
                          </MText>
                        )}
                      </LinearGradient>
                    </TouchableOpacity>
                  )}
                </Observer>
              </View>
              <KeyboardSpacer />
            </View>
          )}
        </Formik>
      </ScrollView>

      <Loading 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',
  },
});
