//@ts-nocheck
import { useNavigation } from '@react-navigation/native';
import { observer } from 'mobx-react-lite';
import React, { useEffect, useState } from 'react';
import {
  ActivityIndicator,
  Image,
  ImageStyle,
  RefreshControl,
  SafeAreaView,
  ScrollView,
  TouchableOpacity,
  View,
} from 'react-native';
import { CIMBBank, IconBack } from '../../assets/icons';
import Loading from '../../components/Loading';
import MButton from '../../components/MButton';
import { MText } from '../../components/MText';
import { color } from '../../theme';
import { formatDDMMYYY, formatMoney } from '../../utils';
import { commonStyles } from '../CommonStyles';
import SchedulePaymentStore from './store';
import MHeader from '../../components/MHeader';

const logoView: ImageStyle = {
  position: 'absolute',
  width: '100%',
  height: '100%',
  resizeMode: 'cover',
};

export const SchedulePayment = observer(function SchedulePayment(props: any) {
  const navigation = useNavigation();
  const [isLoading, setIsLoading] = useState(false);
  const [data, setData] = useState<any[]>();
  const getData = () => {
    setIsLoading(true);
    SchedulePaymentStore.getSchedulePayment(
      props.route?.params?.loan?.id,
      (res) => {
        setIsLoading(false);
        setData(res);
      },
      () => {
        setIsLoading(false);
      }
    );
  };

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

  return (
    <View style={{ flex: 1 }}>
      <Image source={require('../../assets/img/home.png')} style={logoView} />
      <MHeader
        title={`Đơn vay ${props.route?.params?.loan?.id}`}
        onBack={() => navigation.goBack()}
      />
      <SafeAreaView style={{ flex: 1 }}>
        <View style={{ flex: 1, marginBottom: 16, marginTop: 16 }}>
          <ScrollView
            style={{ flex: 1, padding: 16 }}
            refreshControl={
              <RefreshControl refreshing={false} onRefresh={getData} />
            }
          >
            {data?.map((item, index) => (
              <View
                key={index}
                style={{
                  padding: 16,
                  borderWidth: 1,
                  borderRadius: 8,
                  borderColor: '#E0E0E0',
                  marginBottom: 16,
                  backgroundColor: '#FFFFFF',
                }}
              >
                <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={{
                    height: 1,
                    backgroundColor: '#E0E0E0',
                    marginVertical: 8,
                  }}
                />
                <View
                  style={{
                    flexDirection: 'row',
                    justifyContent: 'space-between',
                  }}
                >
                  <View style={{ flex: 1, paddingRight: 15 }}>
                    <MText style={commonStyles.textNormal}>Tổng phải trả</MText>
                  </View>
                  <MText
                    style={[commonStyles.textNormalBold, { color: '#F05123' }]}
                  >
                    {formatMoney(
                      item?.moneyConsultant +
                        item?.moneyInterest +
                        item?.moneyOriginal +
                        item?.moneyService
                    )}{' '}
                    VNĐ
                  </MText>
                </View>
                <View
                  style={{
                    flexDirection: 'row',
                    justifyContent: 'space-between',
                    marginTop: 8,
                    paddingLeft: 16,
                  }}
                >
                  <View style={{ flex: 1, paddingRight: 15 }}>
                    <MText style={commonStyles.textNormal}>
                      Nghĩa vụ phải trả Tima
                    </MText>
                  </View>
                  <MText style={commonStyles.textNormal}>
                    {formatMoney(item?.moneyConsultant + item?.moneyService)}{' '}
                    VNĐ
                  </MText>
                </View>
                <View
                  style={{
                    flexDirection: 'row',
                    justifyContent: 'space-between',
                    marginTop: 8,
                    paddingLeft: 16,
                  }}
                >
                  <View style={{ flex: 1, paddingRight: 15 }}>
                    <MText style={commonStyles.textNormal}>
                      Nghĩa vụ phải trả CIMB
                    </MText>
                  </View>
                  <MText style={commonStyles.textNormal}>
                    {formatMoney(item?.moneyOriginal + item?.moneyInterest)} VNĐ
                  </MText>
                </View>
                <View
                  style={{
                    flexDirection: 'row',
                    justifyContent: 'space-between',
                    marginTop: 8,
                  }}
                >
                  <View style={{ flex: 1, paddingRight: 15 }}>
                    <MText style={commonStyles.textNormal}>
                      Ngày phải thanh toán
                    </MText>
                  </View>
                  <MText
                    style={[commonStyles.textNormal, { color: '#333333' }]}
                  >
                    {formatDDMMYYY(item?.toDate)}
                  </MText>
                </View>
              </View>
            ))}
          </ScrollView>
          <View
            style={{
              marginTop: 8,
              flexDirection: 'row',
              justifyContent: 'center',
            }}
          >
            <MText style={{ fontSize: 12, color: '#333333' }}>
              Cung cấp bởi{' '}
            </MText>
            <CIMBBank />
          </View>
        </View>
        <Loading isLoading={isLoading} />
      </SafeAreaView>
    </View>
  );
});
