//@ts-nocheck
import React, { useEffect, useState } from 'react';
import { observer } from 'mobx-react-lite';
import { useNavigation } from '@react-navigation/native';
import { Alert, SafeAreaView, ScrollView, View } from 'react-native';
import MHeader from '../../components/MHeader';
import { Api } from '../../services/api';
import Loading from '../../components/Loading';
import { MText } from '../../components/MText';
import { commonStyles } from '../CommonStyles';
import { formatDDMMYYY, formatMoney } from '../../utils';

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

  const getData = async () => {
    setIsLoading(true);
    try {
      const res = await Api.getInstance().getPlanPaymentTima(
        props.route.params?.id
      );
      setIsLoading(false);
      if (res.kind === 'ok') {
        if (res.data?.meta?.errorCode === 200) {
          setData(res.data.data);
        } else {
          Alert.alert('Thông báo', res.data?.meta?.errorMessage);
        }
      } else {
        Alert.alert('Thông báo', 'Lấy dữ liệu thất bại');
      }
    } catch (error) {
      console.log(error);
      Alert.alert('Thông báo', 'Lấy dữ liệu thất bại');
    } finally {
      setIsLoading(false);
    }
  };

  useEffect(() => {
    getData();
  }, []);

  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
          style={{
            flex: 1,
            paddingHorizontal: 16,
            marginTop: 16,
            paddingBottom: 50,
          }}
        >
          {data?.map((item: any, index: number) => (
            <View
              key={index}
              style={{
                backgroundColor: '#FFFFFF',
                borderWidth: 1,
                borderRadius: 8,
                borderColor: '#E0E0E0',
                marginBottom: 8,
                padding: 16,
              }}
            >
              <View
                style={{
                  flexDirection: 'row',
                  justifyContent: 'space-between',
                }}
              >
                <MText style={commonStyles.textNormal}>Kỳ thanh toán</MText>
                <MText style={commonStyles.textNormalBold}>
                  Kỳ {index + 1}
                </MText>
              </View>
              <View
                style={{
                  flexDirection: 'row',
                  justifyContent: 'space-between',
                  marginTop: 8,
                }}
              >
                <View style={{ flex: 1, paddingRight: 15 }}>
                  <MText
                    style={[commonStyles.textNormal, { color: '#828282' }]}
                  >
                    Ngày thanh toán
                  </MText>
                </View>
                <MText style={[commonStyles.textNormal, { color: '#828282' }]}>
                  {formatDDMMYYY(item?.payDate)}
                </MText>
              </View>
              <View
                style={{
                  flexDirection: 'row',
                  justifyContent: 'space-between',
                  marginTop: 8,
                }}
              >
                <View style={{ flex: 1, paddingRight: 15 }}>
                  <MText
                    style={[commonStyles.textNormal, { color: '#828282' }]}
                  >
                    Trả kỳ
                  </MText>
                </View>
                <MText style={[commonStyles.textNormal, { color: '#828282' }]}>
                  {formatMoney(item?.totalMoneyNeedPayment)} VNĐ
                </MText>
              </View>
            </View>
          ))}
        </ScrollView>
      </SafeAreaView>
      <Loading isLoading={isLoading} />
    </View>
  );
});
