//@ts-nocheck
import React, { useEffect, useState } from 'react';
import {
  ActivityIndicator,
  Alert,
  SafeAreaView,
  TextStyle,
  TouchableOpacity,
  View,
  ViewStyle,
} from 'react-native';
import Modal from 'react-native-modal';
import { MText } from './MText';
import MButton from './MButton';
import LinearGradient from 'react-native-linear-gradient';
import {
  IconOption1,
  IconOption1Active,
  IconOption2,
  IconOption2Disable,
} from '../assets/v3';
import {
  Close2Icon,
  ErrorIcon,
  RadioCheckIcon,
  RadioIcon,
} from '../assets/icons';
import { formatMoney } from '../utils';
import { Api } from '../services/api';

interface IModalOptionLoan {
  open: boolean;
  loan?: any;
  callback?: () => void;
  onClose?: () => void;
}
export default function ModalOptionLoanDigital({
  open,
  loan,
  callback,
  onClose,
}: IModalOptionLoan) {
  const [option, setOption] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  const [loanAmount, setLoanAmount] = useState(0);

  useEffect(() => {
    setOption(null);
    setLoanAmount(0);
  }, [loan]);

  const onSubmit = async () => {
    if (!option) {
      Alert.alert('Thông báo', 'Vui lòng chọn gói vay để tiếp tục');
      return;
    }
    try {
      setIsLoading(true);
      const response = await Api.getInstance().updateDigitalProductLoan({
        LoanBriefId: loan?.loanBriefId,
        ProductId: option,
        LoanAmount: loanAmount,
      });
      setIsLoading(false);
      if (response.kind === 'ok' && response.data?.meta?.errorCode === 200) {
        if (callback) callback();
      } else {
        Alert.alert(
          'Thông báo',
          response.data?.meta?.errorMessage ||
            'Có lỗi xảy ra. Vui lòng thử lại sau'
        );
      }
    } catch (error) {
      console.log(error);
    } finally {
      setIsLoading(false);
    }
  };
  return (
    <Modal isVisible={open}>
      <SafeAreaView
        style={{
          backgroundColor: '#FFFFFF',
          borderRadius: 12,
          borderTopWidth: 4,
          borderColor: '#EF592E',
        }}
      >
        <TouchableOpacity
          onPress={() => {
            onClose();
            setOption(null);
            setLoanAmount(0);
          }}
          style={{
            position: 'absolute',
            top: 10,
            right: 10,
          }}
        >
          <Close2Icon />
        </TouchableOpacity>
        <MText
          style={{
            textAlign: 'center',
            fontSize: 16,
            fontWeight: 'bold',
            marginTop: 20,
            marginBottom: 10,
          }}
        >
          Xác nhận số tiền đề nghị vay
        </MText>
        <MText
          style={{
            textAlign: 'center',
            color: '#828282',
            paddingHorizontal: 16,
          }}
        >
          Bạn được vay với số tiền dự kiến lên tới{'\n'}
          <MText
            style={{
              color: '#EF592E',
              fontWeight: 'bold',
            }}
          >
            {formatMoney(
              loan
                ? Math.max(...loan?.productItem?.map((item) => item.loanAmount))
                : 0
            )}{' '}
            VNĐ
          </MText>
          ! Vui lòng chọn gói vay và hoàn thiện các bước để được giải ngân nhanh
          nhất!
        </MText>
        {loan?.productItem?.map((i: any, index) => (
          <View key={index}>
            <TouchableOpacity
              disabled={i?.loanAmount < 20000000}
              onPress={() => {
                setOption(i?.productId);
                setLoanAmount(i?.loanAmount);
              }}
              style={[
                $opt,
                {
                  backgroundColor:
                    i?.loanAmount < 20000000
                      ? '#F8F8F8'
                      : option === i?.productId
                      ? '#FFF7EA'
                      : '#FFFFFF',
                },
              ]}
            >
              <View
                style={{
                  flexDirection: 'row',
                  alignItems: 'center',
                  gap: 10,
                  marginBottom: 10,
                }}
              >
                {option === i?.productId ? (
                  i.productId === 1001 ? (
                    <IconOption1Active />
                  ) : (
                    <IconOption2 />
                  )
                ) : i.productId === 1001 ? (
                  <IconOption1 />
                ) : (
                  <IconOption2Disable />
                )}
                <View style={{ flex: 1 }}>
                  <MText
                    style={{
                      fontWeight: 'bold',
                    }}
                  >
                    {i?.productName}
                  </MText>
                  <MText
                    style={{
                      fontWeight: 'bold',
                      color: i?.loanAmount < 20000000 ? '#EB5757' : '#EF592E',
                      marginTop: 4,
                    }}
                  >
                    {i?.loanAmount < 20000000 ? (
                      'Không đủ điều kiện'
                    ) : (
                      <>Lên đến {formatMoney(i?.loanAmount)} VNĐ</>
                    )}
                  </MText>
                </View>
                {option === i?.productId ? <RadioCheckIcon /> : <RadioIcon />}
              </View>
              <MText style={$des}>• Phê duyệt tự động</MText>
              <MText style={$des}>• Online 100% toàn trình</MText>
              {i?.productId === 1002 && (
                <MText style={$des}>
                  • Có thể thu bổ sung Đăng ký xe (tuỳ gói vay)
                </MText>
              )}
              {i?.loanAmount > 0 && (
                <MText style={$des}>
                  • Giải ngân ngay lên đến {formatMoney(i?.loanAmount)}đ
                </MText>
              )}
            </TouchableOpacity>
            {i?.loanAmount < 20000000 && (
              <View
                style={{
                  backgroundColor: '#FFEBEB',
                  marginHorizontal: 16,
                  flexDirection: 'row',
                  gap: 10,
                  borderRadius: 8,
                  paddingHorizontal: 10,
                  paddingVertical: 8,
                }}
              >
                <ErrorIcon />
                <MText style={{ flex: 1, color: '#EB5757', fontSize: 12 }}>
                  Số tiền chưa đạt mức tối thiểu theo điều kiện vay (Khoản vay
                  tối thiểu: 20.000.000 VNĐ)
                </MText>
              </View>
            )}
          </View>
        ))}

        <MButton
          disabled={isLoading || option === null}
          onPress={() => onSubmit()}
          style={{
            marginHorizontal: 16,
          }}
        >
          <LinearGradient
            start={{ x: 1, y: 0 }}
            end={{ x: 0, y: 1 }}
            style={{
              height: 40,
              marginVertical: 16,
              borderRadius: 30,
              alignItems: 'center',
              justifyContent: 'center',
            }}
            colors={
              option === null ? ['#BDBDBD', '#BDBDBD'] : ['#FF7A00', '#EF4123']
            }
          >
            {isLoading ? (
              <ActivityIndicator color={'white'} />
            ) : (
              <MText
                style={{
                  color: 'white',
                  fontSize: 16,
                }}
              >
                Xác nhận
              </MText>
            )}
          </LinearGradient>
        </MButton>
      </SafeAreaView>
    </Modal>
  );
}
const $opt: ViewStyle = {
  borderWidth: 1,
  borderRadius: 8,
  borderColor: '#E5E5EA',
  marginHorizontal: 16,
  marginTop: 10,
  padding: 10,
};

const $des: TextStyle = {
  fontSize: 12,
  color: '#828282',
  marginTop: 4,
};
