//@ts-nocheck
import React, { useEffect, useMemo, useRef, useState } from 'react';
import {
  Alert,
  ScrollView,
  TextInput,
  TextStyle,
  TouchableOpacity,
  View,
  ViewStyle,
} from 'react-native';
import MHeader from '../../components/MHeader';
import { commonStyles } from '../CommonStyles';
import { MText } from '../../components/MText';
import StepIndicator from '../../components/StepIndicator';
import { IconBack } from '../../assets/svgs';
import { CommonActions, useNavigation } from '@react-navigation/native';
import { ScreenNames } from '../../navigation';
import { Formik } from 'formik';
import { DropDown2, RadioCheckIcon, RadioIcon } from '../../assets/icons';
import LinearGradient from 'react-native-linear-gradient';
import MButton from '../../components/MButton';
import KeyboardSpacer from '../../components/keyboardspace';
import * as yup from 'yup';
import { EnumGender, formatDDMMYYY, logEvent, logEventFb } from '../../utils';
import ttsStore from './store';
import DatePicker from 'react-native-date-picker';
import { Api } from '../../services/api';
import Loading from '../../components/Loading';
import moment from 'moment';
import appStore from '../../AppStore';

export default function ReviewInformation(props) {
  const navigation = useNavigation();
  const formRef = useRef(null);
  const [showDate, setShowDate] = useState(false);
  const [typeDate, setTypeDate] = useState(1);
  const [isLoading, setIsLoading] = useState(false);

  const onSubmit = async (values) => {
    const body = {
      LoanBriefId: props?.route?.params?.loan?.id,
      FullName: values.fullName,
      Dob: moment(values.dob, 'DD/MM/YYYY').format('YYYY-MM-DD'),
      Gender: values.gender,
      NationalCard: values.nationalCard,
      DateNationalId: moment(values.dateNationalId, 'DD/MM/YYYY').format(
        'YYYY-MM-DD'
      ),
      Phone: values.phone,
      Passport: values.passport,
      ProvinceId: values.provinceId,
      DistrictId: values.districtId,
      WardId: values.wardId,
      Address: values.address,
      IsMerried: values.isMerried,
      ResidentType: values.residentType,
      HouseHoldProvinceId: values.houseHoldProvinceId,
      HouseHoldDistrictId: values.houseHoldDistrictId,
      HouseHoldWardId: values.houseHoldWardId,
      HouseHoldAddress: values.houseHoldAddress,
      bankId: values.bankId,
      bankAccountName: values?.bankAccountName,
      bankAccountNumber: values?.bankAccountNumber,
    };

    try {
      setIsLoading(true);
      const response = await Api.getInstance().updateInfoCustomerV2(body);
      setIsLoading(false);
      if (response.kind === 'ok') {
        if (response.data?.meta?.errorCode === 200) {
          navigation.push(ScreenNames.ReviewInformationOther, {
            loan: props.route?.params?.loan,
          });
        } else {
          Alert.alert('Thông báo', response.data?.meta?.errorMessage);
        }
      } else {
        Alert.alert('Thông báo', 'Có lỗi xảy ra. Vui lòng thử lại sau');
      }
    } catch (error) {
      setIsLoading(false);
    }
  };

  const getData = async () => {
    try {
      setIsLoading(true);
      const response = await Api.getInstance().getInfoCustomerV2(
        props.route?.params?.loan?.id
      );
      setIsLoading(false);

      if (response.kind === 'ok') {
        if (response.data?.meta.errorCode === 200) {
          formRef.current.setFieldValue(
            'fullName',
            response?.data?.data?.fullName
          );
          formRef.current.setFieldValue(
            'dob',
            response?.data?.data?.dob
              ? formatDDMMYYY(response?.data?.data?.dob)
              : ''
          );
          formRef.current.setFieldValue(
            'gender',
            response?.data?.data?.gender ?? null
          );
          formRef.current.setFieldValue(
            'nationalCard',
            response?.data?.data?.nationalCard
              ? response?.data?.data?.nationalCard
              : ''
          );
          formRef.current.setFieldValue(
            'dateNationalId',
            response?.data?.data?.dateNationalId
              ? formatDDMMYYY(response?.data?.data?.dateNationalId)
              : ''
          );
          formRef.current.setFieldValue(
            'phone',
            response?.data?.data?.phone ? response?.data?.data?.phone : ''
          );
          formRef.current.setFieldValue(
            'passport',
            response?.data?.data?.passport ? response?.data?.data?.passport : ''
          );
          formRef.current.setFieldValue(
            'provinceId',
            response?.data?.data?.provinceId
              ? response?.data?.data?.provinceId
              : null
          );
          formRef.current.setFieldValue(
            'provinceName',
            response?.data?.data?.provinceName
              ? response?.data?.data?.provinceName
              : ''
          );
          if (response?.data?.data?.provinceId) {
            ttsStore.getDistrict(response?.data?.data?.provinceId);
          }

          formRef.current.setFieldValue(
            'districtId',
            response?.data?.data?.districtId
              ? response?.data?.data?.districtId
              : null
          );
          formRef.current.setFieldValue(
            'districtName',
            response?.data?.data?.districtName
              ? response?.data?.data?.districtName
              : ''
          );
          if (response?.data?.data?.districtId) {
            ttsStore.getWard(response?.data?.data?.districtId);
          }

          formRef.current.setFieldValue(
            'wardId',
            response?.data?.data?.wardId ? response?.data?.data?.wardId : null
          );
          formRef.current.setFieldValue(
            'wardName',
            response?.data?.data?.wardName ? response?.data?.data?.wardName : ''
          );

          formRef.current.setFieldValue(
            'address',
            response?.data?.data?.address ? response?.data?.data?.address : ''
          );

          formRef.current.setFieldValue(
            'isMerried',
            response?.data?.data?.isMerried ?? 0
          );

          formRef.current.setFieldValue(
            'residentType',
            response?.data?.data?.residentType
              ? response?.data?.data?.residentType
              : null
          );

          formRef.current.setFieldValue(
            'houseHoldProvinceId',
            response?.data?.data?.houseHoldProvinceId
              ? response?.data?.data?.houseHoldProvinceId
              : null
          );
          formRef.current.setFieldValue(
            'houseHoldProvinceName',
            response?.data?.data?.houseHoldProvinceName
              ? response?.data?.data?.houseHoldProvinceName
              : ''
          );
          if (response?.data?.data?.houseHoldProvinceId) {
            ttsStore.getDistrict2(response?.data?.data?.houseHoldProvinceId);
          }

          formRef.current.setFieldValue(
            'houseHoldDistrictId',
            response?.data?.data?.houseHoldDistrictId
              ? response?.data?.data?.houseHoldDistrictId
              : null
          );
          formRef.current.setFieldValue(
            'houseHoldDistrictName',
            response?.data?.data?.houseHoldDistrictName
              ? response?.data?.data?.houseHoldDistrictName
              : ''
          );
          if (response?.data?.data?.houseHoldDistrictId) {
            ttsStore.getWard2(response?.data?.data?.houseHoldDistrictId);
          }

          formRef.current.setFieldValue(
            'houseHoldWardId',
            response?.data?.data?.houseHoldWardId
              ? response?.data?.data?.houseHoldWardId
              : null
          );
          formRef.current.setFieldValue(
            'houseHoldWardName',
            response?.data?.data?.houseHoldWardName
              ? response?.data?.data?.houseHoldWardName
              : ''
          );

          formRef.current.setFieldValue(
            'houseHoldAddress',
            response?.data?.data?.houseHoldAddress
              ? response?.data?.data?.houseHoldAddress
              : ''
          );

          formRef.current.setFieldValue(
            'bankAccountName',
            response?.data?.data?.bankAccountName ?? ''
          );
          formRef.current.setFieldValue(
            'bankAccountNumber',
            response?.data?.data?.bankAccountNumber ?? ''
          );
          formRef.current.setFieldValue(
            'bankId',
            response?.data?.data?.bankId ?? null
          );
          formRef.current.setFieldValue(
            'bankName',
            response?.data?.data?.bankName ?? ''
          );
        } else {
        }
      }
    } catch (error) {
      setIsLoading(false);
      console.log(error);
    }
  };

  useEffect(() => {
    getData();
    ttsStore.getListBank();
    ttsStore.getRelationship();
    const trackEvent = async () => {
      await logEvent('thongtinvay_started', {
        event: 'thongtinvay_started',
        createdAt: new Date(),
        deviceId: appStore.deviceId,
        loanId: String(props.route?.params?.loan?.id),
        utmSource: props.route?.params?.loan?.utmSource,
      });
      logEventFb('thongtinvay_started');
    };
    trackEvent();
  }, []);

  return (
    <View style={{ flex: 1 }}>
      <MHeader title="Vay trực tuyến 24/7" />
      <View style={commonStyles.fill}>
        <View style={$h} />
        <View style={$bg}>
          <View
            style={{
              paddingVertical: 10,
              flexDirection: 'row',
              alignItems: 'center',
              paddingHorizontal: 16,
            }}
          >
            <TouchableOpacity
              style={{
                zIndex: 1000,
              }}
              onPress={() => {
                Alert.alert(
                  'Thoát cập nhật thông tin',
                  'Bạn có chắc chắn muốn thoát cập nhật thông tin không?',
                  [
                    {
                      text: 'Có',
                      onPress: () => {
                        navigation.dispatch(
                          CommonActions.reset({
                            index: 1,
                            routes: [{ name: ScreenNames.Main }],
                          })
                        );
                      },
                    },
                    {
                      text: 'Không',
                    },
                  ]
                );
              }}
            >
              <IconBack />
            </TouchableOpacity>
            <MText style={$title}>Thông tin cá nhân</MText>
          </View>
          {/* <StepIndicator steps={3} currentStep={0} /> */}
          <Formik
            innerRef={formRef}
            onSubmit={onSubmit}
            initialValues={{
              fullName: '',
              dob: '',
              gender: null,
              nationalCard: '',
              dateNationalId: '',
              phone: '',
              passport: '',
              provinceId: null,
              provinceName: '',
              districtId: null,
              districtName: '',
              wardId: null,
              wardName: '',
              address: '',
              isMerried: 1,
              residentType: 14,
              houseHoldProvinceId: null,
              houseHoldProvinceName: '',
              houseHoldDistrictId: null,
              houseHoldDistrictName: '',
              houseHoldWardId: null,
              houseHoldWardName: '',
              houseHoldAddress: '',
              bankId: null,
              bankName: '',
              bankAccountName: '',
              bankAccountNumber: '',
            }}
            validationSchema={yup.object().shape({
              fullName: yup.string().required('Vui lòng nhập họ tên'),
              dob: yup.string().required('Vui lòng nhập ngày sinh').nullable(),
              gender: yup
                .number()
                .required('Vui lòng chọn giới tính')
                .nullable(),
              nationalCard: yup.string().required('Vui lòng nhập CCCD/CMND'),
              dateNationalId: yup
                .string()
                .required('Vui lòng nhập ngày cấp')
                .nullable(),
              phone: yup
                .string()
                .required('Vui lòng nhập số điện thoại')
                .nullable(),
              provinceName: yup.string().required('Thành phố là bắt buộc'),
              districtName: yup.string().required('Quận huyện là bắt buộc'),
              wardName: yup.string().required('Phường xã là bắt buộc'),
              address: yup.string().required('Địa chỉ là bắt buộc'),
              houseHoldProvinceName: yup
                .string()
                .required('Thành phố là bắt buộc'),
              houseHoldDistrictName: yup
                .string()
                .required('Quận huyện là bắt buộc'),
              houseHoldWardName: yup.string().required('Phường xã là bắt buộc'),
              houseHoldAddress: yup.string().required('Địa chỉ là bắt buộc'),
              bankName: yup.string().required('Vui lòng chọn ngân hàng'),
              bankAccountName: yup.string().required('Vui lòng nhập chủ thẻ'),
              bankAccountNumber: yup
                .string()
                .required('Vui lòng nhập số tài khoản'),
            })}
          >
            {({
              values,
              errors,
              handleChange,
              handleSubmit,
              setFieldValue,
            }) => {
              const renderView = useMemo(
                () => (
                  <ScrollView
                    style={[commonStyles.fill, { paddingHorizontal: 16 }]}
                  >
                    <MText style={$title2}>1.1 Thông tin cá nhân</MText>
                    <MText style={$label}>Họ và tên</MText>
                    <TextInput
                      style={[
                        $textInput,
                        {
                          color: '#333333',
                          fontWeight: '500',
                          fontFamily: 'BeVietnamPro-Medium',
                        },
                      ]}
                      value={values.fullName}
                      onChangeText={handleChange('fullName')}
                    />
                    {errors && errors.fullName && (
                      <MText style={$error}>{errors.fullName}</MText>
                    )}
                    <View style={[$row, { marginTop: 16 }]}>
                      <View style={[commonStyles.fill]}>
                        <MText style={$label}>Sinh ngày</MText>
                        <TouchableOpacity
                          style={$select}
                          onPress={() => {
                            setTypeDate(1);
                            setShowDate(true);
                          }}
                        >
                          <MText
                            style={{
                              color: '#333333',
                              fontWeight: '500',
                              fontFamily: 'BeVietnamPro-Medium',
                            }}
                          >
                            {values.dob}
                          </MText>
                        </TouchableOpacity>
                        {errors && errors.dob && (
                          <MText style={$error}>{errors.dob}</MText>
                        )}
                      </View>
                      <View style={[commonStyles.fill]}>
                        <MText style={$label}>Giới tính</MText>
                        <TouchableOpacity
                          style={$select}
                          onPress={() => {
                            navigation.push(ScreenNames.MSelect, {
                              title: 'Chọn giới tính',
                              data: EnumGender,
                              callback: (item) => {
                                setFieldValue('gender', item.id);
                              },
                            });
                          }}
                        >
                          <MText
                            style={{
                              color: '#333333',
                              fontSize: 16,
                              fontWeight: '500',
                              flex: 1,
                            }}
                          >
                            {values.gender === 0
                              ? 'Nam'
                              : values.gender === 1
                                ? 'Nữ'
                                : ''}
                          </MText>
                          <DropDown2 />
                        </TouchableOpacity>
                        {errors && errors.gender && (
                          <MText style={$error}>{errors.gender}</MText>
                        )}
                      </View>
                    </View>

                    <View style={[$row]}>
                      <View style={[commonStyles.fill]}>
                        <MText style={$label}>Số CCCD/CMND</MText>
                        <TextInput
                          keyboardType="number-pad"
                          style={[
                            $textInput,
                            {
                              color: '#333333',
                              fontWeight: '500',
                              fontFamily: 'BeVietnamPro-Medium',
                            },
                          ]}
                          value={values.nationalCard}
                          onChangeText={handleChange('nationalCard')}
                        />
                        {errors && errors.nationalCard && (
                          <MText style={$error}>{errors.nationalCard}</MText>
                        )}
                      </View>
                      <View style={[commonStyles.fill]}>
                        <MText style={$label}>Ngày cấp</MText>
                        <TouchableOpacity
                          style={$select}
                          onPress={() => {
                            setTypeDate(2);
                            setShowDate(true);
                          }}
                        >
                          <MText
                            numberOfLines={1}
                            style={{
                              color:
                                values.dateNationalId !== ''
                                  ? '#333333'
                                  : '#BDBDBD',
                              fontWeight: '500',
                              flex: 1,
                              fontFamily: 'BeVietnamPro-Medium',
                            }}
                          >
                            {values.dateNationalId !== ''
                              ? values.dateNationalId
                              : 'DD/MM/YYYY'}
                          </MText>
                        </TouchableOpacity>
                        {errors && errors.dateNationalId && (
                          <MText style={$error}>{errors.dateNationalId}</MText>
                        )}
                      </View>
                    </View>
                    <MText style={$label}>Số điện thoại</MText>
                    <TextInput
                      editable={false}
                      keyboardType="number-pad"
                      style={[
                        $textInput,
                        {
                          color: '#333333',
                          fontWeight: '500',
                          fontFamily: 'BeVietnamPro-Medium',
                        },
                      ]}
                      value={values.phone}
                      onChangeText={handleChange('phone')}
                    />
                    {errors && errors.phone && (
                      <MText style={$error}>{errors.phone}</MText>
                    )}

                    {/* <MText style={[$label, { marginTop: 16 }]}>Hộ chiếu</MText>
                    <TextInput
                      placeholder="Nhập hộ chiếu của bạn"
                      placeholderTextColor={'#BDBDBD'}
                      style={[
                        $textInput,
                        {
                          color: '#333333',
                          fontSize: 16,
                          fontWeight: '500',
                        },
                      ]}
                      value={values.passport}
                      onChangeText={handleChange('passport')}
                    /> */}

                    <MText style={[$title2, { marginTop: 16 }]}>
                      1.2 Thông tin giải ngân
                    </MText>
                    <MText style={$label}>Ngân hàng</MText>
                    <TouchableOpacity
                      style={$select}
                      onPress={() => {
                        navigation.push(ScreenNames.CommonSelect, {
                          title: 'Chọn ngân hàng',
                          data: ttsStore.listBank,
                          callback: (value) => {
                            setFieldValue('bankName', value.name);
                            setFieldValue('bankId', value.id);
                          },
                        });
                      }}
                    >
                      <MText
                        numberOfLines={1}
                        style={{
                          color: '#333333',
                          fontWeight: '500',
                          flex: 1,
                          fontFamily: 'BeVietnamPro-Medium',
                        }}
                      >
                        {values.bankName}
                      </MText>
                      <DropDown2 />
                    </TouchableOpacity>
                    {errors && errors.bankName && (
                      <MText style={$error}>{errors.bankName}</MText>
                    )}
                    <MText style={[$label, { marginTop: 16 }]}>
                      Tên số tài khoản
                    </MText>
                    <TextInput
                      numberOfLines={1}
                      style={[
                        $textInput,
                        {
                          color: '#333333',
                          fontWeight: '500',
                          fontFamily: 'BeVietnamPro-Medium',
                        },
                      ]}
                      value={values.bankAccountName}
                      onChangeText={handleChange('bankAccountName')}
                    />
                    {errors && errors.bankAccountName && (
                      <MText style={$error}>{errors.bankAccountName}</MText>
                    )}
                    <MText style={[$label, { marginTop: 16 }]}>
                      Số tài khoản
                    </MText>
                    <TextInput
                      keyboardType="number-pad"
                      numberOfLines={1}
                      style={[
                        $textInput,
                        {
                          color: '#333333',
                          fontWeight: '500',
                          fontFamily: 'BeVietnamPro-Medium',
                        },
                      ]}
                      value={values.bankAccountNumber}
                      onChangeText={handleChange('bankAccountNumber')}
                    />
                    {errors && errors.bankAccountNumber && (
                      <MText style={$error}>{errors.bankAccountNumber}</MText>
                    )}

                    <MText style={[$title2, { marginTop: 16 }]}>
                      1.3 Sổ hộ khẩu
                    </MText>
                    <View style={[$row]}>
                      <View style={[commonStyles.fill]}>
                        <MText style={$label}>Tỉnh/ Thành phố</MText>
                        <TouchableOpacity
                          style={$select}
                          onPress={() => {
                            navigation.push(ScreenNames.CommonSelect, {
                              title: 'Tỉnh/ Thành phố',
                              data: ttsStore.listProvince,
                              callback: (item) => {
                                setFieldValue('houseHoldProvinceId', item.id);
                                setFieldValue(
                                  'houseHoldProvinceName',
                                  item.name
                                );
                                setFieldValue('houseHoldDistrictId', null);
                                setFieldValue('houseHoldDistrictName', '');
                                setFieldValue('houseHoldWardId', null);
                                setFieldValue('houseHoldWardName', '');
                                ttsStore.getDistrict2(item.id);
                              },
                            });
                          }}
                        >
                          <MText
                            numberOfLines={1}
                            style={{
                              color: '#333333',
                              fontWeight: '500',
                              flex: 1,
                              fontFamily: 'BeVietnamPro-Medium',
                            }}
                          >
                            {values.houseHoldProvinceName}
                          </MText>
                          <DropDown2 />
                        </TouchableOpacity>
                        {errors && errors.houseHoldProvinceName && (
                          <MText style={$error}>
                            {errors.houseHoldProvinceName}
                          </MText>
                        )}
                      </View>
                      <View style={[commonStyles.fill]}>
                        <MText style={$label}>Quận/ Huyện</MText>
                        <TouchableOpacity
                          style={$select}
                          onPress={() => {
                            navigation.push(ScreenNames.CommonSelect, {
                              title: 'Phường/ Xã',
                              data: ttsStore.listDistrict2,
                              callback: (item) => {
                                setFieldValue('houseHoldDistrictId', item.id);
                                setFieldValue(
                                  'houseHoldDistrictName',
                                  item.name
                                );
                                setFieldValue('houseHoldWardId', null);
                                setFieldValue('houseHoldWardName', '');
                                ttsStore.getWard2(item.id);
                              },
                            });
                          }}
                        >
                          <MText
                            numberOfLines={1}
                            style={{
                              color: '#333333',
                              fontWeight: '500',
                              flex: 1,
                              fontFamily: 'BeVietnamPro-Medium',
                            }}
                          >
                            {values.houseHoldDistrictName}
                          </MText>
                          <DropDown2 />
                        </TouchableOpacity>
                        {errors && errors.houseHoldDistrictName && (
                          <MText style={$error}>
                            {errors.houseHoldDistrictName}
                          </MText>
                        )}
                      </View>
                    </View>
                    <MText style={[$label]}>Phường/ Xã</MText>
                    <TouchableOpacity
                      style={$select}
                      onPress={() => {
                        navigation.push(ScreenNames.CommonSelect, {
                          title: 'Phường/ Xã',
                          data: ttsStore.listWard2,
                          callback: (item) => {
                            setFieldValue('houseHoldWardId', item?.id);
                            setFieldValue('houseHoldWardName', item?.name);
                          },
                        });
                      }}
                    >
                      <MText
                        numberOfLines={1}
                        style={{
                          color: '#333333',
                          fontWeight: '500',
                          flex: 1,
                          fontFamily: 'BeVietnamPro-Medium',
                        }}
                      >
                        {values.houseHoldWardName}
                      </MText>
                      <DropDown2 />
                    </TouchableOpacity>
                    {errors && errors.houseHoldWardName && (
                      <MText style={$error}>{errors.houseHoldWardName}</MText>
                    )}
                    <MText style={[$label, { marginTop: 16 }]}>
                      Địa chỉ chi tiết
                    </MText>
                    <TextInput
                      numberOfLines={1}
                      style={[
                        $textInput,
                        {
                          color: '#333333',
                          fontWeight: '500',
                          fontFamily: 'BeVietnamPro-Medium',
                        },
                      ]}
                      value={values.houseHoldAddress}
                      onChangeText={handleChange('houseHoldAddress')}
                    />
                    {errors && errors.houseHoldAddress && (
                      <MText style={$error}>{errors.houseHoldAddress}</MText>
                    )}
                    <View style={[$row, { marginTop: 16 }]}>
                      <MText
                        style={{
                          fontSize: 14,
                          color: '#333333',
                        }}
                      >
                        A/C đã có gia đình chưa
                      </MText>
                      <View
                        style={{
                          flex: 1,
                          flexDirection: 'row',
                          gap: 16,
                          justifyContent: 'space-between',
                          marginLeft: 16,
                        }}
                      >
                        <TouchableOpacity
                          onPress={() => setFieldValue('isMerried', 1)}
                          style={{
                            flexDirection: 'row',
                            gap: 5,
                            alignItems: 'center',
                          }}
                        >
                          {values.isMerried === 1 ? (
                            <RadioCheckIcon />
                          ) : (
                            <RadioIcon />
                          )}
                          <MText>Đã có</MText>
                        </TouchableOpacity>
                        <TouchableOpacity
                          onPress={() => setFieldValue('isMerried', 0)}
                          style={{
                            flexDirection: 'row',
                            gap: 5,
                            alignItems: 'center',
                          }}
                        >
                          {values.isMerried === 0 ? (
                            <RadioCheckIcon />
                          ) : (
                            <RadioIcon />
                          )}
                          <MText>Chưa có</MText>
                        </TouchableOpacity>
                      </View>
                    </View>
                    <MText style={[$title2]}>1.4 Nơi ở hiện tại</MText>
                    <MText
                      style={{
                        fontSize: 14,
                        color: '#333333',
                      }}
                    >
                      Nơi ở có trùng với địa chỉ hộ khẩu không?
                    </MText>
                    <View
                      style={{
                        flex: 1,
                        flexDirection: 'row',
                        gap: 16,
                        marginTop: 5,
                      }}
                    >
                      <TouchableOpacity
                        onPress={() => {
                          setFieldValue('residentType', 14);
                          setFieldValue(
                            'provinceId',
                            values.houseHoldProvinceId
                          );
                          setFieldValue(
                            'provinceName',
                            values.houseHoldProvinceName
                          );
                          setFieldValue(
                            'districtId',
                            values.houseHoldDistrictId
                          );
                          setFieldValue(
                            'districtName',
                            values.houseHoldDistrictName
                          );
                          setFieldValue('wardId', values.houseHoldWardId);
                          setFieldValue('wardName', values.houseHoldWardName);
                          if (values.houseHoldDistrictId) {
                            ttsStore.getWard(values.houseHoldDistrictId);
                          }
                          if (values.houseHoldProvinceId) {
                            ttsStore.getDistrict(values.houseHoldProvinceId);
                          }
                          setFieldValue('address', values.houseHoldAddress);
                        }}
                        style={{
                          flexDirection: 'row',
                          gap: 5,
                          alignItems: 'center',
                          flex: 1,
                        }}
                      >
                        {values.residentType === 14 ? (
                          <RadioCheckIcon />
                        ) : (
                          <RadioIcon />
                        )}
                        <MText>Có trùng</MText>
                      </TouchableOpacity>
                      <TouchableOpacity
                        onPress={() => {
                          setFieldValue('residentType', 15);
                          setFieldValue('provinceId', null);
                          setFieldValue('provinceName', '');
                          setFieldValue('districtId', null);
                          setFieldValue('districtName', '');
                          setFieldValue('wardId', null);
                          setFieldValue('wardName', '');
                          setFieldValue('address', '');
                        }}
                        style={{
                          flexDirection: 'row',
                          gap: 5,
                          alignItems: 'center',
                          flex: 1,
                        }}
                      >
                        {values.residentType === 15 ? (
                          <RadioCheckIcon />
                        ) : (
                          <RadioIcon />
                        )}
                        <MText>Không trùng</MText>
                      </TouchableOpacity>
                    </View>

                    <View style={[$row, { marginTop: 16 }]}>
                      <View style={[commonStyles.fill]}>
                        <MText style={$label}>Tỉnh/ Thành phố</MText>
                        <TouchableOpacity
                          style={$select}
                          onPress={() => {
                            navigation.push(ScreenNames.CommonSelect, {
                              title: 'Tỉnh/ Thành phố',
                              data: ttsStore.listProvince,
                              callback: (item) => {
                                setFieldValue('provinceId', item.id);
                                setFieldValue('provinceName', item?.name);
                                setFieldValue('districtId', null);
                                setFieldValue('districtName', '');
                                setFieldValue('wardId', null);
                                setFieldValue('wardName', '');
                                ttsStore.getDistrict(item.id);
                              },
                            });
                          }}
                        >
                          <MText
                            numberOfLines={1}
                            style={{
                              color: '#333333',
                              fontWeight: '500',
                              flex: 1,
                              fontFamily: 'BeVietnamPro-Medium',
                            }}
                          >
                            {values.provinceName}
                          </MText>
                          <DropDown2 />
                        </TouchableOpacity>
                        {errors && errors.provinceName && (
                          <MText style={$error}>{errors.provinceName}</MText>
                        )}
                      </View>
                      <View style={[commonStyles.fill]}>
                        <MText style={$label}>Quận/ Huyện</MText>
                        <TouchableOpacity
                          style={$select}
                          onPress={() => {
                            navigation.push(ScreenNames.CommonSelect, {
                              title: 'Quận/ Huyện',
                              data: ttsStore.listDistrict,
                              callback: (item) => {
                                setFieldValue('districtId', item?.id);
                                setFieldValue('districtName', item?.name);
                                setFieldValue('wardId', null);
                                setFieldValue('wardName', '');
                                ttsStore.getWard(item.id);
                              },
                            });
                          }}
                        >
                          <MText
                            numberOfLines={1}
                            style={{
                              color: '#333333',
                              fontSize: 16,
                              fontWeight: '500',
                              flex: 1,
                            }}
                          >
                            {values.districtName}
                          </MText>
                          <DropDown2 />
                        </TouchableOpacity>
                        {errors && errors.districtName && (
                          <MText style={$error}>{errors.districtName}</MText>
                        )}
                      </View>
                    </View>
                    <MText style={[$label]}>Phường/ Xã</MText>
                    <TouchableOpacity
                      style={$select}
                      onPress={() => {
                        navigation.push(ScreenNames.CommonSelect, {
                          title: 'Phường/ Xã',
                          data: ttsStore.listWard,
                          callback: (item) => {
                            setFieldValue('wardId', item.id);
                            setFieldValue('wardName', item?.name);
                          },
                        });
                      }}
                    >
                      <MText
                        numberOfLines={1}
                        style={{
                          color: '#333333',
                          fontWeight: '500',
                          flex: 1,
                          fontFamily: 'BeVietnamPro-Medium',
                        }}
                      >
                        {values.wardName}
                      </MText>
                      <DropDown2 />
                    </TouchableOpacity>
                    {errors && errors.wardName && (
                      <MText style={$error}>{errors.wardName}</MText>
                    )}
                    <MText style={[$label, { marginTop: 16 }]}>
                      Địa chỉ chi tiết
                    </MText>
                    <TextInput
                      style={[
                        $textInput,
                        {
                          color: '#333333',
                          fontWeight: '500',
                        },
                      ]}
                      value={values.address}
                      onChangeText={handleChange('address')}
                    />
                    {errors && errors.address && (
                      <MText style={$error}>{errors.address}</MText>
                    )}
                    <MButton
                      onPress={() => {
                        handleSubmit();
                      }}
                      style={{
                        marginVertical: 24,
                      }}
                    >
                      <LinearGradient
                        start={{ x: 1, y: 0 }}
                        end={{ x: 0, y: 1 }}
                        style={{
                          height: 40,
                          marginVertical: 16,
                          borderRadius: 30,
                          alignItems: 'center',
                          justifyContent: 'center',
                        }}
                        colors={['#FF7A00', '#EF4123']}
                      >
                        <MText
                          style={{
                            color: 'white',
                            fontSize: 16,
                          }}
                        >
                          Tiếp tục
                        </MText>
                      </LinearGradient>
                    </MButton>
                  </ScrollView>
                ),
                [values, errors]
              );
              return (
                <>
                  {renderView}
                  <DatePicker
                    mode="date"
                    open={showDate}
                    modal
                    title="Chọn thời gian"
                    locale="vi"
                    date={new Date()}
                    onCancel={() => {
                      setShowDate(false);
                    }}
                    onConfirm={(date) => {
                      setShowDate(false);
                      if (typeDate === 1) {
                        setFieldValue('dob', formatDDMMYYY(date));
                      }
                      if (typeDate === 2) {
                        setFieldValue('dateNationalId', formatDDMMYYY(date));
                      }
                    }}
                  />
                </>
              );
            }}
          </Formik>
          <KeyboardSpacer />
        </View>
      </View>
      <Loading isLoading={isLoading} />
    </View>
  );
}

const $row: ViewStyle = {
  flexDirection: 'row',
  // alignItems: 'center',
  marginBottom: 16,
  gap: 16,
};

const $textInput: ViewStyle = {
  borderWidth: 1,
  borderRadius: 4,
  borderColor: '#E0E0E0',
  height: 40,
  paddingHorizontal: 8,
  fontFamily: 'BeVietnamPro-Medium',
};

const $label: TextStyle = {
  fontSize: 14,
  color: '#333333',
  paddingBottom: 5,
};

const $title2: TextStyle = {
  fontSize: 16,
  fontWeight: 'bold',
  color: '#333333',
  paddingBottom: 10,
  marginTop: 6,
};

const $title: TextStyle = {
  fontSize: 16,
  fontWeight: 'bold',
  color: '#333333',
  position: 'absolute',
  left: 0,
  right: 0,
  textAlign: 'center',
};
const $h: ViewStyle = {
  backgroundColor: '#EF592E',
  position: 'absolute',
  height: 30,
  width: '100%',
};

const $bg: ViewStyle = {
  borderTopLeftRadius: 30,
  borderTopRightRadius: 30,
  backgroundColor: 'white',
  flex: 1,
};

const $select: ViewStyle = {
  flexDirection: 'row',
  height: 40,
  alignItems: 'center',
  paddingHorizontal: 8,
  borderWidth: 1,
  borderRadius: 4,
  borderColor: '#E0E0E0',
};

const $error: TextStyle = {
  color: '#EB5757',
  fontSize: 14,
  fontStyle: 'italic',
  fontFamily: 'BeVietnamPro-Thin',
  fontWeight: '300',
  marginTop: 5,
};
