//@ts-nocheck
import { StackActions, useNavigation } from '@react-navigation/native';
import { observer, Observer } from 'mobx-react-lite';
import React, { useState } from 'react';
import {
  ActivityIndicator,
  Dimensions,
  Image,
  ImageStyle,
  SafeAreaView,
  ScrollView,
  StatusBar,
  TouchableOpacity,
  View,
} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import { CIMBBank, IconBackWhite } from '../../assets/icons';
import CIMBLoading from '../../components/CIMBLoading';
import MButton from '../../components/MButton';
import { MText } from '../../components/MText';
import { ScreenNames } from '../../navigation';
import { commonStyles } from '../CommonStyles';
import FullSubmitStore from './store';
import MHeader from '../../components/MHeader';

const logoView: ImageStyle = {
  position: 'absolute',
  width: '100%',
  height: '100%',
  resizeMode: 'cover',
};

export const CimbSelfie = observer(function CimbSelfie(props: any) {
  const [isLoading, setIsLoading] = useState(false);
  const navigation = useNavigation();
  const [photo, setPhoto] = useState(null);
  const loan = props?.route.params?.loan;
  const takePhoto = () => {
    navigation.push(ScreenNames.Camera, {
      front: true,
      selfie: true,
      callback: (photo) => {
        setPhoto(photo);
      },
    });
  };

  const nextStep = () => {
    setIsLoading(true);
    const formData = new FormData();
    formData.append('loanbriefId', loan?.id);
    formData.append('TypeDocumentId', 487);
    formData.append('image', {
      uri: photo,
      type: 'image/jpg',
      name: 'image.jpg',
    });
    FullSubmitStore.uploadDocument(
      formData,
      () => {
        setIsLoading(false);
        setTimeout(() => {
          navigation.dispatch(
            StackActions.push(ScreenNames.MRZScanner, {
              loan: loan,
            })
          );
        }, 600);
      },
      () => {
        setIsLoading(false);
      }
    );
  };

  return (
    <View style={{ flex: 1 }}>
      <Image source={require('../../assets/img/EKYC.png')} style={logoView} />
      <MHeader title="Xác thực khuôn mặt" onBack={() => navigation.goBack()} />
      <SafeAreaView style={commonStyles.fill}>
        <ScrollView style={commonStyles.fill}>
          <View style={{ paddingHorizontal: 16, paddingBottom: 16 }}>
            <Image
              source={
                photo ? { uri: photo } : require('../../assets/img/selfie.png')
              }
              style={{
                width: Dimensions.get('window').width - 32,
                height: ((Dimensions.get('window').width - 32) * 534) / 356,
                borderWidth: 6,
                borderRadius: 6,
                borderColor: '#FFFFFF',
                marginTop: 16,
              }}
            />
          </View>
        </ScrollView>
        <View
          style={{
            flexDirection: 'row',
            paddingHorizontal: 16,
            marginBottom: 30,
          }}
        >
          <MButton
            //@ts-ignore
            onPress={() => {
              takePhoto();
            }}
            disabled={isLoading}
            style={[
              commonStyles.row,
              commonStyles.alignCenter,
              commonStyles.justifyCenter,
              {
                backgroundColor: '#FFFFFF',
                height: 40,
                borderRadius: 30,
                flex: 1,
                marginRight: 8,
                borderWidth: 1,
                borderColor: '#EF4123',
              },
            ]}
          >
            <MText style={[commonStyles.textNormal, { color: '#F05123' }]}>
              Chụp ảnh
            </MText>
          </MButton>

          <Observer>
            {() => (
              <MButton
                //@ts-ignore
                disabled={!photo || isLoading}
                onPress={nextStep}
                style={{ flex: 1 }}
              >
                <LinearGradient
                  colors={
                    photo ? ['#FF7A00', '#EF4123'] : ['#BDBDBD', '#BDBDBD']
                  }
                  style={[
                    commonStyles.alignCenter,
                    commonStyles.justifyCenter,
                    {
                      height: 40,
                      borderRadius: 30,
                      marginLeft: 8,
                    },
                  ]}
                >
                  {isLoading ? (
                    <ActivityIndicator color={'white'} size="small" />
                  ) : (
                    <MText
                      style={[commonStyles.textNormal, { color: 'white' }]}
                    >
                      Tiếp tục
                    </MText>
                  )}
                </LinearGradient>
              </MButton>
            )}
          </Observer>
        </View>
        <View
          style={{
            marginBottom: 24,
            marginTop: 8,
            flexDirection: 'row',
            justifyContent: 'center',
          }}
        >
          <MText style={{ fontSize: 12, color: '#333333' }}>
            Cung cấp bởi{' '}
          </MText>
          <CIMBBank />
        </View>
      </SafeAreaView>
      <CIMBLoading isLoading={isLoading} />
    </View>
  );
});
