//@ts-nocheck
import React, { useEffect, useRef } from 'react';
import { 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 KeyboardSpacer from '../../components/keyboardspace';
import { useNavigation } from '@react-navigation/native';

const residentType = [
  {
    id: 14,
    name: 'KT1',
  },
  {
    id: 15,
    name: 'KT3',
  },
];

export const Step2 = observer(function Step2() {
  const navigation = useNavigation();
  const ref = useRef(null);

  const onSubmit = (values) => {
    digitalLendingStore.body = {
      ...digitalLendingStore.body,
      residentType: values?.residentType,
      provinceId: values?.province?.id,
      districtId: values?.district?.id,
      wardId: values?.ward?.id,
      address: values?.address,
      customerShareLocation: digitalLendingStore?.data?.customerShareLocation,
      houseHoldProvinceId: values?.houseHoldProvinceId?.id,
      houseHoldDistrictId: values?.houseHoldDistrictId?.id,
      houseHoldWardId: values?.houseHoldWardId?.id,
      houseHoldAddress: values?.houseHoldAddress,
      addressNationalCard: values?.addressNationalCard,
    };
  };

  return (
    <View style={{ flex: 1 }}>
      <ScrollView style={{ paddingHorizontal: 12 }}>
        <View
          style={{
            flexDirection: 'row',
            justifyContent: 'space-between',
            alignItems: 'center',
            paddingVertical: 16,
          }}
        >
          <View
            style={{
              width: 40,
              height: 40,
              borderRadius: 40,
              alignItems: 'center',
              justifyContent: 'center',
              shadowRadius: 40,
              backgroundColor: '#FFF3E9',
              borderWidth: 1,
              borderColor: '#FF8E4F',
            }}
          >
            <MText style={{ fontWeight: 'bold', color: '#FF8E4F' }}>01</MText>
          </View>
          <LinearGradient
            colors={['#FF8E4F', '#EF592E']}
            style={{
              width: 40,
              height: 40,
              borderRadius: 40,
              alignItems: 'center',
              justifyContent: 'center',
            }}
          >
            <MText style={{ color: 'white', fontWeight: 'bold' }}>02</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' }}>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 NƠI Ở & HỘ KHẨU</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
          innerRef={ref}
          onSubmit={onSubmit}
          initialValues={{
            residentType: digitalLendingStore?.data?.residentType,
            province: digitalLendingStore?.data?.provinceId
              ? digitalLendingStore?.listProvinces.find(
                  (p) => p.id === digitalLendingStore?.data?.provinceId
                )
              : null,
            district: digitalLendingStore?.data?.districtId
              ? digitalLendingStore?.listDistricts.find(
                  (p) => p.id === digitalLendingStore?.data?.districtId
                )
              : null,
            ward: digitalLendingStore?.data?.wardId
              ? digitalLendingStore?.listWards.find(
                  (p) => p.id === digitalLendingStore?.data?.wardId
                )
              : null,
            address: digitalLendingStore?.data?.address,
            customerShareLocation:
              digitalLendingStore?.data?.customerShareLocation,
            houseHoldProvinceId: digitalLendingStore?.data?.houseHoldProvinceId
              ? {
                  id: digitalLendingStore?.data?.houseHoldProvinceId,
                  name: digitalLendingStore?.data?.houseHoldProvinceName,
                }
              : null,
            houseHoldDistrictId: digitalLendingStore?.data?.houseHoldDistrictId
              ? {
                  id: digitalLendingStore?.data?.houseHoldDistrictId,
                  name: digitalLendingStore?.data?.houseHoldDistrictName,
                }
              : null,
            houseHoldWardId: digitalLendingStore?.data?.houseHoldWardId
              ? {
                  id: digitalLendingStore?.data?.houseHoldWardId,
                  name: digitalLendingStore?.data?.houseHoldWardName,
                }
              : null,
            houseHoldAddress: digitalLendingStore?.data?.houseHoldAddress,
            addressNationalCard: digitalLendingStore?.data?.addressNationalCard,
          }}
        >
          {({ values, handleSubmit, handleChange, setFieldValue }) => (
            <View style={{ marginTop: 16 }}>
              <View>
                <MText style={{ color: '#8A8A8A' }}>Hình thức cư trú</MText>
                <TouchableOpacity
                  onPress={() => {
                    navigation.push('CommonSelect', {
                      title: 'Chọn hình thức cư trú',
                      data: residentType,
                      callback: (item) => {
                        setFieldValue('residentType', item?.id);
                      },
                    });
                  }}
                  style={{
                    height: 30,
                    flex: 1,
                    marginTop: 5,
                  }}
                >
                  <MText>
                    {values.residentType === 14
                      ? 'KT1'
                      : values.residentType === 15
                      ? 'KT3'
                      : ''}
                  </MText>
                </TouchableOpacity>
              </View>
              <View style={{ height: 1, backgroundColor: '#E0E0E0' }} />

              <View style={{ marginTop: 12 }}>
                <MText style={{ color: '#8A8A8A' }}>
                  Chọn Tỉnh/ Thành phố (nơi ở)
                </MText>
                <TouchableOpacity
                  onPress={() => {
                    navigation.push('CommonSelect', {
                      title: 'Chọn tỉnh/thành phố',
                      data: digitalLendingStore.listProvinces,
                      callback: (item) => {
                        setFieldValue('province', item);
                        digitalLendingStore.getDistricts(item?.id);
                        digitalLendingStore.listWards = [];
                        setFieldValue('ward', null);
                        setFieldValue('district', null);
                      },
                    });
                  }}
                  style={{
                    height: 30,
                    flex: 1,
                    marginTop: 5,
                  }}
                >
                  <MText>{values.province ? values.province?.name : ''}</MText>
                </TouchableOpacity>
              </View>
              <View style={{ height: 1, backgroundColor: '#E0E0E0' }} />
              <View style={{ marginTop: 12 }}>
                <MText style={{ color: '#8A8A8A' }}>
                  Chọn Quận/Huyện (nơi ở)
                </MText>
                <TouchableOpacity
                  onPress={() => {
                    navigation.push('CommonSelect', {
                      title: 'Chọn Quận/Huyện',
                      data: digitalLendingStore.listDistricts,
                      callback: (item) => {
                        setFieldValue('district', item);
                        digitalLendingStore.getWards(item?.id);
                        setFieldValue('ward', null);
                      },
                    });
                  }}
                  style={{
                    height: 30,
                    flex: 1,
                    marginTop: 5,
                  }}
                >
                  <MText>{values.district ? values.district?.name : ''}</MText>
                </TouchableOpacity>
              </View>
              <View style={{ height: 1, backgroundColor: '#E0E0E0' }} />
              <View style={{ marginTop: 12 }}>
                <MText style={{ color: '#8A8A8A' }}>
                  Chọn Phường/Xã (nơi ở)
                </MText>
                <TouchableOpacity
                  onPress={() => {
                    navigation.push('CommonSelect', {
                      title: 'Chọn Phường/Xã',
                      data: digitalLendingStore.listWards,
                      callback: (item) => {
                        setFieldValue('ward', item);
                      },
                    });
                  }}
                  style={{
                    height: 30,
                    flex: 1,
                    marginTop: 5,
                  }}
                >
                  <MText>{values.ward ? values.ward?.name : ''}</MText>
                </TouchableOpacity>
              </View>
              <View style={{ height: 1, backgroundColor: '#E0E0E0' }} />
              <View style={{ marginTop: 12 }}>
                <MText style={{ color: '#8A8A8A' }}>
                  Địa chỉ chi tiết (nơi ở)
                </MText>
                <TextInput
                  value={values?.address}
                  onChangeText={handleChange('address')}
                  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' }}>
                  Chọn thành phố (Hộ khẩu)
                </MText>
                <TouchableOpacity
                  onPress={() => {
                    navigation.push('CommonSelect', {
                      title: 'Chọn tỉnh/thành phố',
                      data: digitalLendingStore.listProvinces,
                      callback: (item) => {
                        setFieldValue('houseHoldProvinceId', item);
                        digitalLendingStore.getDistricts(item?.id, (data) => {
                          digitalLendingStore.householdListDistricts = data;
                        });
                        digitalLendingStore.householdListWards = [];
                        setFieldValue('houseHoldDistrictId', null);
                        setFieldValue('houseHoldWardId', null);
                      },
                    });
                  }}
                  style={{
                    height: 30,
                    flex: 1,
                    marginTop: 5,
                  }}
                >
                  <MText>
                    {values.houseHoldProvinceId
                      ? values.houseHoldProvinceId?.name
                      : ''}
                  </MText>
                </TouchableOpacity>
              </View>
              <View style={{ height: 1, backgroundColor: '#E0E0E0' }} />
              <View style={{ marginTop: 12 }}>
                <MText style={{ color: '#8A8A8A' }}>
                  Chọn Quận/Huyện (Hộ khẩu)
                </MText>
                <TouchableOpacity
                  onPress={() => {
                    navigation.push('CommonSelect', {
                      title: 'Chọn Quận/Huyện',
                      data: digitalLendingStore.householdListDistricts,
                      callback: (item) => {
                        setFieldValue('houseHoldDistrictId', item);
                        setFieldValue('houseHoldWardId', null);
                        digitalLendingStore.getWards(item?.id, (data) => {
                          digitalLendingStore.householdListWards = data;
                        });
                      },
                    });
                  }}
                  style={{
                    height: 30,
                    flex: 1,
                    marginTop: 5,
                  }}
                >
                  <MText>
                    {values.houseHoldDistrictId
                      ? values.houseHoldDistrictId?.name
                      : ''}
                  </MText>
                </TouchableOpacity>
              </View>
              <View style={{ height: 1, backgroundColor: '#E0E0E0' }} />
              <View style={{ marginTop: 12 }}>
                <MText style={{ color: '#8A8A8A' }}>
                  Chọn Phường/Xã (Hộ khẩu)
                </MText>
                <TouchableOpacity
                  onPress={() => {
                    navigation.push('CommonSelect', {
                      title: 'Chọn Phường/Xã',
                      data: digitalLendingStore.householdListWards,
                      callback: (item) => {
                        setFieldValue('houseHoldWardId', item);
                      },
                    });
                  }}
                  style={{
                    height: 30,
                    flex: 1,
                    marginTop: 5,
                  }}
                >
                  <MText>
                    {values.houseHoldWardId ? values.houseHoldWardId?.name : ''}
                  </MText>
                </TouchableOpacity>
              </View>
              <View style={{ height: 1, backgroundColor: '#E0E0E0' }} />
              <View style={{ marginTop: 12 }}>
                <MText style={{ color: '#8A8A8A' }}>
                  Địa chỉ chi tiết (Hộ khẩu)
                </MText>
                <TextInput
                  value={values?.houseHoldAddress}
                  onChangeText={handleChange('houseHoldAddress')}
                  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' }}>
                  Địa chỉ trên CCCD/CMND
                </MText>
                <TextInput
                  value={values?.addressNationalCard}
                  onChangeText={handleChange('addressNationalCard')}
                  style={{
                    flex: 1,
                    color: '#33333',
                    height: 30,
                    marginVertical: 0,
                    flex: 1,
                    padding: 0,
                  }}
                />
              </View>
              <View style={{ height: 1, backgroundColor: '#E0E0E0' }} />
              <KeyboardSpacer />
            </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',
        }}
      >
        <TouchableOpacity
          onPress={() => (digitalLendingStore.step = 1)}
          style={{
            paddingHorizontal: 12,
            paddingVertical: 8,
            borderRadius: 40,
            flexDirection: 'row',
            alignItems: 'center',
            borderWidth: 1,
            borderColor: '#FF8E4F',
          }}
        >
          <Back2Icon />
          <MText
            style={{
              marginLeft: 5,
              color: '#FF8E4F',
              fontSize: 16,
              fontWeight: '500',
            }}
          >
            Trở lại
          </MText>
        </TouchableOpacity>
        <StepIcon />
        <TouchableOpacity
          onPress={() => {
            digitalLendingStore.step = 3;
            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>
    </View>
  );
});

const styles = StyleSheet.create({
  input: {},
});
