//@ts-nocheck
import React from 'react';
import {
  Alert,
  SafeAreaView,
  ScrollView,
  TouchableOpacity,
  View,
} from 'react-native';
import { observer } from 'mobx-react-lite';
import {
  useNavigation,
  StackActions,
  CommonActions,
} from '@react-navigation/native';
import MHeader from '../../components/MHeader';
import { Api } from '../../services/api';
import Loading from '../../components/Loading';
import { MText } from '../../components/MText';
import { formatDDMMYYY, formatMoney } from '../../utils';
import LinearGradient from 'react-native-linear-gradient';
import { ScreenNames } from '../../navigation';

export const PreviewSchedulePaymentTopup = observer(
  function PreviewSchedulePaymentTopup(props: any) {
    const navigation = useNavigation();
    const [isLoading, setIsLoading] = React.useState(false);
    const [data, setData] = React.useState<any>(null);

    const getData = async () => {
      setIsLoading(true);
      try {
        const response = await Api.getInstance().getPlanPaymentV2(
          props.route.params?.id
        );
        setIsLoading(false);
        if (response.kind === 'ok') {
          if (response.data.meta.errorCode === 200) {
            setData(response.data.data);
          } 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) {
        setIsLoading(false);
        Alert.alert('Thông báo', 'Có lỗi xảy ra, vui lòng thử lại sau');
      }
    };
    React.useEffect(() => {
      const unsubscribe = navigation.addListener('focus', () => {
        getData();
      });
      return unsubscribe;
    }, [navigation]);

    React.useEffect(() => {
      const unsubscribe = navigation.addListener('blur', () => {
        setData(null);
      });
      return unsubscribe;
    }, [navigation]);

    return (
      <View style={{ flex: 1, backgroundColor: '#FDFDFD' }}>
        <MHeader
          title={`Lịch thanh toán dự kiến`}
          onBack={() => navigation.goBack()}
        />
        <SafeAreaView style={{ flex: 1 }}>
          <ScrollView>
            <View
              style={{
                borderWidth: 1,
                borderColor: '#FF8E4F',
                borderRadius: 8,
                margin: 16,
                padding: 16,
              }}
            >
              <View
                style={{
                  flexDirection: 'row',
                  alignItems: 'center',
                  justifyContent: 'space-between',
                }}
              >
                <MText style={{ fontSize: 12, color: '#333333' }}>
                  Mã HĐ giải ngân
                </MText>
                <MText
                  style={{
                    fontSize: 12,
                    color: '#333333',
                    fontWeight: 'bold',
                  }}
                >
                  HD-{props.route?.params?.id}
                </MText>
              </View>
              <View
                style={{
                  flexDirection: 'row',
                  alignItems: 'center',
                  justifyContent: 'space-between',
                  marginTop: 16,
                }}
              >
                <MText style={{ fontSize: 12, color: '#333333' }}>
                  Số tiền vay
                </MText>
                <MText
                  style={{
                    fontSize: 12,
                    color: '#EF592E',
                    fontWeight: 'bold',
                  }}
                >
                  {formatMoney(data?.loanAmount)} đ
                </MText>
              </View>
              <View
                style={{
                  flexDirection: 'row',
                  alignItems: 'center',
                  justifyContent: 'space-between',
                  marginTop: 16,
                }}
              >
                <MText style={{ fontSize: 12, color: '#333333' }}>
                  Bảo hiểm
                </MText>
                <MText
                  style={{
                    fontSize: 12,
                    color: '#333333',
                    fontWeight: 'bold',
                  }}
                >
                  {formatMoney(data?.totalMoneyInsurance)} đ
                </MText>
              </View>
              <View
                style={{
                  flexDirection: 'row',
                  alignItems: 'center',
                  justifyContent: 'space-between',
                  marginTop: 16,
                }}
              >
                <MText style={{ fontSize: 12, color: '#333333' }}>
                  Thời hạn
                </MText>
                <MText
                  style={{
                    fontSize: 12,
                    color: '#333333',
                    fontWeight: 'bold',
                  }}
                >
                  {data?.loanTime} tháng
                </MText>
              </View>
              <View
                style={{
                  flexDirection: 'row',
                  alignItems: 'center',
                  justifyContent: 'space-between',
                  marginTop: 16,
                }}
              >
                <MText style={{ fontSize: 12, color: '#333333' }}>
                  Ngày dự kiến giải ngân
                </MText>
                <MText
                  style={{
                    fontSize: 12,
                    color: '#333333',
                    fontWeight: 'bold',
                  }}
                >
                  {formatDDMMYYY(data?.expectedDisbursementDate)}
                </MText>
              </View>
            </View>

            <View
              style={{
                borderWidth: 1,
                borderColor: '#FF8E4F',
                borderRadius: 8,
                marginHorizontal: 16,
              }}
            >
              <View
                style={{
                  backgroundColor: '#FFF3E9',
                  height: 32,
                  borderTopLeftRadius: 8,
                  borderTopRightRadius: 8,
                  flexDirection: 'row',
                  alignItems: 'center',
                }}
              >
                <MText
                  style={{
                    flex: 1,
                    textAlign: 'center',
                    color: '#333333',
                    fontSize: 12,
                  }}
                >
                  Ngày thanh toán
                </MText>
                <MText
                  style={{
                    flex: 1,
                    textAlign: 'center',
                    color: '#333333',
                    fontSize: 12,
                  }}
                >
                  Số tiền thanh toán
                </MText>
              </View>
              {data?.listPaymentSchedule?.map((item: any, index: number) => {
                return (
                  <View
                    key={index}
                    style={{
                      paddingVertical: 16,
                      flexDirection: 'row',
                      alignItems: 'center',
                      borderBottomWidth:
                        index === data?.listPaymentSchedule?.length - 1 ? 0 : 1,
                      borderColor: '#DADADA',
                    }}
                  >
                    <MText
                      style={{
                        flex: 1,
                        textAlign: 'center',
                        color: '#999999',
                        fontSize: 12,
                      }}
                    >
                      {formatDDMMYYY(item?.payDate)}
                    </MText>
                    <MText
                      style={{
                        flex: 1,
                        textAlign: 'center',
                        color: '#333333',
                        fontSize: 12,
                        fontWeight: 'bold',
                      }}
                    >
                      {formatMoney(item?.totalMoneyNeedPayment)} đ
                    </MText>
                  </View>
                );
              })}
            </View>
          </ScrollView>
          <TouchableOpacity
            onPress={() => {
              navigation.dispatch(
                CommonActions.reset({
                  index: 1,
                  routes: [{ name: ScreenNames.Main }],
                })
              );
            }}
            style={{
              marginHorizontal: 16,
              marginVertical: 16,
            }}
          >
            <LinearGradient
              colors={['#FF7A00', '#EF4123']}
              style={{
                alignItems: 'center',
                borderRadius: 30,
                height: 40,
                justifyContent: 'center',
              }}
            >
              <MText
                style={{
                  color: 'white',
                  fontSize: 16,
                }}
              >
                Xác nhận
              </MText>
            </LinearGradient>
          </TouchableOpacity>
        </SafeAreaView>
        <Loading isLoading={isLoading} />
      </View>
    );
  }
);
