// @ts-nocheck
import { StackActions, useNavigation } from '@react-navigation/native';
import { observer } from 'mobx-react-lite';
import React, { useEffect, useState } from 'react';
import { Clipboard, ScrollView, TouchableOpacity, View } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import { CIMBBank, SpanIcon } 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';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

interface IProps {
  loan: any;
}
export const Info = observer(function Info({ loan }: IProps) {
  const insets = useSafeAreaInsets();
  const navigation = useNavigation();
  const [isShow, setIsShow] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const [data, setData] = useState<any>();

  const copyToClipboard = (string) => {
    Clipboard.setString(string);
  };
  const getData = () => {
    setIsLoading(true);
    DetailLoanStore.getDetailLoan(
      loan?.id,
      (res) => {
        setIsLoading(false);
        setData(res);
      },
      () => {
        setIsLoading(false);
      }
    );
  };

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

  return (
    <View style={{ margin: 16, flex: 1 }}>
      <ScrollView style={{ flex: 1 }}>
        <View
          style={{
            borderWidth: 1,
            borderColor: '#E0E0E0',
            backgroundColor: 'white',
            padding: 16,
            borderRadius: 8,
            marginBottom: 8,
          }}
        >
          <View
            style={{ flexDirection: 'row', justifyContent: 'space-between' }}
          >
            <MText style={[commonStyles.textNormal, { paddingRight: 15 }]}>
              Mã đơn vay giải ngân
            </MText>
            <MText style={[commonStyles.textNormalBold, {}]}>
              TC-{data?.codeId}
            </MText>
          </View>
          <View
            style={{
              flexDirection: 'row',
              justifyContent: 'space-between',
              marginTop: 16,
            }}
          >
            <MText style={[commonStyles.textNormal, { paddingRight: 15 }]}>
              Mã đơn vay CIMB
            </MText>
            <MText style={[commonStyles.textNormalBold, {}]}>
              {data?.cimbLoan}
            </MText>
          </View>
          <View
            style={{
              flexDirection: 'row',
              justifyContent: 'space-between',
              marginTop: 16,
            }}
          >
            <MText style={[commonStyles.textNormal, { paddingRight: 15 }]}>
              Số tiền giải ngân
            </MText>
            <MText style={[commonStyles.textNormalBold, {}]}>
              {formatMoney(data?.loanAmount)} VND
            </MText>
          </View>
          <View
            style={{
              flexDirection: 'row',
              justifyContent: 'space-between',
              marginTop: 16,
            }}
          >
            <MText style={[commonStyles.textNormal, { paddingRight: 15 }]}>
              Thời hạn
            </MText>
            <MText style={[commonStyles.textNormalBold, {}]}>
              {data?.loanTime} tháng
            </MText>
          </View>
          <View
            style={{
              flexDirection: 'row',
              justifyContent: 'space-between',
              marginTop: 16,
            }}
          >
            <MText style={[commonStyles.textNormal, { paddingRight: 15 }]}>
              Ngày giải ngân
            </MText>
            <MText style={[commonStyles.textNormalBold, {}]}>
              {formatDDMMYYY(data?.disbursementAt)}
            </MText>
          </View>
          <View
            style={{
              flexDirection: 'row',
              justifyContent: 'space-between',
              marginTop: 16,
            }}
          >
            <MText style={[commonStyles.textNormal, { paddingRight: 15 }]}>
              Ngày đến hạn tiếp theo
            </MText>
            <MText style={[commonStyles.textNormalBold, {}]}>
              {formatDDMMYYY(data?.nextDate)}
            </MText>
          </View>
          <View
            style={{
              flexDirection: 'row',
              justifyContent: 'space-between',
              marginTop: 16,
            }}
          >
            <MText style={[commonStyles.textNormal, { paddingRight: 15 }]}>
              Trạng thái Đơn vay
            </MText>
            <MText style={[commonStyles.textNormalBold, {}]}>
              {data?.status}
            </MText>
          </View>
        </View>
        <View
          style={{
            borderWidth: 1,
            borderColor: '#E0E0E0',
            backgroundColor: 'white',
            padding: 16,
            borderRadius: 8,
            marginBottom: 8,
          }}
        >
          <View
            style={{ flexDirection: 'row', justifyContent: 'space-between' }}
          >
            <MText style={[commonStyles.textNormal, { color: '#333333' }]}>
              Tổng phải trả
            </MText>
            <TouchableOpacity
              style={{ flexDirection: 'row', alignItems: 'center' }}
              onPress={() => setIsShow(!isShow)}
            >
              <MText
                style={[
                  commonStyles.textNormalBold,
                  { color: '#F05123', paddingRight: 5 },
                ]}
              >
                {formatMoney(data?.totalMoneyCIMB + data?.totalMoneyTima)} VNĐ
              </MText>
              <TouchableOpacity onPress={() => setIsShow(!isShow)}>
                <SpanIcon />
              </TouchableOpacity>
            </TouchableOpacity>
          </View>
          {isShow && (
            <View style={{ paddingHorizontal: 16 }}>
              <View
                style={{
                  flexDirection: 'row',
                  justifyContent: 'space-between',
                  marginTop: 8,
                }}
              >
                <MText style={[commonStyles.textNormal, { color: '#828282' }]}>
                  Nghĩa vụ phải trả Tima
                </MText>
                <MText style={[commonStyles.textNormal, { color: '#828282' }]}>
                  {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>

              {/* CIMB */}

              <View
                style={{
                  flexDirection: 'row',
                  justifyContent: 'space-between',
                  marginTop: 8,
                }}
              >
                <MText style={[commonStyles.textNormal, { color: '#828282' }]}>
                  Tiền phải thanh toán CIMB
                </MText>
                <MText style={[commonStyles.textNormal, { color: '#828282' }]}>
                  {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={{
                  height: 1,
                  backgroundColor: '#E0E0E0',
                  marginHorizontal: -16,
                  marginTop: 8,
                }}
              />
            </View>
          )}
          <View
            style={{
              flexDirection: 'row',
              justifyContent: 'space-between',
              marginTop: 8,
            }}
          >
            <MText>Trạng thái</MText>
            <MText style={[commonStyles.textNormal, { color: '#F05123' }]}>
              Chưa thanh toán
            </MText>
          </View>
        </View>
      </ScrollView>
      <TouchableOpacity
        onPress={() => {
          navigation.dispatch(
            StackActions.push(ScreenNames.PaymentInfo, {
              loan: data,
              isFull: false,
            })
          );
        }}
      >
        <LinearGradient
          colors={['#FF7A00', '#EF4123']}
          style={{
            borderRadius: 30,
            paddingHorizontal: 24,
            alignItems: 'center',
            justifyContent: 'center',
            height: 40,
          }}
        >
          <MText style={[commonStyles.textNormalBold, { color: '#FDFDFD' }]}>
            Thanh toán
          </MText>
        </LinearGradient>
      </TouchableOpacity>
      <View
        style={{
          marginBottom: insets.bottom,
          marginTop: 8,
          flexDirection: 'row',
          justifyContent: 'center',
          alignItems: 'center',
        }}
      >
        <MText style={{ fontSize: 12, color: '#333333' }}>Cung cấp bởi </MText>
        <CIMBBank />
      </View>
      <Loading isLoading={isLoading} />
    </View>
  );
});
