//@ts-nocheck
import React, { 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';

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

  const onSubmit = (values) => {
    digitalLendingStore.body = {
      ...digitalLendingStore.body,
      bankId: values.bankId?.id,
      bankAccountName: values?.bankAccountName,
      bankAccountNumber: values?.bankAccountNumber,
      bankBranch: values?.bankBranch,
    };
  };

  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>

          <LinearGradient
            colors={['#FF8E4F', '#EF592E']}
            style={{
              width: 40,
              height: 40,
              borderRadius: 40,
              alignItems: 'center',
              justifyContent: 'center',
            }}
          >
            <MText style={{ fontWeight: 'bold', color: 'white' }}>05</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' }}>06</MText>
          </View>
        </View>
        <MText style={{ fontWeight: 'bold' }}>
          THÔNG TIN SỐ TÀI KHOẢN NHẬN TIỀN
        </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={{
            bankAccountName: digitalLendingStore?.data?.bankAccountName,
            bankId: digitalLendingStore?.data?.bankId
              ? {
                  id: digitalLendingStore.data?.bankId,
                  name: digitalLendingStore.data?.bankName,
                }
              : null,
            bankAccountNumber: digitalLendingStore?.data?.bankAccountNumber,
            bankBranch: digitalLendingStore?.data?.bankBranch,
          }}
        >
          {({ values, handleSubmit, handleChange, setFieldValue }) => (
            <View style={{ marginVertical: 16 }}>
              <View>
                <MText style={{ color: '#8A8A8A' }}>Tên chủ thẻ</MText>
                <TextInput
                  value={values?.bankAccountName}
                  onChangeText={handleChange('bankAccountName')}
                  style={{
                    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' }}>Ngân hàng</MText>
                <TouchableOpacity
                  onPress={() => {
                    navigation.push('CommonSelect', {
                      title: 'Ngân hàng',
                      data: digitalLendingStore?.listBank,
                      callback: (item) => {
                        setFieldValue('bankId', item);
                      },
                    });
                  }}
                  style={{
                    height: 30,
                    flex: 1,
                    marginTop: 5,
                  }}
                >
                  <MText>{values.bankId ? values.bankId?.name : ''}</MText>
                </TouchableOpacity>
              </View>
              <View style={{ height: 1, backgroundColor: '#E0E0E0' }} />
              <View style={{ marginTop: 12 }}>
                <MText style={{ color: '#8A8A8A' }}>Số tài khoản</MText>
                <TextInput
                  keyboardType="number-pad"
                  value={values.bankAccountNumber}
                  onChangeText={handleChange('bankAccountNumber')}
                  style={{
                    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' }}>Chi nhánh</MText>
                <TextInput
                  value={values.bankBranch}
                  onChangeText={handleChange('bankBranch')}
                  placeholder="Vui lòng điền chi nhánh ngân hàng"
                  placeholderTextColor={'#BDBDBD'}
                  style={{
                    color: '#33333',
                    height: 30,
                    marginVertical: 0,
                    flex: 1,
                    padding: 0,
                  }}
                />
              </View>
              <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 = 4)}
          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 = 6;
            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: {},
});
