//@ts-nocheck
import React, { useEffect, useRef, useState } from 'react';
import {
  Alert,
  ScrollView,
  TextInput,
  TextStyle,
  TouchableOpacity,
  View,
  ViewStyle,
} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import { observer } from 'mobx-react-lite';
import MHeader from '../../components/MHeader';
import { DropDown2, IconBack } from '../../assets/icons';
import { MText } from '../../components/MText';
import { Formik } from 'formik';
import { ScreenNames } from '../../navigation';
import ttsStore from '../toan-trinh-so/store';
import { CommonActions, useNavigation } from '@react-navigation/native';
import Loading from '../../components/Loading';
import MButton from '../../components/MButton';
import { EnumTypeAsset, EnumTypeCar } from '../../utils';
import KeyboardSpacer from '../../components/keyboardspace';
import * as yup from 'yup';
import { Api } from '../../services/api';

export const AssetInformation = observer(function AssetInformation(props) {
  const navigation = useNavigation();
  const formRef = useRef(null);
  const [isLoading, setIsLoading] = useState(false);
  const loan = props?.route?.params?.loan;

  const getData = async () => {
    try {
      setIsLoading(true);
      const response = await Api.getInstance().getAssetAutoDE(loan?.id);
      setIsLoading(false);
      if (response.kind === 'ok' && response.data?.meta?.errorCode === 200) {
        formRef.current?.setFieldValue(
          'brand',
          response.data.data?.brand ?? ''
        );
        formRef.current?.setFieldValue(
          'yearCar',
          response.data.data?.yearCar ?? null
        );
        formRef.current?.setFieldValue(
          'vehicles',
          response.data.data?.vehicles ?? ''
        );
        formRef.current?.setFieldValue(
          'plateNumber',
          response.data.data?.plateNumber ?? ''
        );
        formRef.current?.setFieldValue(
          'chassis',
          response.data.data?.chassis ?? ''
        );
        formRef.current?.setFieldValue(
          'engine',
          response.data.data?.engine ?? ''
        );
        formRef.current?.setFieldValue(
          'ownerFullName',
          response.data.data?.ownerFullName ?? ''
        );
        formRef.current?.setFieldValue(
          'motobikeCertificateNumber',
          response.data.data?.motobikeCertificateNumber ?? ''
        );
        formRef.current?.setFieldValue(
          'motobikeCertificateDate',
          response.data.data?.motobikeCertificateDate ?? ''
        );

        if (response.data?.data?.brand) {
          ttsStore.getListYearCar(response.data?.data?.brand);
        }
        if (response.data?.data?.brand && response.data?.data?.yearCar) {
          ttsStore.getListCar(
            response.data?.data?.brand,
            response.data?.data?.yearCar
          );
        }

        formRef.current?.setFieldValue(
          'typeLoanBrief',
          response.data.data?.typeLoanBrief ?? null
        );
        formRef.current?.setFieldValue(
          'carTypeId',
          response.data.data?.carTypeId ?? null
        );
      } else {
        Alert.alert(
          'Thông báo',
          response.data?.meta?.errorMessage ||
          'Có lỗi xảy ra. Vui lòng thử lại sau!'
        );
      }
    } catch (error) {
      Alert.alert('Thông báo', 'Có lỗi xảy ra. Vui lòng thử lại sau!');
    } finally {
      setIsLoading(false);
    }
  };

  useEffect(() => {
    ttsStore.getListBrand();
    if (loan) {
      getData();
    }
  }, []);

  const onSubmit = async (values) => {
    try {
      setIsLoading(true);
      const body = {
        loanBriefId: loan?.id,
        brand: values?.brand,
        yearCar: Number(values.yearCar),
        vehicles: values?.vehicles,
        plateNumber: values?.plateNumber,
        chassis: values?.chassis,
        engine: values?.engine,
        ownerFullName: values?.ownerFullName,
        motobikeCertificateNumber: values?.motobikeCertificateNumber,
        motobikeCertificateDate: values?.motobikeCertificateDate,
        vehicleInspectionExpirationDate:
          values?.vehicleInspectionExpirationDate,
        typeLoanBrief: values?.typeLoanBrief,
        carTypeId: values?.carTypeId,
      };
      const response = await Api.getInstance().updateAssetAutoDE(body);
      setIsLoading(false);
      if (response.kind === 'ok') {
        if (response.data?.meta?.errorCode === 200) {
          Alert.alert('Thông báo', 'Cập nhật thông tin tài sản thành công', [
            {
              text: 'Đồng ý',
              onPress: () => {
                navigation.navigate(ScreenNames.Main);
              },
            },
          ]);
        } else {
          Alert.alert('Thông báo', response.data?.meta?.errorMessage);
        }
      } else {
        Alert.alert('Thông báo', 'Có lỗi xảy ra. Vui lòng thử lại sau');
      }
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <View style={{ flex: 1 }}>
      <MHeader title="Vay trực tuyến 24/7" />
      <View style={{ flex: 1 }}>
        <View style={$h} />
        <View style={$bg}>
          <View
            style={{
              paddingVertical: 16,
              flexDirection: 'row',
              alignItems: 'center',
              paddingHorizontal: 16,
            }}
          >
            <TouchableOpacity
              style={{
                zIndex: 1000,
              }}
              onPress={() => {
                navigation.navigate(ScreenNames.Main);
              }}
            >
              <IconBack />
            </TouchableOpacity>
            <MText style={$title}>Thông tin chi tiết</MText>
          </View>

          <Formik
            onSubmit={onSubmit}
            innerRef={formRef}
            validateOnBlur={false}
            validateOnChange={false}
            initialValues={{
              brand: '',
              yearCar: null,
              vehicles: '',
              plateNumber: '',
              chassis: '',
              engine: '',
              ownerFullName: '',
              motobikeCertificateNumber: '',
              motobikeCertificateDate: '',
              vehicleInspectionExpirationDate: '',
              typeLoanBrief: 1,
              carTypeId: null,
            }}
            validationSchema={yup.object().shape({
              brand: yup.string().required('Vui lòng chọn hãng xe'),
              yearCar: yup
                .string()
                .required('Vui lòng chọn năm sản xuất')
                .nullable(),
              vehicles: yup.string().required('Vui lòng chọn xe').nullable(),
              plateNumber: yup.string().required('Vui lòng nhập biển số'),
              chassis: yup.string().required('Vui lòng nhập số khung'),
              engine: yup.string().required('Vui lòng nhập số máy'),
              ownerFullName: yup.string().required('Vui lòng nhập chủ xe'),
              motobikeCertificateNumber: yup
                .string()
                .required('Vui lòng nhập số đăng ký xe'),
              motobikeCertificateDate: yup
                .string()
                .required('Vui lòng nhập ngày đăng ký'),
              vehicleInspectionExpirationDate: yup
                .string()
                .required('Vui lòng nhập ngày đăng ký'),
              typeLoanBrief: yup
                .number()
                .required('Vui lòng chọn loại tài sản')
                .nullable(),
              carTypeId: yup
                .number()
                .required('Vui lòng chọn loại xe')
                .nullable(),
            })}
          >
            {({
              values,
              setFieldValue,
              errors,
              handleSubmit,
              handleChange,
            }) => (
              <ScrollView style={{ paddingHorizontal: 16, flex: 1 }}>
                <MText style={$title2}>Thông tin tài sản</MText>
                <View style={$row}>
                  <View style={{ flex: 1 }}>
                    <MText style={$label}>Hãng xe</MText>
                    <TouchableOpacity
                      style={$select}
                      onPress={() => {
                        navigation.push(ScreenNames.CommonSelect, {
                          title: 'Hãng xe',
                          data: ttsStore.listBrand,
                          callback: (value) => {
                            setFieldValue('brand', value.name);
                            setFieldValue('yearCar', null);
                            setFieldValue('vehicles', null);
                            ttsStore.getListYearCar(value.name);
                          },
                        });
                      }}
                    >
                      <MText
                        numberOfLines={1}
                        style={{
                          color: '#333333',
                          fontWeight: '500',
                          flex: 1,
                          fontFamily: 'BeVietnamPro-Medium',
                        }}
                      >
                        {values?.brand}
                      </MText>
                      <DropDown2 />
                    </TouchableOpacity>
                    {errors && errors.brand && (
                      <MText style={$error}>{errors.brand}</MText>
                    )}
                  </View>
                  <View style={{ flex: 1 }}>
                    <MText style={$label}>Năm sản xuất</MText>
                    <TouchableOpacity
                      style={$select}
                      onPress={() => {
                        navigation.push(ScreenNames.CommonSelect, {
                          title: 'Năm sản xuất',
                          data: ttsStore.listYear,
                          callback: (value) => {
                            setFieldValue('yearCar', value.name);
                            setFieldValue('vehicles', null);
                            ttsStore.getListCar(values.brand, value.name);
                          },
                        });
                      }}
                    >
                      <MText
                        numberOfLines={1}
                        style={{
                          color: '#333333',
                          fontWeight: '500',
                          flex: 1,
                          fontFamily: 'BeVietnamPro-Medium',
                        }}
                      >
                        {values?.yearCar}
                      </MText>
                      <DropDown2 />
                    </TouchableOpacity>
                    {errors && errors.yearCar && (
                      <MText style={$error}>{errors.yearCar}</MText>
                    )}
                  </View>
                </View>
                <MText style={$label}>Tên xe/ Phiên bản xe</MText>
                <TouchableOpacity
                  style={$select}
                  onPress={() => {
                    navigation.push(ScreenNames.CommonSelect, {
                      title: 'Tên xe/ Phiên bản xe',
                      data: ttsStore.listCar,
                      callback: (value) => {
                        setFieldValue('vehicles', value.name);
                      },
                    });
                  }}
                >
                  <MText
                    numberOfLines={1}
                    style={{
                      color: '#333333',
                      fontWeight: '500',
                      flex: 1,
                      fontFamily: 'BeVietnamPro-Medium',
                    }}
                  >
                    {values.vehicles}
                  </MText>
                  <DropDown2 />
                </TouchableOpacity>
                {errors && errors.vehicles && (
                  <MText style={$error}>{errors.vehicles}</MText>
                )}
                <View style={[$row, { marginTop: 16 }]}>
                  <View style={{ flex: 1 }}>
                    <MText style={$label}>Biển số xe</MText>
                    <TextInput
                      placeholder="30A-99999"
                      placeholderTextColor={'#B3B3B3'}
                      numberOfLines={1}
                      style={[
                        $textInput,
                        {
                          color: '#333333',
                          fontWeight: '500',
                          fontFamily: 'BeVietnamPro-Medium',
                        },
                      ]}
                      value={values.plateNumber}
                      onChangeText={handleChange('plateNumber')}
                    />
                    {errors && errors.plateNumber && (
                      <MText style={$error}>{errors.plateNumber}</MText>
                    )}
                  </View>
                  <View style={{ flex: 1 }}>
                    <MText style={$label}>Số đăng ký xe</MText>
                    <TextInput
                      placeholder="Nhập số đăng ký xe"
                      placeholderTextColor={'#B3B3B3'}
                      numberOfLines={1}
                      style={[
                        $textInput,
                        {
                          color: '#333333',
                          fontWeight: '500',
                          fontFamily: 'BeVietnamPro-Medium',
                        },
                      ]}
                      value={values.motobikeCertificateNumber}
                      onChangeText={handleChange('motobikeCertificateNumber')}
                    />
                    {errors && errors.motobikeCertificateNumber && (
                      <MText style={$error}>
                        {errors.motobikeCertificateNumber}
                      </MText>
                    )}
                  </View>
                </View>
                <View style={[$row, { marginTop: 16 }]}>
                  <View style={{ flex: 1 }}>
                    <MText style={$label}>Ngày đăng ký xe</MText>
                    <TextInput
                      numberOfLines={1}
                      style={[
                        $textInput,
                        {
                          color: '#333333',
                          fontWeight: '500',
                          fontFamily: 'BeVietnamPro-Medium',
                        },
                      ]}
                      placeholder="DD/MM/YYYY"
                      placeholderTextColor="#BDBDBD"
                      value={values.motobikeCertificateDate}
                      onChangeText={handleChange('motobikeCertificateDate')}
                    />
                    {errors && errors.motobikeCertificateDate && (
                      <MText style={$error}>
                        {errors.motobikeCertificateDate}
                      </MText>
                    )}
                  </View>
                  <View style={{ flex: 1 }}>
                    <MText style={$label}>Ngày hết hạn đăng kiểm</MText>
                    <TextInput
                      numberOfLines={1}
                      style={[
                        $textInput,
                        {
                          color: '#333333',
                          fontWeight: '500',
                          fontFamily: 'BeVietnamPro-Medium',
                        },
                      ]}
                      placeholder="DD/MM/YYYY"
                      placeholderTextColor="#BDBDBD"
                      value={values.vehicleInspectionExpirationDate}
                      onChangeText={handleChange(
                        'vehicleInspectionExpirationDate'
                      )}
                    />
                    {errors && errors.vehicleInspectionExpirationDate && (
                      <MText style={$error}>
                        {errors.vehicleInspectionExpirationDate}
                      </MText>
                    )}
                  </View>
                </View>
                <View style={[$row, { marginTop: 16 }]}>
                  <View style={{ flex: 1 }}>
                    <MText style={[$label]}>Số khung</MText>
                    <TextInput
                      placeholder="Nhập số khung"
                      placeholderTextColor={'#B3B3B3'}
                      numberOfLines={1}
                      style={[
                        $textInput,
                        {
                          color: '#333333',
                          fontWeight: '500',
                          fontFamily: 'BeVietnamPro-Medium',
                        },
                      ]}
                      value={values.chassis}
                      onChangeText={handleChange('chassis')}
                    />
                    {errors && errors.chassis && (
                      <MText style={$error}>{errors.chassis}</MText>
                    )}
                  </View>
                  <View style={{ flex: 1 }}>
                    <MText style={$label}>Số máy</MText>
                    <TextInput
                      placeholder="Nhập số máy"
                      placeholderTextColor={'#B3B3B3'}
                      numberOfLines={1}
                      style={[
                        $textInput,
                        {
                          color: '#333333',
                          fontWeight: '500',
                          fontFamily: 'BeVietnamPro-Medium',
                        },
                      ]}
                      value={values.engine}
                      onChangeText={handleChange('engine')}
                    />
                    {errors && errors.engine && (
                      <MText style={$error}>{errors.engine}</MText>
                    )}
                  </View>
                </View>
                <MText style={$label}>Họ tên chủ xe</MText>
                <TextInput
                  numberOfLines={1}
                  style={[
                    $textInput,
                    {
                      color: '#333333',
                      fontWeight: '500',
                      fontFamily: 'BeVietnamPro-Medium',
                    },
                  ]}
                  placeholder="Nhập họ tên chủ xe"
                  placeholderTextColor={'#B3B3B3'}
                  value={values.ownerFullName}
                  onChangeText={handleChange('ownerFullName')}
                />
                {errors && errors.ownerFullName && (
                  <MText style={$error}>{errors.ownerFullName}</MText>
                )}
                <View style={[$row, { marginTop: 16 }]}>
                  <View style={{ flex: 1 }}>
                    <MText style={$label}>Loại tài sản</MText>
                    <TouchableOpacity
                      style={$select}
                      onPress={() => {
                        navigation.push(ScreenNames.MSelect, {
                          title: 'Loại tài sản',
                          data: EnumTypeAsset,
                          callback: (value) => {
                            setFieldValue('typeLoanBrief', value.id);
                          },
                        });
                      }}
                    >
                      <MText
                        numberOfLines={1}
                        style={{
                          color: '#333333',
                          fontWeight: '500',
                          flex: 1,
                          fontFamily: 'BeVietnamPro-Medium',
                        }}
                      >
                        {
                          EnumTypeAsset.find(
                            (x) => x.id === values.typeLoanBrief
                          )?.name
                        }
                      </MText>
                      <DropDown2 />
                    </TouchableOpacity>
                    {errors && errors.typeLoanBrief && (
                      <MText style={$error}>{errors.typeLoanBrief}</MText>
                    )}
                  </View>
                  <View style={{ flex: 1 }}>
                    <MText style={$label}>Loại xe</MText>
                    <TouchableOpacity
                      style={$select}
                      onPress={() => {
                        navigation.push(ScreenNames.MSelect, {
                          title: 'Loại xe',
                          data: EnumTypeCar,
                          callback: (value) => {
                            setFieldValue('carTypeId', value.id);
                          },
                        });
                      }}
                    >
                      <MText
                        numberOfLines={1}
                        style={{
                          color: '#333333',
                          fontWeight: '500',
                          flex: 1,
                          fontFamily: 'BeVietnamPro-Medium',
                        }}
                      >
                        {
                          EnumTypeCar.find((x) => x.id === values.carTypeId)
                            ?.name
                        }
                      </MText>
                      <DropDown2 />
                    </TouchableOpacity>
                    {errors && errors.carTypeId && (
                      <MText style={$error}>{errors.carTypeId}</MText>
                    )}
                  </View>
                </View>
              </ScrollView>
            )}
          </Formik>

          <MButton
            onPress={() => {
              formRef.current?.handleSubmit();
            }}
            style={{
              marginVertical: 24,
              marginHorizontal: 16,
            }}
          >
            <LinearGradient
              start={{ x: 1, y: 0 }}
              end={{ x: 0, y: 1 }}
              style={{
                height: 40,
                marginVertical: 16,
                borderRadius: 30,
                alignItems: 'center',
                justifyContent: 'center',
              }}
              colors={['#FF7A00', '#EF4123']}
            >
              <MText
                style={{
                  color: 'white',
                  fontSize: 16,
                }}
              >
                Tiếp tục
              </MText>
            </LinearGradient>
          </MButton>
          <KeyboardSpacer />
        </View>
      </View>
      <Loading isLoading={isLoading} />
    </View>
  );
});

const $error: TextStyle = {
  color: '#EB5757',
  fontSize: 14,
  fontStyle: 'italic',
  fontFamily: 'BeVietnamPro-Thin',
  fontWeight: '300',
  marginTop: 5,
};

const $label: TextStyle = {
  fontSize: 14,
  color: '#333333',
  paddingBottom: 5,
};

const $title: TextStyle = {
  fontSize: 16,
  fontWeight: 'bold',
  color: '#333333',
  position: 'absolute',
  left: 0,
  right: 0,
  textAlign: 'center',
};

const $h: ViewStyle = {
  backgroundColor: '#EF592E',
  position: 'absolute',
  height: 30,
  width: '100%',
};

const $bg: ViewStyle = {
  borderTopLeftRadius: 30,
  borderTopRightRadius: 30,
  backgroundColor: 'white',
  flex: 1,
};

const $title2: TextStyle = {
  fontSize: 16,
  fontWeight: 'bold',
  color: '#333333',
  paddingBottom: 10,
  marginTop: 6,
};

const $row: ViewStyle = {
  flexDirection: 'row',
  // alignItems: 'center',
  marginBottom: 16,
  gap: 16,
};

const $select: ViewStyle = {
  flexDirection: 'row',
  height: 40,
  alignItems: 'center',
  paddingHorizontal: 8,
  borderWidth: 1,
  borderRadius: 4,
  borderColor: '#E0E0E0',
};

const $textInput: ViewStyle = {
  borderWidth: 1,
  borderRadius: 4,
  borderColor: '#E0E0E0',
  height: 40,
  paddingHorizontal: 8,
  fontFamily: 'BeVietnamPro-Medium',
};
