//@ts-nocheck
import React, { useEffect, useRef, useState } from 'react';
import { observer, Observer } from 'mobx-react-lite';
import {
  Platform,
  ScrollView,
  TouchableOpacity,
  View,
  StyleSheet,
  TextInput,
} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import {
  Back2Icon,
  StepIcon,
  NextIcon,
  Line2Icon,
  WarningIcon,
} from '../../assets/icons';
import { MText } from '../../components/MText';
import { Formik } from 'formik';
import digitalLendingStore from './store';
import { formatDDMMYYY } from '../../utils';
import DatePicker from 'react-native-date-picker';
import { useNavigation } from '@react-navigation/native';
import moment from 'moment';
import Loading from '../../components/Loading';
import KeyboardSpacer from '../../components/keyboardspace';

const EnumGender = [
  {
    id: 0,
    name: 'Nam',
  },
  {
    id: 1,
    name: 'Nữ',
  },
];

const EnumMarries = [
  {
    id: 0,
    name: 'Chưa có',
  },
  {
    id: 1,
    name: 'Đã có',
  },
];

export const Step1 = observer(function Step1() {
  const ref = useRef(null);
  const [loading, setLoading] = useState(true);
  const navigation = useNavigation();
  const [showDatePicker, setShowDatePicker] = useState(false);
  const [typePicker, setTypePicker] = useState(0); // 0 là chọn ngày sinh, 1 chọn ngày cấp

  useEffect(() => {
    setTimeout(() => {
      ref.current.setFieldValue(
        'fullName',
        digitalLendingStore?.data?.fullName
      );
      ref.current.setFieldValue('phone', digitalLendingStore?.data?.phone);
      ref.current.setFieldValue(
        'nationalCardNumber',
        digitalLendingStore?.data?.nationalCard
      );
      ref.current.setFieldValue(
        'birthDate',
        digitalLendingStore?.data?.dob
          ? formatDDMMYYY(digitalLendingStore?.data?.dob)
          : ''
      );
      ref.current.setFieldValue(
        'passport',
        digitalLendingStore?.data?.passport
      );
      ref.current.setFieldValue('gender', digitalLendingStore?.data?.gender);
      ref.current.setFieldValue(
        'facebook',
        digitalLendingStore?.data?.facebookAddress
      );
      ref.current.setFieldValue(
        'marriage',
        digitalLendingStore?.data?.isMerried
      );
      ref.current.setFieldValue('taxCode', digitalLendingStore?.data?.taxCode);
      ref.current.setFieldValue(
        'nationalCardPlace',
        digitalLendingStore?.data?.nationalCard_Issue
      );
      ref.current.setFieldValue(
        'dateNationalId',
        digitalLendingStore?.data?.dateNationalId
          ? formatDDMMYYY(digitalLendingStore?.data?.dateNationalId)
          : ''
      );
      ref.current.setFieldValue(
        'socialInsuranceNumber',
        digitalLendingStore?.data?.socialInsuranceNumber
      );
    }, 1000);
    setTimeout(() => {
      setLoading(false);
    }, 1000);
  }, []);

  const onSubmit = (values: any) => {
    digitalLendingStore.body = {
      ...digitalLendingStore.body,
      loanBriefId: digitalLendingStore?.data?.loanBriefId,
      fullName: values?.fullName,
      phone: digitalLendingStore?.data?.phone,
      nationalCard: digitalLendingStore?.data?.nationalCard,
      dob:
        values.birthDate !== ''
          ? moment(values.birthDate, 'DD/MM/YYYY').format('YYYY-MM-DD')
          : null,
      gender: values?.gender,
      passport: values?.passport,
      facebookAddress: values?.facebook,
      socialInsuranceNumber: values?.socialInsuranceNumber,
      taxCode: values?.taxCode,
      isMerried: values?.marriage,
      dateNationalId:
        values.dateNationalId !== ''
          ? moment(values.dateNationalId, 'DD/MM/YYYY').format('YYYY-MM-DD')
          : null,
      nationalCard_Issue: values?.nationalCardPlace,
    };
  };

  return (
    <Observer>
      {() => (
        <View style={{ flex: 1 }}>
          <ScrollView style={{ paddingHorizontal: 12 }}>
            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'space-between',
                alignItems: 'center',
                paddingVertical: 16,
              }}
            >
              <LinearGradient
                colors={['#FF8E4F', '#EF592E']}
                style={{
                  width: 40,
                  height: 40,
                  borderRadius: 40,
                  alignItems: 'center',
                  justifyContent: 'center',
                }}
              >
                <MText style={{ color: 'white', fontWeight: 'bold' }}>01</MText>
              </LinearGradient>
              <Line2Icon />
              <View
                style={{
                  width: 40,
                  height: 40,
                  borderRadius: 40,
                  alignItems: 'center',
                  justifyContent: 'center',
                  shadowRadius: 40,
                  backgroundColor: 'white',
                  shadowOffset: {
                    width: 2,
                    height: 1,
                  },
                  ...Platform.select({
                    ios: {
                      shadowColor: 'rgba(0, 0, 0, 0.10)',
                      shadowOpacity: 0.2,
                    },
                    android: {
                      elevation: 10,
                    },
                  }),
                }}
              >
                <MText style={{ fontWeight: 'bold', color: '#333333' }}>
                  02
                </MText>
              </View>
              <View
                style={{
                  width: 40,
                  height: 40,
                  borderRadius: 40,
                  alignItems: 'center',
                  justifyContent: 'center',
                  shadowRadius: 40,
                  backgroundColor: 'white',
                  shadowOffset: {
                    width: 2,
                    height: 1,
                  },
                  ...Platform.select({
                    ios: {
                      shadowColor: 'rgba(0, 0, 0, 0.10)',
                      shadowOpacity: 0.2,
                    },
                    android: {
                      elevation: 10,
                    },
                  }),
                }}
              >
                <MText style={{ fontWeight: 'bold', color: '#333333' }}>
                  03
                </MText>
              </View>
              <View
                style={{
                  width: 40,
                  height: 40,
                  borderRadius: 40,
                  alignItems: 'center',
                  justifyContent: 'center',
                  shadowRadius: 40,
                  backgroundColor: 'white',
                  shadowOffset: {
                    width: 2,
                    height: 1,
                  },
                  ...Platform.select({
                    ios: {
                      shadowColor: 'rgba(0, 0, 0, 0.10)',
                      shadowOpacity: 0.2,
                    },
                    android: {
                      elevation: 10,
                    },
                  }),
                }}
              >
                <MText style={{ fontWeight: 'bold', color: '#333333' }}>
                  04
                </MText>
              </View>
              <View
                style={{
                  width: 40,
                  height: 40,
                  borderRadius: 40,
                  alignItems: 'center',
                  justifyContent: 'center',
                  shadowRadius: 40,
                  backgroundColor: 'white',
                  shadowOffset: {
                    width: 2,
                    height: 1,
                  },
                  ...Platform.select({
                    ios: {
                      shadowColor: 'rgba(0, 0, 0, 0.10)',
                      shadowOpacity: 0.2,
                    },
                    android: {
                      elevation: 10,
                    },
                  }),
                }}
              >
                <MText style={{ fontWeight: 'bold', color: '#333333' }}>
                  05
                </MText>
              </View>
              <View
                style={{
                  width: 40,
                  height: 40,
                  borderRadius: 40,
                  alignItems: 'center',
                  justifyContent: 'center',
                  shadowRadius: 40,
                  backgroundColor: 'white',
                  shadowOffset: {
                    width: 2,
                    height: 1,
                  },
                  ...Platform.select({
                    ios: {
                      shadowColor: 'rgba(0, 0, 0, 0.10)',
                      shadowOpacity: 0.2,
                    },
                    android: {
                      elevation: 10,
                    },
                  }),
                }}
              >
                <MText style={{ fontWeight: 'bold', color: '#333333' }}>
                  06
                </MText>
              </View>
            </View>
            <MText style={{ fontWeight: 'bold' }}>THÔNG TIN CÁ NHÂN</MText>
            <View
              style={{ height: 1, backgroundColor: '#BDBDBD', marginTop: 16 }}
            />
            <View
              style={{
                backgroundColor: '#EB5757',
                flexDirection: 'row',
                padding: 8,
                alignItems: 'center',
                borderRadius: 8,
                marginTop: 12,
              }}
            >
              <WarningIcon />
              <MText style={{ flex: 1, color: 'white', marginLeft: 8 }}>
                Kiểm tra lại thông tin của bạn, nếu chưa chính xác hoặc đã cũ,
                hãy cập nhật lại thông tin mới nhất nhé!
              </MText>
            </View>
            <Formik
              onSubmit={onSubmit}
              innerRef={ref}
              initialValues={{
                fullName: digitalLendingStore?.data?.fullName,
                phone: digitalLendingStore?.data?.phone,
                nationalCardNumber: digitalLendingStore?.data?.nationalCard,
                birthDate: digitalLendingStore?.data?.dob
                  ? formatDDMMYYY(digitalLendingStore?.data?.dob)
                  : '',
                passport: digitalLendingStore?.data?.passport,
                gender: digitalLendingStore?.data?.gender,
                facebook: digitalLendingStore?.data?.facebookAddress,
                marriage: digitalLendingStore?.data?.isMerried,
                taxCode: digitalLendingStore?.data?.taxCode,
                nationalCardPlace:
                  digitalLendingStore?.data?.nationalCard_Issue,
                dateNationalId: digitalLendingStore?.data?.dateNationalId
                  ? formatDDMMYYY(digitalLendingStore?.data?.dateNationalId)
                  : '',
                socialInsuranceNumber:
                  digitalLendingStore?.data?.socialInsuranceNumber,
              }}
            >
              {({ values, handleSubmit, handleChange, setFieldValue }) => (
                <View style={{ marginTop: 16 }}>
                  <View>
                    <MText style={{ color: '#8A8A8A' }}>Họ tên</MText>
                    <TextInput
                      value={values.fullName}
                      onChangeText={handleChange('fullName')}
                      style={{
                        flex: 1,
                        color: '#33333',
                        height: 30,
                        marginVertical: 0,
                        flex: 1,
                        padding: 0,
                      }}
                    />
                  </View>
                  <View style={{ height: 1, backgroundColor: '#E0E0E0' }} />
                  <View style={{ marginTop: 12 }}>
                    <MText style={{ color: '#8A8A8A' }}>Ngày sinh</MText>
                    <TouchableOpacity
                      onPress={() => {
                        setTypePicker(0);
                        setShowDatePicker(true);
                      }}
                      style={{
                        height: 30,
                        flex: 1,
                        marginTop: 5,
                      }}
                    >
                      <MText>{values.birthDate}</MText>
                    </TouchableOpacity>
                  </View>
                  <View style={{ height: 1, backgroundColor: '#E0E0E0' }} />
                  <View style={{ marginTop: 12 }}>
                    <MText style={{ color: '#8A8A8A' }}>Giới tính</MText>
                    <TouchableOpacity
                      onPress={() => {
                        navigation.push('CommonSelect', {
                          title: 'Chọn giới tính',
                          data: EnumGender,
                          callback: (item) => {
                            setFieldValue('gender', item?.id);
                          },
                        });
                      }}
                      style={{
                        height: 30,
                        flex: 1,
                        marginTop: 5,
                      }}
                    >
                      <MText>{values.gender === 1 ? 'Nữ' : 'Nam'}</MText>
                    </TouchableOpacity>
                  </View>
                  <View
                    style={{
                      height: 1,
                      backgroundColor: '#E0E0E0',
                    }}
                  />
                  <View
                    style={{
                      marginTop: 12,
                      backgroundColor: '#F2F2F2',
                      borderRadius: 4,
                      padding: 8,
                    }}
                  >
                    <MText style={{ color: '#8A8A8A' }}>Số điện thoại</MText>
                    <MText>{values.phone}</MText>
                  </View>
                  <View
                    style={{
                      height: 1,
                      backgroundColor: '#E0E0E0',
                      marginTop: 12,
                    }}
                  />
                  <View
                    style={{
                      marginTop: 12,
                      backgroundColor: '#F2F2F2',
                      borderRadius: 4,
                      padding: 8,
                    }}
                  >
                    <MText style={{ color: '#8A8A8A' }}>Số CMND 1</MText>
                    <MText>{values.nationalCardNumber}</MText>
                  </View>
                  <View
                    style={{
                      height: 1,
                      backgroundColor: '#E0E0E0',
                      marginTop: 12,
                    }}
                  />

                  <View style={{ marginTop: 12 }}>
                    <MText style={{ color: '#8A8A8A' }}>
                      Ngày cấp CCCD/CMND
                    </MText>
                    <TouchableOpacity
                      onPress={() => {
                        setTypePicker(1);
                        setShowDatePicker(true);
                      }}
                      style={{
                        height: 30,
                        flex: 1,
                        marginTop: 5,
                      }}
                    >
                      <MText>{values.dateNationalId}</MText>
                    </TouchableOpacity>
                  </View>
                  <View style={{ height: 1, backgroundColor: '#E0E0E0' }} />
                  <View style={{ marginTop: 12 }}>
                    <MText style={{ color: '#8A8A8A' }}>
                      Nơi cấp CCCD/CMND
                    </MText>
                    <TextInput
                      numberOfLines={1}
                      value={values.nationalCardPlace}
                      onChangeText={handleChange('nationalCardPlace')}
                      style={{
                        flex: 1,
                        color: '#33333',
                        height: 30,
                        flex: 1,
                        padding: 0,
                      }}
                    />
                  </View>

                  <View style={{ marginTop: 12 }}>
                    <MText style={{ color: '#8A8A8A' }}>Hôn nhân</MText>
                    <TouchableOpacity
                      onPress={() => {
                        navigation.push('CommonSelect', {
                          title: 'Hôn nhân',
                          data: EnumMarries,
                          callback: (item) => {
                            setFieldValue('marriage', item?.id);
                          },
                        });
                      }}
                      style={{
                        height: 30,
                        flex: 1,
                        marginTop: 5,
                      }}
                    >
                      <MText>
                        {values.marriage === 1 ? 'Đã có' : 'Chưa có'}
                      </MText>
                    </TouchableOpacity>
                  </View>
                  <View style={{ height: 1, backgroundColor: '#E0E0E0' }} />
                  <View style={{ marginTop: 12 }}>
                    <MText style={{ color: '#8A8A8A' }}>Passport</MText>
                    <TextInput
                      value={values.passport}
                      style={{
                        flex: 1,
                        color: '#33333',
                        height: 30,
                        marginVertical: 0,
                        flex: 1,
                        padding: 0,
                      }}
                    />
                  </View>

                  <View style={{ height: 1, backgroundColor: '#E0E0E0' }} />
                  <View style={{ marginTop: 12 }}>
                    <MText style={{ color: '#8A8A8A' }}>Facebook</MText>
                    <TextInput
                      value={values.facebook}
                      onChangeText={handleChange('facebook')}
                      style={{
                        flex: 1,
                        color: '#33333',
                        height: 30,
                        marginVertical: 0,
                        flex: 1,
                        padding: 0,
                      }}
                    />
                  </View>
                  <View style={{ height: 1, backgroundColor: '#E0E0E0' }} />
                  <View style={{ marginTop: 12 }}>
                    <MText style={{ color: '#8A8A8A' }}>Mã số BHXH</MText>
                    <TextInput
                      value={values.socialInsuranceNumber}
                      onChangeText={handleChange('socialInsuranceNumber')}
                      style={{
                        flex: 1,
                        color: '#33333',
                        height: 30,
                        marginVertical: 0,
                        flex: 1,
                        padding: 0,
                      }}
                    />
                  </View>
                  <View style={{ height: 1, backgroundColor: '#E0E0E0' }} />
                  <View style={{ marginTop: 12 }}>
                    <MText style={{ color: '#8A8A8A' }}>Mã số thuế</MText>
                    <TextInput
                      value={values?.taxCode}
                      onChangeText={handleChange('taxCode')}
                      style={{
                        flex: 1,
                        color: '#33333',
                        height: 30,
                        marginVertical: 0,
                        flex: 1,
                        padding: 0,
                      }}
                    />
                  </View>

                  <View style={{ height: 1, backgroundColor: '#E0E0E0' }} />

                  <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('birthDate', formatDDMMYYY(date));
                      }
                      if (typePicker === 1) {
                        setFieldValue('dateNationalId', formatDDMMYYY(date));
                      }
                    }}
                  />
                </View>
              )}
            </Formik>
          </ScrollView>
          <View
            style={{
              backgroundColor: 'white',
              shadowOffset: {
                width: 2,
                height: 1,
              },
              ...Platform.select({
                ios: {
                  shadowColor: 'rgba(0, 0, 0, 0.10)',
                  shadowOpacity: 0.2,
                },
                android: {
                  elevation: 10,
                },
              }),
              paddingTop: 12,
              paddingHorizontal: 12,
              flexDirection: 'row',
              paddingBottom: 16,
              justifyContent: 'space-between',
              alignItems: 'center',
            }}
          >
            <View
              style={{
                paddingHorizontal: 12,
                paddingVertical: 8,
                borderRadius: 40,
                flexDirection: 'row',
                alignItems: 'center',
                borderWidth: 1,
                borderColor: 'white',
              }}
            >
              {/* <Back2Icon /> */}
              <MText
                style={{
                  marginLeft: 5,
                  color: 'white',
                  fontSize: 16,
                  fontWeight: '500',
                }}
              >
                Trở lại
              </MText>
            </View>
            <StepIcon />
            <TouchableOpacity
              onPress={() => {
                digitalLendingStore.step = 2;
                ref.current.handleSubmit();
              }}
            >
              <LinearGradient
                colors={['#FF8E4F', '#EF592E']}
                style={{
                  paddingHorizontal: 12,
                  paddingVertical: 8,
                  borderRadius: 40,
                  flexDirection: 'row',
                  alignItems: 'center',
                }}
              >
                <MText
                  style={{
                    color: 'white',
                    fontSize: 16,
                    fontWeight: '500',
                    marginRight: 5,
                  }}
                >
                  Tiếp tục
                </MText>
                <NextIcon />
              </LinearGradient>
            </TouchableOpacity>
          </View>
          <Loading isLoading={loading} />
        </View>
      )}
    </Observer>
  );
});
