//@ts-nocheck
import React, { useEffect, useState } from 'react';
import { observer } from 'mobx-react-lite';
import { useNavigation } from '@react-navigation/native';
import {
  Alert,
  ScrollView,
  TouchableOpacity,
  View,
  ViewStyle,
} from 'react-native';
import { IconBack } from '../../assets/icons';
import { MText } from '../../components/MText';
import { formatDDMMYYY, formatMoney } from '../../utils';
import { Api } from '../../services/api';
import { color } from '../../theme';
import { commonStyles } from '../CommonStyles';
import Loading from '../../components/Loading';
import MHeader from '../../components/MHeader';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

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

  const getData = async () => {
    setIsLoading(true);
    Api.getInstance()
      .getPaymentScheduleTima(props.route?.params?.loan?.id)
      .then((response) => {
        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((err) => {
        setIsLoading(false);
        Alert.alert('Thông báo', 'Có lỗi xảy ra. Vui lòng thử lại sau');
      });
  };

  const getMoneyCloseLoan = async () => {
    try {
      setIsLoading(true);
      const response = await Api.getInstance().getMoneyCloseLoan(
        props.route?.params?.loan?.id
      );
      if (response.kind === 'ok' && response.data.meta.errorCode === 200) {
        setMoneyCloseLoan(response.data?.data?.totalMoneyCloseLoan);
      } else {
      }
    } catch (error) {
    } finally {
      setIsLoading(false);
    }
  };

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

  return (
    <View style={{ flex: 1, backgroundColor: '#FDFDFD' }}>
      <MHeader title={`Vay trực tuyến 24/7`} />
      <View style={{ flex: 1 }}>
        <View style={$header}>
          <TouchableOpacity
            style={$backButton}
            onPress={() => navigation.goBack()}
          >
            <IconBack />
          </TouchableOpacity>
          <MText
            style={{
              fontSize: 16,
              fontWeight: '600',
              fontFamily: 'BeVietnamPro-SemiBold',
            }}
          >
            HD-1043102
          </MText>
        </View>
        <View
          style={{
            backgroundColor: '#ECFFE8',
            flexDirection: 'row',
            alignItems: 'center',
            paddingHorizontal: 16,
            paddingVertical: 8,
            justifyContent: 'space-between',
          }}
        >
          <MText
            style={{
              fontSize: 12,
            }}
          >
            Mã HĐ giải ngân
          </MText>
          <MText
            style={{
              fontSize: 12,
              fontWeight: '600',
              fontFamily: 'BeVietnamPro-SemiBold',
            }}
          >
            TC-{data?.codeId}
          </MText>
        </View>
        <View
          style={{
            flexDirection: 'row',
            alignItems: 'center',
            paddingHorizontal: 16,
            marginTop: 16,
          }}
        >
          <MText
            style={{
              color: 'black',
              fontWeight: '600',
              width: '35%',
              fontFamily: 'BeVietnamPro-SemiBold',
            }}
          >
            Ngày thanh toán
          </MText>
          <MText
            style={{
              color: 'black',
              fontWeight: '600',
              width: '40%',
              textAlign: 'center',
              fontFamily: 'BeVietnamPro-SemiBold',
            }}
          >
            Số tiền thanh toán
          </MText>
        </View>
        <ScrollView style={{ flex: 1, paddingHorizontal: 16, marginTop: 16 }}>
          {data?.paymentSchedule?.map((item, index) => (
            <View
              key={index}
              style={{
                flexDirection: 'row',
                paddingVertical: 16,
                borderBottomWidth: 1,
                borderColor: color.border,
              }}
            >
              <MText
                style={[
                  {
                    width: '35%',
                  },
                ]}
              >
                {item?.daysPayable ? formatDDMMYYY(item?.daysPayable) : ''}
              </MText>
              <View
                style={{
                  width: '40%',
                  alignItems: 'center',
                }}
              >
                <MText>{formatMoney(item?.payMoney)} VNĐ</MText>
                <MText
                  style={[
                    {
                      color: !item?.done ? '#F05123' : '#27AE60',
                      marginTop: 4,
                      fontSize: 12,
                    },
                  ]}
                >
                  {!item?.done ? 'Chưa thanh toán' : 'Đã thanh toán'}
                </MText>
              </View>

              <View
                style={{
                  flexDirection: 'row',
                  justifyContent: 'flex-end',
                }}
              >
                {!item?.done && (
                  <TouchableOpacity
                    disabled={item?.done}
                    style={{
                      borderRadius: 8,
                      height: 30,
                      paddingHorizontal: 8,
                      alignItems: 'center',
                      justifyContent: 'center',
                      borderWidth: 1,
                      borderColor: !item?.done ? color.primary : '#333333',
                    }}
                    onPress={() =>
                      navigation.navigate('ShowQrCode', {
                        item,
                        data,
                        id: props.route?.params?.loan?.id,
                      })
                    }
                  >
                    <MText
                      style={{
                        color: !item?.done ? color.primary : '#333333',
                        fontSize: 12,
                      }}
                    >
                      Thanh toán
                    </MText>
                  </TouchableOpacity>
                )}
              </View>
            </View>
          ))}
          <TouchableOpacity
            onPress={() =>
              navigation.navigate('ShowQrCode', {
                data,
                id: props.route?.params?.loan?.id,
                isFullPayment: true,
                totalMoney: moneyCloseLoan,
              })
            }
            style={{
              backgroundColor: '#FFEAD8',
              marginTop: 24,
              borderRadius: 24,
              height: 40,
              alignItems: 'center',
              justifyContent: 'center',
              borderWidth: 1,
              borderColor: '#F05123',
              marginBottom: insets.bottom + 24,
            }}
          >
            <MText
              style={{
                color: '#F05123',
                fontWeight: '500',
                fontFamily: 'BeVietnamPro-Medium',
              }}
            >
              Xem thông tin tất toán
            </MText>
          </TouchableOpacity>
        </ScrollView>
        <Loading isLoading={isLoading} />
      </View>
    </View>
  );
});
const $backButton: ViewStyle = {
  position: 'absolute',
  left: 16,
};

const $header: ViewStyle = {
  flexDirection: 'row',
  alignItems: 'center',
  paddingVertical: 16,
  justifyContent: 'center',
};
