//@ts-nocheck
import { StackActions, useNavigation } from '@react-navigation/native';
import { observer } from 'mobx-react-lite';
import React, { useEffect, useState } from 'react';
import { SafeAreaView, ScrollView, TouchableOpacity, View } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import Loading from '../../components/Loading';
import { CIMBBank, IconBack } from '../../assets/icons';
import { MText } from '../../components/MText';
import { ScreenNames } from '../../navigation';
import { color } from '../../theme';
import { formatMoney } from '../../utils';
import { commonStyles } from '../CommonStyles';
import DetailLoanStore from './store';
import MHeader from '../../components/MHeader';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

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

  const getData = () => {
    setIsLoading(true);
    DetailLoanStore.getPaymentInfo(
      props?.route.params.loan.id,
      2,
      (res) => {
        setIsLoading(false);
        setData(res);
      },
      () => {
        setIsLoading(false);
      }
    );
  };

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

  return (
    <View style={{ flex: 1, backgroundColor: '#FFFFFF' }}>
      <View style={{ flex: 1, marginTop: insets.top }}>
        <View
          style={{
            paddingHorizontal: 16,
            paddingVertical: 12,
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          <TouchableOpacity
            style={{ position: 'absolute', left: 16 }}
            onPress={() => navigation.goBack()}
          >
            <IconBack onPress={() => navigation.goBack()} />
          </TouchableOpacity>
          <MText
            style={{
              fontFamily: 'BeVietnamPro-SemiBold',
              fontWeight: '600',
              fontSize: 16,
            }}
          >
            Tất toán hợp đồng
          </MText>
        </View>
        <ScrollView style={{ flex: 1 }}>
          <View
            style={{
              marginHorizontal: 16,
              borderWidth: 1,
              borderRadius: 8,
              borderColor: '#F05123',
              padding: 16,
              marginTop: 10,
              backgroundColor: '#FFFAF8',
            }}
          >
            <View
              style={{ flexDirection: 'row', justifyContent: 'space-between' }}
            >
              <MText style={[commonStyles.textNormal, { color: '#333333' }]}>
                Nghĩa vụ phải trả Tima
              </MText>
              <MText
                style={[commonStyles.textNormalBold, { color: '#F05123' }]}
              >
                {formatMoney(data?.totalMoneyTima)} VNĐ
              </MText>
            </View>
            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'space-between',
                marginTop: 8,
              }}
            >
              <MText
                style={[
                  commonStyles.textNormal,
                  { color: '#828282', marginLeft: 16 },
                ]}
              >
                Phí phải thanh toán
              </MText>
              <MText style={[commonStyles.textNormal, { color: '#828282' }]}>
                {formatMoney(data?.timaMoneyConsultant)} VNĐ
              </MText>
            </View>
            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'space-between',
                marginTop: 8,
              }}
            >
              <MText
                style={[
                  commonStyles.textNormal,
                  { color: '#828282', marginLeft: 16 },
                ]}
              >
                Phí phạt trả chậm
              </MText>
              <MText style={[commonStyles.textNormal, { color: '#828282' }]}>
                {formatMoney(data?.timaMoneyFineLate)} VNĐ
              </MText>
            </View>
            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'space-between',
                marginTop: 8,
              }}
            >
              <MText
                style={[
                  commonStyles.textNormal,
                  { color: '#828282', marginLeft: 16 },
                ]}
              >
                Phí tất toán sớm
              </MText>
              <MText style={[commonStyles.textNormal, { color: '#828282' }]}>
                {formatMoney(data?.timaFineOrginalMoney)} VNĐ
              </MText>
            </View>
            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'space-between',
                marginTop: 8,
              }}
            >
              <MText style={[commonStyles.textNormal, { color: '#333333' }]}>
                Tiền phải thanh toán CIMB
              </MText>
              <MText
                style={[commonStyles.textNormalBold, { color: '#F05123' }]}
              >
                {formatMoney(data?.totalMoneyCIMB)} VNĐ
              </MText>
            </View>
            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'space-between',
                marginTop: 8,
              }}
            >
              <MText
                style={[
                  commonStyles.textNormal,
                  { color: '#828282', marginLeft: 16 },
                ]}
              >
                Gốc phải thanh toán
              </MText>
              <MText style={[commonStyles.textNormal, { color: '#828282' }]}>
                {formatMoney(data?.moneyOriginal)} VNĐ
              </MText>
            </View>
            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'space-between',
                marginTop: 8,
              }}
            >
              <MText
                style={[
                  commonStyles.textNormal,
                  { color: '#828282', marginLeft: 16 },
                ]}
              >
                Lãi phải thanh toán
              </MText>
              <MText style={[commonStyles.textNormal, { color: '#828282' }]}>
                {formatMoney(data?.moneyInterest)} VNĐ
              </MText>
            </View>
            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'space-between',
                marginTop: 8,
              }}
            >
              <MText
                style={[
                  commonStyles.textNormal,
                  { color: '#828282', marginLeft: 16 },
                ]}
              >
                Phí phạt trả chậm
              </MText>
              <MText style={[commonStyles.textNormal, { color: '#828282' }]}>
                {formatMoney(data?.moneyFineInterestLate)} VNĐ
              </MText>
            </View>
            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'space-between',
                marginTop: 8,
              }}
            >
              <MText
                style={[
                  commonStyles.textNormal,
                  { color: '#828282', marginLeft: 16 },
                ]}
              >
                Phí tất toán sớm
              </MText>
              <MText style={[commonStyles.textNormal, { color: '#828282' }]}>
                {formatMoney(data?.cimbFineOrginalMoney)} VNĐ
              </MText>
            </View>
          </View>
          <MText
            style={{
              marginTop: 16,
              marginHorizontal: 16,
              color: '#EB5757',
              fontWeight: 'bold',
            }}
          >
            *Lưu ý:
          </MText>
          <MText
            style={{ marginTop: 8, marginHorizontal: 16, color: '#333333' }}
          >
            Số tiền đã được tính trên tất cả {props?.route?.params?.count} kỳ
            (Đơn vị tính: VNĐ)
          </MText>
        </ScrollView>
        <View style={{ marginBottom: insets.bottom }}>
          <View
            style={{ height: 1, backgroundColor: '#E4E8EA', marginBottom: 16 }}
          />
          <View
            style={{
              flexDirection: 'row',
              justifyContent: 'space-between',
              alignItems: 'center',
              paddingHorizontal: 16,
              marginBottom: 16,
            }}
          >
            <MText
              style={[
                commonStyles.textNormal,
                { color: '#333333', fontSize: 16 },
              ]}
            >
              Tổng cộng
            </MText>
            <MText
              style={[
                commonStyles.textNormalBold,
                { color: '#F05123', fontSize: 16 },
              ]}
            >
              {formatMoney(data?.totalMoneyCIMB + data?.totalMoneyTima)} VNĐ
            </MText>
          </View>
          <TouchableOpacity
            style={{ paddingHorizontal: 16 }}
            onPress={() => {
              navigation.dispatch(
                StackActions.push(ScreenNames.PaymentInfo, {
                  loan: props.route?.params?.loan,
                  isFull: true,
                })
              );
            }}
          >
            <LinearGradient
              colors={['#FF7A00', '#EF4123']}
              style={{
                borderRadius: 30,
                paddingHorizontal: 24,
                alignItems: 'center',
                justifyContent: 'center',
                height: 40,
              }}
            >
              <MText
                style={[commonStyles.textNormalBold, { color: '#FDFDFD' }]}
              >
                Xác nhận và tất toán
              </MText>
            </LinearGradient>
          </TouchableOpacity>
          <View
            style={{
              marginTop: 8,
              flexDirection: 'row',
              justifyContent: 'center',
              alignItems: 'center',
              marginBottom: 16,
            }}
          >
            <MText style={{ fontSize: 12, color: '#333333' }}>
              Cung cấp bởi{' '}
            </MText>
            <CIMBBank />
          </View>
        </View>
        <Loading isLoading={isLoading} />
      </View>
    </View>
  );
});
