//@ts-nocheck
import React, { useRef, useState } 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 { useNavigation } from '@react-navigation/native';
import { formatDDMMYYY, formatMoney } from '../../utils';
import DatePicker from 'react-native-date-picker';
import KeyboardSpacer from '../../components/keyboardspace';

export const Step4 = observer(function Step4() {
  const navigation = useNavigation();
  const [showDatePicker, setShowDatePicker] = useState(false);
  const ref = useRef();

  const onSubmit = (values) => {
    digitalLendingStore.body = {
      ...digitalLendingStore.body,
      brandId: values?.brandId?.id,
      vehicles: values?.vehicles?.id,
      plateNumber: values?.plateNumber,
      chassis: values?.chassis,
      engine: values?.engine,
      ownerFullName: values?.ownerFullName,
      motobikeCertificateNumber: values?.motobikeCertificateNumber,
      loanAmountExpertiseAi: digitalLendingStore?.data?.loanAmountExpertiseAi,
      loanAmountExpertiseLast:
        digitalLendingStore?.data?.loanAmountExpertiseLast,
      motobikeCertificateDate: values?.motobikeCertificateDate,
    };
  };
  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>

          <LinearGradient
            colors={['#FF8E4F', '#EF592E']}
            style={{
              width: 40,
              height: 40,
              borderRadius: 40,
              alignItems: 'center',
              justifyContent: 'center',
            }}
          >
            <MText style={{ fontWeight: 'bold', color: 'white' }}>04</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' }}>05</MText>
          </View>
          <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 TÀI SẢN (XE)</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
          onSubmit={onSubmit}
          innerRef={ref}
          initialValues={{
            brandId: digitalLendingStore?.data?.brandId
              ? {
                  id: digitalLendingStore?.data?.brandId,
                  name: digitalLendingStore?.data?.brandName,
                }
              : null,
            plateNumber: digitalLendingStore?.data?.plateNumber,
            vehicles: digitalLendingStore?.data?.vehicles
              ? {
                  id: digitalLendingStore?.data?.vehicles,
                  name: digitalLendingStore?.data?.vehicleName,
                }
              : null,
            chassis: digitalLendingStore?.data?.chassis,
            engine: digitalLendingStore?.data?.engine,
            ownerFullName: digitalLendingStore?.data?.ownerFullName,
            motobikeCertificateNumber:
              digitalLendingStore?.data?.motobikeCertificateNumber,
            motobikeCertificateDate:
              digitalLendingStore?.data?.motobikeCertificateDate,
          }}
        >
          {({ values, handleSubmit, handleChange, setFieldValue }) => (
            <View style={{ marginTop: 16 }}>
              <View>
                <MText style={{ color: '#8A8A8A' }}>Hãng xe</MText>
                <TouchableOpacity
                  onPress={() => {
                    navigation.push('CommonSelect', {
                      title: 'Hãng xe',
                      data: digitalLendingStore.listBrand,
                      callback: (item) => {
                        setFieldValue('brandId', item);
                        setFieldValue('vehicles', null);
                        digitalLendingStore.getBrandName(item?.id);
                      },
                    });
                  }}
                  style={{
                    height: 30,
                    flex: 1,
                    marginTop: 5,
                  }}
                >
                  <MText>{values.brandId ? values.brandId?.name : ''}</MText>
                </TouchableOpacity>
              </View>
              <View style={{ height: 1, backgroundColor: '#E0E0E0' }} />

              <View style={{ marginTop: 12 }}>
                <MText style={{ color: '#8A8A8A' }}>Tên xe</MText>
                <TouchableOpacity
                  onPress={() => {
                    navigation.push('CommonSelect', {
                      title: 'Tên xe',
                      data: digitalLendingStore.listBrandName,
                      callback: (item) => {
                        setFieldValue('vehicles', item);
                      },
                    });
                  }}
                  style={{
                    height: 30,
                    flex: 1,
                    marginTop: 5,
                  }}
                >
                  <MText>{values.vehicles ? values.vehicles?.name : ''}</MText>
                </TouchableOpacity>
              </View>
              <View style={{ height: 1, backgroundColor: '#E0E0E0' }} />
              <View style={{ marginTop: 12 }}>
                <MText style={{ color: '#8A8A8A' }}>Biển số xe</MText>
                <TextInput
                  value={values.plateNumber}
                  onChangeText={handleChange('plateNumber')}
                  style={{
                    flex: 1,
                    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' }}>Số khung</MText>
                <TextInput
                  value={values.chassis}
                  onChangeText={handleChange('chassis')}
                  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' }}>Số máy</MText>
                <TextInput
                  value={values.engine}
                  onChangeText={handleChange('engine')}
                  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' }}>Họ tên chủ xe</MText>
                <TextInput
                  value={values.ownerFullName}
                  onChangeText={handleChange('ownerFullName')}
                  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' }}>Số đăng ký xe</MText>
                <TextInput
                  value={values.motobikeCertificateNumber}
                  onChangeText={handleChange('motobikeCertificateNumber')}
                  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ày đăng ký xe</MText>
                <TouchableOpacity
                  onPress={() => {
                    setShowDatePicker(true);
                  }}
                  style={{
                    height: 30,
                    flex: 1,
                    marginTop: 5,
                  }}
                >
                  <MText>{values.motobikeCertificateDate}</MText>
                </TouchableOpacity>
              </View>
              <View style={{ height: 1, backgroundColor: '#E0E0E0' }} />
              <View
                style={{
                  marginTop: 12,
                  backgroundColor: '#F2F2F2',
                  borderRadius: 4,
                  padding: 8,
                }}
              >
                <MText style={{ color: '#8A8A8A' }}>Giá trước thẩm định</MText>
                <MText>
                  {formatMoney(
                    digitalLendingStore?.data?.loanAmountExpertiseAi
                  )}{' '}
                  VND
                </MText>
              </View>
              <View style={{ height: 1, backgroundColor: '#E0E0E0' }} />
              <View
                style={{
                  marginTop: 12,
                  backgroundColor: '#F2F2F2',
                  borderRadius: 4,
                  padding: 8,
                  marginBottom: 12,
                }}
              >
                <MText style={{ color: '#8A8A8A' }}>Giá sau thẩm định</MText>
                <MText>
                  {formatMoney(
                    digitalLendingStore?.data?.loanAmountExpertiseLast
                  )}{' '}
                  VND
                </MText>
              </View>
              <KeyboardSpacer />
              <DatePicker
                mode="date"
                open={showDatePicker}
                modal
                title="Chọn thời gian"
                locale="vi"
                date={new Date()}
                onCancel={() => {
                  setShowDatePicker(false);
                }}
                onConfirm={(date) => {
                  setShowDatePicker(false);
                  setFieldValue('motobikeCertificateDate', formatDDMMYYY(date));
                }}
              />
            </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 = 3)}
          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 = 5;
            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: {},
});
