//@ts-nocheck
import { StackActions, useNavigation } from '@react-navigation/native';
import { Formik } from 'formik';
import { observer } from 'mobx-react-lite';
import React, { useState } from 'react';
import {
  Dimensions,
  Image,
  ImageStyle,
  SafeAreaView,
  ScrollView,
  TouchableOpacity,
  View,
} from 'react-native';
import {
  CheckBox,
  CheckBoxActive,
  IconBack,
  Iconcimbxtima,
  TickSuccess,
} from '../../assets/icons';
import MButton from '../../components/MButton';
import { color } from '../../theme';
import { commonStyles } from '../CommonStyles';
import * as yup from 'yup';
import { MText } from '../../components/MText';
import homeStore from './Store';
import { ScreenNames } from '../../navigation';
import CIMBLoading from '../../components/CIMBLoading';
import LinearGradient from 'react-native-linear-gradient';
import MHeader from '../../components/MHeader';

const logoView: ImageStyle = {
  position: 'absolute',
  width: '100%',
  height: '100%',
  resizeMode: 'cover',
};
export const CIMBxTima = observer(function CIMBxTima(props) {
  const navigation = useNavigation();
  const [loading, setLoading] = useState(false);
  const loan = props.route.params.loan;

  const onSubmit = (values: any) => {
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
      if (loan?.typeLoan === 4 || loan?.typeLoan === 2) {
        if (loan?.isLiveness) {
          navigation.dispatch(
            StackActions.push(ScreenNames.LiveNess, {
              loan: loan,
            })
          );
        } else {
          navigation.dispatch(
            StackActions.push(ScreenNames.QuickSubmit, {
              loan: loan,
            })
          );
        }
      } else {
        if (!homeStore.checkEKYC[loan?.id]) {
          navigation.dispatch(
            StackActions.push(ScreenNames.Introduction, {
              loan: loan,
            })
          );
        } else {
          navigation.dispatch(
            StackActions.push(ScreenNames.QuickSubmit, {
              loan: loan,
            })
          );
        }
      }
    }, 2500);
  };

  return (
    <View style={{ flex: 1 }}>
      <Image source={require('../../assets/img/home.png')} style={logoView} />
      <MHeader title="" onBack={() => navigation.goBack()} />
      <SafeAreaView style={{ flex: 1 }}>
        <Formik
          onSubmit={onSubmit}
          initialValues={{ terms: true }}
          validationSchema={yup.object().shape({
            terms: yup.bool().oneOf([true], ''),
          })}
        >
          {({ values, setFieldValue, isValid, handleSubmit }) => (
            <ScrollView style={{ flex: 1, marginBottom: 16 }}>
              <Image
                source={require('./bg.png')}
                resizeMode="contain"
                style={{
                  width: Dimensions.get('window').width,
                  height: Dimensions.get('window').height / 2 - 120,
                }}
              />
              <View style={{ marginVertical: 16 }}>
                <View style={{ paddingHorizontal: 16 }}>
                  <View style={{ flexDirection: 'row' }}>
                    <TickSuccess />
                    <MText style={[commonStyles.textNormal, { marginLeft: 8 }]}>
                      Không cần hồ sơ chứng minh thu nhập
                    </MText>
                  </View>
                  <View style={{ flexDirection: 'row', marginTop: 8 }}>
                    <TickSuccess />
                    <MText style={[commonStyles.textNormal, { marginLeft: 8 }]}>
                      Hạn mức lên đến 300 triệu
                    </MText>
                  </View>
                  <View style={{ flexDirection: 'row', marginTop: 8 }}>
                    <TickSuccess />
                    <MText style={[commonStyles.textNormal, { marginLeft: 8 }]}>
                      Lãi suất hấp dẫn
                    </MText>
                  </View>
                  <View style={{ flexDirection: 'row', marginTop: 8 }}>
                    <TickSuccess />
                    <MText style={[commonStyles.textNormal, { marginLeft: 8 }]}>
                      Xét duyệt và giải ngân nhanh chóng
                    </MText>
                  </View>
                  <View style={{ flexDirection: 'row', marginTop: 8 }}>
                    <TickSuccess />
                    <MText style={[commonStyles.textNormal, { marginLeft: 8 }]}>
                      Theo dõi trạng thái hồ sơ và thông tin khoản vay ngay
                      {'\n'}
                      trên ứng dụng
                    </MText>
                  </View>
                </View>

                <View
                  style={{
                    marginVertical: 16,
                    backgroundColor: '#BDBDBD',
                    height: 1,
                  }}
                />
                <View style={{ paddingHorizontal: 16 }}>
                  <MText style={[commonStyles.textNormalBold]}>
                    Điều kiện và điều khoản:
                  </MText>
                  <View style={{ flexDirection: 'row', marginTop: 8 }}>
                    <TouchableOpacity
                      onPress={() => {
                        setFieldValue('terms', !values.terms);
                      }}
                    >
                      {!values.terms ? <CheckBox /> : <CheckBoxActive />}
                    </TouchableOpacity>
                    <TouchableOpacity
                      onPress={() => {
                        setFieldValue('terms', !values.terms);
                      }}
                    >
                      <MText
                        style={[commonStyles.textNormal, { marginLeft: 8 }]}
                      >
                        Tôi đồng ý với{' '}
                      </MText>
                    </TouchableOpacity>
                    <TouchableOpacity
                      onPress={() =>
                        navigation.dispatch(
                          StackActions.push(ScreenNames.QuickTerm, {
                            fullSubmit: false,
                          })
                        )
                      }
                    >
                      <MText
                        style={[
                          commonStyles.textNormalBold,
                          { color: color.primary },
                        ]}
                      >
                        điều kiện và điều khoản
                      </MText>
                    </TouchableOpacity>
                  </View>
                </View>
                <View style={{ marginTop: 24, paddingHorizontal: 16 }}>
                  <TouchableOpacity
                    disabled={!isValid}
                    onPress={() => {
                      handleSubmit();
                    }}
                  >
                    <LinearGradient
                      colors={
                        isValid
                          ? ['#FF7A00', '#EF4123']
                          : ['#BDBDBD', '#BDBDBD']
                      }
                      style={{
                        alignItems: 'center',
                        borderRadius: 30,
                        height: 40,
                        justifyContent: 'center',
                      }}
                    >
                      <MText
                        style={[
                          commonStyles.textNormalBold,
                          { color: isValid ? 'white' : '#333333' },
                        ]}
                      >
                        Tiếp tục
                      </MText>
                    </LinearGradient>
                  </TouchableOpacity>
                </View>
              </View>
            </ScrollView>
          )}
        </Formik>
      </SafeAreaView>
      <CIMBLoading isLoading={loading} />
    </View>
  );
});
