//@ts-nocheck
import React, { useState } from 'react';
import { useNavigation } from '@react-navigation/native';
import { observer } from 'mobx-react-lite';
import {
  Alert,
  Dimensions,
  Image,
  ScrollView,
  TouchableOpacity,
  View,
} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import {
  Back2Icon,
  StepIcon,
  NextIcon,
  Line2Icon,
  WarningIcon,
  ErrorIcon,
  Check2Icon,
  Check1Icon,
  IConCamera,
} from '../../assets/icons';
import { MText } from '../../components/MText';
import digitalLendingStore from './store';
import { ScreenNames } from '../../navigation';
import Modal from 'react-native-modal';

export const Step6 = observer(function Step6() {
  const navigation = useNavigation();
  const [check, setCheck] = useState(1);
  const [photo, setPhoto] = useState(null);
  const [showModal, setShowModal] = useState(false);
  const [backPhoto, setBackPhoto] = useState(null);
  const [step, setStep] = useState(1);

  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>
          <View
            style={{
              width: 40,
              height: 40,
              borderRadius: 40,
              alignItems: 'center',
              justifyContent: 'center',
              shadowRadius: 40,
              backgroundColor: '#FFF3E9',
              borderWidth: 1,
              borderColor: '#FF8E4F',
            }}
          >
            <MText style={{ color: '#FF8E4F', fontWeight: 'bold' }}>02</MText>
          </View>
          <View
            style={{
              width: 40,
              height: 40,
              borderRadius: 40,
              alignItems: 'center',
              justifyContent: 'center',
              shadowRadius: 40,
              backgroundColor: '#FFF3E9',
              borderWidth: 1,
              borderColor: '#FF8E4F',
            }}
          >
            <MText style={{ color: '#FF8E4F', fontWeight: 'bold' }}>03</MText>
          </View>
          <View
            style={{
              width: 40,
              height: 40,
              borderRadius: 40,
              alignItems: 'center',
              justifyContent: 'center',
              shadowRadius: 40,
              backgroundColor: '#FFF3E9',
              borderWidth: 1,
              borderColor: '#FF8E4F',
            }}
          >
            <MText style={{ color: '#FF8E4F', fontWeight: 'bold' }}>04</MText>
          </View>
          <View
            style={{
              width: 40,
              height: 40,
              borderRadius: 40,
              alignItems: 'center',
              justifyContent: 'center',
              shadowRadius: 40,
              backgroundColor: '#FFF3E9',
              borderWidth: 1,
              borderColor: '#FF8E4F',
            }}
          >
            <MText style={{ color: '#FF8E4F', fontWeight: 'bold' }}>05</MText>
          </View>
          <LinearGradient
            colors={['#FF8E4F', '#EF592E']}
            style={{
              width: 40,
              height: 40,
              borderRadius: 40,
              alignItems: 'center',
              justifyContent: 'center',
            }}
          >
            <MText style={{ fontWeight: 'bold', color: 'white' }}>06</MText>
          </LinearGradient>
          <Line2Icon />
        </View>
        <MText style={{ fontWeight: 'bold' }}>THÔNG TIN CÀ VẸT XE</MText>
        <View
          style={{
            marginVertical: 8,
            borderWidth: 1,
            borderRadius: 8,
            borderColor: '#EB5757',
            padding: 12,
            flexDirection: 'row',
          }}
        >
          <ErrorIcon />
          <MText style={{ fontSize: 12, flex: 1, marginLeft: 10 }}>
            Cung cấp hình ảnh đăng ký xe là điều kiện bắt buộc, bạn vui lòng
            cung cấp hình ảnh đăng ký xe để đơn được đẩy đi nhanh hơn.
          </MText>
        </View>
        <View style={{ height: 1, backgroundColor: '#BDBDBD', marginTop: 8 }} />
        <View style={{ flexDirection: 'row', marginTop: 12 }}>
          <TouchableOpacity onPress={() => setCheck(1)}>
            {check === 1 ? <Check2Icon /> : <Check1Icon />}
          </TouchableOpacity>
          <View style={{ flex: 1, marginLeft: 12 }}>
            <MText style={{ flex: 1 }}>
              Tôi xác nhận đang giữ đăng ký xe của mình
            </MText>
            {check === 1 && (
              <View style={{ marginTop: 12 }}>
                {photo && (
                  <View
                    style={{
                      flexDirection: 'row',
                      justifyContent: 'space-between',
                    }}
                  >
                    <View style={{ flex: 1 }}>
                      <Image
                        source={{ uri: photo }}
                        style={{
                          width: Dimensions.get('window').width / 2 - 40,
                          height:
                            ((Dimensions.get('window').width - 120) * 216) /
                            580,
                          borderWidth: 8,
                          borderRadius: 6,
                        }}
                      />
                      {photo && (
                        <View
                          style={{
                            flexDirection: 'row',
                            marginTop: 12,
                          }}
                        >
                          <TouchableOpacity
                            onPress={() => {
                              navigation.push(ScreenNames.Camera, {
                                front: false,
                                callback: (photo) => {
                                  const formData = new FormData();
                                  formData.append(
                                    'loanbriefId',
                                    digitalLendingStore?.data?.loanBriefId
                                  );
                                  formData.append('TypeDocumentId', 314);
                                  formData.append('image', {
                                    uri: photo,
                                    type: 'image/jpg',
                                    name: 'image.jpg',
                                  });
                                  digitalLendingStore.uploadCavet(
                                    formData,
                                    () => {
                                      setPhoto(photo);
                                    }
                                  );
                                },
                              });
                            }}
                            style={{
                              flexDirection: 'row',
                              alignItems: 'center',
                              padding: 8,
                              borderWidth: 1,
                              borderRadius: 6,
                              borderColor: '#FF8E4F',
                            }}
                          >
                            <IConCamera />
                            <MText
                              style={{
                                color: '#FF8E4F',
                                marginLeft: 2,
                                fontSize: 12,
                              }}
                            >
                              Chụp lại mặt trước
                            </MText>
                          </TouchableOpacity>
                        </View>
                      )}
                    </View>
                    <View style={{ flex: 1, marginLeft: 5 }}>
                      <Image
                        source={{ uri: backPhoto }}
                        style={{
                          width: Dimensions.get('window').width / 2 - 40,
                          height:
                            ((Dimensions.get('window').width - 120) * 216) /
                            580,
                          borderWidth: 8,
                          borderRadius: 6,
                        }}
                      />
                      {backPhoto && (
                        <View style={{ flexDirection: 'row', marginTop: 12 }}>
                          <TouchableOpacity
                            onPress={() => {
                              navigation.push(ScreenNames.Camera, {
                                front: false,
                                callback: (photo) => {
                                  const formData = new FormData();
                                  formData.append(
                                    'loanbriefId',
                                    digitalLendingStore?.data?.loanBriefId
                                  );
                                  formData.append('TypeDocumentId', 314);
                                  formData.append('image', {
                                    uri: photo,
                                    type: 'image/jpg',
                                    name: 'image.jpg',
                                  });
                                  digitalLendingStore.uploadCavet(
                                    formData,
                                    () => {
                                      setBackPhoto(photo);
                                    }
                                  );
                                },
                              });
                            }}
                            style={{
                              flexDirection: 'row',
                              alignItems: 'center',
                              padding: 8,
                              borderWidth: 1,
                              borderRadius: 6,
                              borderColor: '#FF8E4F',
                            }}
                          >
                            <IConCamera />
                            <MText
                              style={{
                                color: '#FF8E4F',
                                marginLeft: 2,
                                fontSize: 12,
                              }}
                            >
                              Chụp lại mặt sau
                            </MText>
                          </TouchableOpacity>
                        </View>
                      )}
                    </View>
                  </View>
                )}
                <View style={{ flexDirection: 'row', marginTop: 12 }}>
                  {(photo === null || backPhoto === null) && (
                    <TouchableOpacity
                      onPress={() => {
                        navigation.push(ScreenNames.Camera, {
                          front: false,
                          callback: (photo) => {
                            const formData = new FormData();
                            formData.append(
                              'loanbriefId',
                              digitalLendingStore?.data?.loanBriefId
                            );
                            formData.append('TypeDocumentId', 314);
                            formData.append('image', {
                              uri: photo,
                              type: 'image/jpg',
                              name: 'image.jpg',
                            });
                            digitalLendingStore.uploadCavet(formData, () => {
                              setPhoto(photo);
                              setShowModal(true);
                            });
                          },
                        });
                      }}
                      style={{
                        flexDirection: 'row',
                        alignItems: 'center',
                        padding: 8,
                        borderWidth: 1,
                        borderRadius: 6,
                        borderColor: '#FF8E4F',
                      }}
                    >
                      <IConCamera />
                      <MText style={{ color: '#FF8E4F', marginLeft: 12 }}>
                        Chụp ảnh đăng ký xe
                      </MText>
                    </TouchableOpacity>
                  )}
                </View>
              </View>
            )}
          </View>
        </View>
        <View style={{ flexDirection: 'row', marginTop: 12 }}>
          <TouchableOpacity
            onPress={() => {
              setCheck(2);
              setPhoto(null);
              setBackPhoto(null);
            }}
          >
            {check === 2 ? <Check2Icon /> : <Check1Icon />}
          </TouchableOpacity>
          <View style={{ flex: 1, marginLeft: 12 }}>
            <MText style={{ flex: 1 }}>
              Đăng ký xe của tôi hiện đang được Tima giữ
            </MText>
          </View>
        </View>
      </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 = 5)}
          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={() => {
            Alert.alert(
              'Vui lòng xác nhận lại',
              'Những thông tin đã đúng với thông tin của bạn chưa?',
              [
                {
                  text: 'Xác nhận',
                  onPress: () => {
                    digitalLendingStore.uploadLoanReborrow(
                      digitalLendingStore.body,
                      () => {
                        Alert.alert('Cập nhật thông tin thành công', '', [
                          {
                            text: 'Đồng ý',
                            onPress: () => {
                              navigation.pop();
                              digitalLendingStore.clear();
                            },
                          },
                        ]);
                      }
                    );
                  },
                },
                {
                  text: 'Huỷ',
                },
              ]
            );
          }}
          disabled={check === 1 && photo === null ? true : false}
        >
          <LinearGradient
            colors={
              check === 1 && photo === null
                ? ['#E0E0E0', '#E0E0E0']
                : ['#FF8E4F', '#EF592E']
            }
            style={{
              paddingHorizontal: 15,
              paddingVertical: 8,
              borderRadius: 40,
              flexDirection: 'row',
              alignItems: 'center',
            }}
          >
            <MText
              style={{
                color: 'white',
                fontSize: 16,
                fontWeight: '500',
                marginRight: 5,
              }}
            >
              Lưu
            </MText>
            <NextIcon />
          </LinearGradient>
        </TouchableOpacity>
      </View>
      <Modal
        backdropColor={'rgba(153, 153, 153, 0.60)'}
        isVisible={showModal}
        style={{
          justifyContent: 'flex-end',
          margin: 0,
        }}
      >
        <View
          style={{
            backgroundColor: 'white',
            borderTopRightRadius: 30,
            borderTopLeftRadius: 30,
            paddingHorizontal: 16,
            borderTopColor: '#FF8E4F',
            borderTopWidth: 4,
          }}
        >
          <MText
            style={{
              fontSize: 16,
              fontWeight: 'bold',
              textAlign: 'center',
              marginTop: 24,
            }}
          >
            Kiểm tra lại mặt trước ĐKX
          </MText>
          <MText
            style={{
              fontSize: 13,
              textAlign: 'center',
              color: '#828282',
            }}
          >
            Vui lòng xác nhận ảnh bạn chụp đã đúng với yêu cầu để tránh trường
            hợp phải chụp lại.
          </MText>
          <View
            style={{
              flexDirection: 'row',
              justifyContent: 'center',
              marginTop: 24,
            }}
          >
            {step === 1 ? (
              <Image
                source={{ uri: photo }}
                style={{
                  width: Dimensions.get('window').width - 150,
                  height: ((Dimensions.get('window').width - 120) * 216) / 360,
                  borderWidth: 8,
                  borderRadius: 6,
                }}
              />
            ) : (
              <Image
                source={{ uri: backPhoto }}
                style={{
                  width: Dimensions.get('window').width - 150,
                  height: ((Dimensions.get('window').width - 120) * 216) / 360,
                  borderWidth: 8,
                  borderRadius: 6,
                }}
              />
            )}
          </View>
          {step === 1 ? (
            <TouchableOpacity
              style={{ marginTop: 12 }}
              onPress={() => {
                setShowModal(false);
                navigation.push(ScreenNames.Camera, {
                  front: false,
                  callback: (photo) => {
                    const formData = new FormData();
                    formData.append(
                      'loanbriefId',
                      digitalLendingStore?.data?.loanBriefId
                    );
                    formData.append('TypeDocumentId', 314);
                    formData.append('image', {
                      uri: photo,
                      type: 'image/jpg',
                      name: 'image.jpg',
                    });
                    digitalLendingStore.uploadCavet(formData, () => {
                      setPhoto(photo);
                      setShowModal(true);
                    });
                  },
                });
              }}
            >
              <MText style={{ color: '#EF592E', textAlign: 'center' }}>
                Chụp lại mặt trước
              </MText>
            </TouchableOpacity>
          ) : (
            <TouchableOpacity
              style={{ marginTop: 12 }}
              onPress={() => {
                setShowModal(false);
                navigation.push(ScreenNames.Camera, {
                  front: false,
                  callback: (photo) => {
                    const formData = new FormData();
                    formData.append(
                      'loanbriefId',
                      digitalLendingStore?.data?.loanBriefId
                    );
                    formData.append('TypeDocumentId', 314);
                    formData.append('image', {
                      uri: photo,
                      type: 'image/jpg',
                      name: 'image.jpg',
                    });
                    digitalLendingStore.uploadCavet(formData, () => {
                      setBackPhoto(photo);
                      setShowModal(true);
                    });
                  },
                });
              }}
            >
              <MText style={{ color: '#EF592E', textAlign: 'center' }}>
                Chụp lại mặt sau
              </MText>
            </TouchableOpacity>
          )}
          <TouchableOpacity
            onPress={() => {
              if (step === 1) {
                setStep(2);
                setShowModal(false);
                navigation.push(ScreenNames.Camera, {
                  front: false,
                  callback: (photo) => {
                    const formData = new FormData();
                    formData.append(
                      'loanbriefId',
                      digitalLendingStore?.data?.loanBriefId
                    );
                    formData.append('TypeDocumentId', 314);
                    formData.append('image', {
                      uri: photo,
                      type: 'image/jpg',
                      name: 'image.jpg',
                    });
                    digitalLendingStore.uploadCavet(formData, () => {
                      setBackPhoto(photo);
                      setShowModal(true);
                    });
                  },
                });
              } else {
                setShowModal(false);
              }
            }}
          >
            <LinearGradient
              colors={['#FF8E4F', '#EF592E']}
              style={{
                paddingHorizontal: 15,
                paddingVertical: 8,
                borderRadius: 40,
                flexDirection: 'row',
                alignItems: 'center',
                justifyContent: 'center',
                marginVertical: 20,
              }}
            >
              <MText
                style={{
                  color: 'white',
                  fontSize: 16,
                  fontWeight: '500',
                }}
              >
                Tiếp tục
              </MText>
            </LinearGradient>
          </TouchableOpacity>
        </View>
      </Modal>
    </View>
  );
});
