//@ts-nocheck
import { CommonActions, useNavigation } from '@react-navigation/native';
import { Formik } from 'formik';
import { observer } from 'mobx-react-lite';
import React from 'react';
import {
  SafeAreaView,
  ScrollView,
  StyleSheet,
  TouchableOpacity,
  View,
} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import { RadioCheckIcon, RadioIcon, TimaIcon } from '../../assets/icons';
import { MText } from '../../components/MText';
import { ScreenNames } from '../../navigation';
import { color } from '../../theme';
import qualifyStore from './Store';

export const Qualify = observer(function Qualify(props: any) {
  const navigation = useNavigation();
  const loan = props.route.params?.loan;
  const handleSubmitValues = (values) => {
    const body = { ...values, loanBriefId: loan.id };
    qualifyStore.postQualify(
      body,
      () => {
        navigation.dispatch(
          CommonActions.reset({
            index: 1,
            routes: [{ name: ScreenNames.Main }],
          })
        );
      },
      () => {
        navigation.dispatch(
          CommonActions.reset({
            index: 1,
            routes: [{ name: ScreenNames.Main }],
          })
        );
      }
    );
  };

  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: '#FFFFFF' }}>
      <Formik
        initialValues={{
          questionBorrow: false,
          questionUseMotobikeGo: false,
          questionMotobikeCertificate: false,
          sourceQualify: 2,
        }}
        onSubmit={handleSubmitValues}
      >
        {({ values, handleSubmit, setFieldValue }) => (
          <View style={{ flex: 1 }}>
            <View style={styles.header}>
              <TimaIcon />
              <View style={{ marginLeft: 10 }}>
                <MText style={{ fontSize: 16, fontWeight: '600' }}>
                  Cập nhật thông tin cơ bản
                </MText>
                <MText style={{ fontSize: 12, fontWeight: '300' }}>
                  Chào mừng bạn đến với Tima Care
                </MText>
              </View>
            </View>
            <ScrollView style={{ flex: 1 }}>
              <View
                style={{
                  borderWidth: 1,
                  borderColor: '#E0E0E0',
                  borderRadius: 6,
                  padding: 16,
                  margin: 16,
                }}
              >
                <View>
                  <MText style={{ color: '#333333' }}>
                    Bạn đang có nhu cầu vay không?{' '}
                    <MText style={{ color: 'red' }}>(*)</MText>
                  </MText>
                  <View style={{ flexDirection: 'row', marginTop: 8 }}>
                    <TouchableOpacity
                      style={{ flexDirection: 'row' }}
                      onPress={() => setFieldValue('questionBorrow', true)}
                    >
                      {values.questionBorrow ? (
                        <RadioCheckIcon />
                      ) : (
                        <RadioIcon />
                      )}
                      <MText style={{ marginLeft: 8 }}>Có</MText>
                    </TouchableOpacity>
                    <TouchableOpacity
                      style={{ flexDirection: 'row', marginLeft: 30 }}
                      onPress={() => setFieldValue('questionBorrow', false)}
                    >
                      {values.questionBorrow ? (
                        <RadioIcon />
                      ) : (
                        <RadioCheckIcon />
                      )}
                      <MText style={{ marginLeft: 8 }}>Không</MText>
                    </TouchableOpacity>
                  </View>
                </View>

                <View style={{ marginTop: 16 }}>
                  <MText>
                    Bạn có xe máy không?{' '}
                    <MText style={{ color: 'red' }}>(*)</MText>
                  </MText>
                  <View style={{ flexDirection: 'row', marginTop: 8 }}>
                    <TouchableOpacity
                      style={{ flexDirection: 'row' }}
                      onPress={() =>
                        setFieldValue('questionUseMotobikeGo', true)
                      }
                    >
                      {values.questionUseMotobikeGo ? (
                        <RadioCheckIcon />
                      ) : (
                        <RadioIcon />
                      )}
                      <MText style={{ marginLeft: 8 }}>Có</MText>
                    </TouchableOpacity>
                    <TouchableOpacity
                      style={{ flexDirection: 'row', marginLeft: 30 }}
                      onPress={() =>
                        setFieldValue('questionUseMotobikeGo', false)
                      }
                    >
                      {values.questionUseMotobikeGo ? (
                        <RadioIcon />
                      ) : (
                        <RadioCheckIcon />
                      )}
                      <MText style={{ marginLeft: 8 }}>Không</MText>
                    </TouchableOpacity>
                  </View>
                </View>
                <View style={{ marginTop: 16 }}>
                  <MText>
                    Bạn có bản gốc ĐKX/Cavet không?{' '}
                    <MText style={{ color: 'red' }}>(*)</MText>
                  </MText>
                  <View style={{ flexDirection: 'row', marginTop: 8 }}>
                    <TouchableOpacity
                      style={{ flexDirection: 'row' }}
                      onPress={() =>
                        setFieldValue('questionMotobikeCertificate', true)
                      }
                    >
                      {values.questionMotobikeCertificate ? (
                        <RadioCheckIcon />
                      ) : (
                        <RadioIcon />
                      )}
                      <MText style={{ marginLeft: 8 }}>Có</MText>
                    </TouchableOpacity>
                    <TouchableOpacity
                      style={{ flexDirection: 'row', marginLeft: 30 }}
                      onPress={() =>
                        setFieldValue('questionMotobikeCertificate', false)
                      }
                    >
                      {values.questionMotobikeCertificate ? (
                        <RadioIcon />
                      ) : (
                        <RadioCheckIcon />
                      )}
                      <MText style={{ marginLeft: 8 }}>Không</MText>
                    </TouchableOpacity>
                  </View>
                </View>
              </View>
            </ScrollView>
            <View style={{ paddingHorizontal: 16 }}>
              <TouchableOpacity onPress={handleSubmit}>
                <LinearGradient
                  colors={['#FF7A00', '#EF4123']}
                  style={{
                    justifyContent: 'center',
                    alignContent: 'center',
                    alignItems: 'center',
                    height: 40,
                    borderRadius: 30,
                    marginBottom: 20,
                  }}
                >
                  <MText
                    style={{
                      color: '#FFFFFF',
                      fontSize: 16,
                      fontWeight: '600',
                    }}
                  >
                    Xác nhận
                  </MText>
                </LinearGradient>
              </TouchableOpacity>
            </View>
          </View>
        )}
      </Formik>
    </SafeAreaView>
  );
});

const styles = StyleSheet.create({
  header: {
    flexDirection: 'row',
    padding: 16,
    alignContent: 'center',
    alignItems: 'center',
  },
});
