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

interface IProps {
  data: any;
}

export const Payment = observer(function Payment({ data }: IProps) {
  const navigation = useNavigation();
  const [isLoading, setIsLoading] = useState(false);
  const [listPayment, setListPayment] = useState<any[]>();
  const [lastDay, setLastDay] = useState<any>();

  const getData = () => {
    setIsLoading(true);
    DetailLoanStore.getListPayment(
      data?.id,
      (res) => {
        setIsLoading(false);
        setListPayment(res);
        const newList = res?.filter((item) => item.status === 0);
        setLastDay(
          Math.min(
            ...newList.map((element) => {
              return new Date(element.payDate);
            })
          )
        );
      },
      () => {
        setIsLoading(false);
      }
    );
  };

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

  useEffect(() => {
    return navigation.addListener('focus', () => {
      getData();
    });
  }, [navigation]);

  return (
    <View style={{ marginVertical: 16, flex: 1 }}>
      <ScrollView style={{ flex: 1, paddingHorizontal: 16 }}>
        {listPayment?.map((item, index) => (
          <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={{
                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?.totalMoney)} VNĐ
              </MText>
            </View>
            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'space-between',
                marginTop: 8,
              }}
            >
              <View style={{ flex: 1, paddingRight: 15 }}>
                <MText
                  style={[
                    commonStyles.textNormal,
                    { color: '#828282', paddingLeft: 15 },
                  ]}
                >
                  Nghĩa vụ phải trả Tima
                </MText>
              </View>
              <MText style={[commonStyles.textNormal, { color: '#828282' }]}>
                {formatMoney(item?.totalMoneyTima)} VNĐ
              </MText>
            </View>
            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'space-between',
                marginTop: 8,
              }}
            >
              <View style={{ flex: 1, paddingRight: 15 }}>
                <MText
                  style={[
                    commonStyles.textNormal,
                    { color: '#828282', paddingLeft: 15 },
                  ]}
                >
                  Nghĩa vụ phải trả CIMB
                </MText>
              </View>
              <MText style={[commonStyles.textNormal, { color: '#828282' }]}>
                {formatMoney(item?.totalMoneyCIMB)} 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}>
                {formatDDMMYYY(item?.payDate)}
              </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}>Trạng thái</MText>
              </View>
              <MText
                style={[
                  commonStyles.textNormal,
                  { color: item?.status === 0 ? '#F05123' : '#27AE60' },
                ]}
              >
                {item?.status === 0 ? 'Chưa thanh toán' : 'Đã thanh toán'}
              </MText>
            </View>
            {item.status === 0 && (
              <>
                <View
                  style={{
                    height: 1,
                    backgroundColor: '#E0E0E0',
                    marginVertical: 8,
                  }}
                />
                {item?.status === 0 && item.isDue === 1 ? (
                  <View style={{ flexDirection: 'row-reverse' }}>
                    <TouchableOpacity
                      onPress={() => {
                        navigation.dispatch(
                          StackActions.push(ScreenNames.PaymentInfo, {
                            loan: data,
                            isFull: false,
                          })
                        );
                      }}
                    >
                      <LinearGradient
                        colors={['#FF7A00', '#EF4123']}
                        style={{
                          paddingVertical: 8,
                          borderRadius: 30,
                          paddingHorizontal: 24,
                        }}
                      >
                        <MText
                          style={[
                            commonStyles.textNormal,
                            { color: '#FFFFFF' },
                          ]}
                        >
                          Thanh toán
                        </MText>
                      </LinearGradient>
                    </TouchableOpacity>
                  </View>
                ) : (
                  <View style={{ flexDirection: 'row-reverse' }}>
                    <LinearGradient
                      colors={['#8A8A8A', '#D0CFCF']}
                      style={{
                        paddingVertical: 8,
                        borderRadius: 30,
                        paddingHorizontal: 24,
                        backgroundColor: '#C7C7C7',
                      }}
                    >
                      <MText
                        style={[commonStyles.textNormal, { color: '#FDFDFD' }]}
                      >
                        Thanh toán
                      </MText>
                    </LinearGradient>
                  </View>
                )}
              </>
            )}
          </View>
        ))}
        <TouchableOpacity
          style={{
            borderRadius: 30,
            borderWidth: 1,
            borderColor: '#EF592E',
            alignItems: 'center',
            paddingVertical: 10,
            backgroundColor: '#FFEAD8',
            marginTop: 10,
          }}
          onPress={() => {
            navigation.dispatch(
              StackActions.push(ScreenNames.PaymentAll, {
                loan: data,
                count: DetailLoanStore.listPayment.length,
              })
            );
          }}
        >
          <MText style={[commonStyles.textNormal, { color: '#EF592E' }]}>
            Xem thông tin tất toán
          </MText>
        </TouchableOpacity>
        <View
          style={{
            marginTop: 8,
            flexDirection: 'row',
            justifyContent: 'center',
            alignItems: 'center',
          }}
        >
          <MText style={{ fontSize: 12, color: '#333333' }}>
            Cung cấp bởi{' '}
          </MText>
          <CIMBBank />
        </View>
      </ScrollView>
      <Loading isLoading={isLoading} />
    </View>
  );
});
