import React, {useState, useEffect} from 'react'
import RecentActivityTable from './WalletComponent/RecentActivityTable'
import LoadingSpinner from '../Spinners/LoadingSpinner'
import InputCom from '../Helpers/Inputs/InputCom'
import {toast} from 'react-toastify'
import { useLocation, useNavigate } from 'react-router-dom'
import { useSelector } from 'react-redux'

import usersService from '../../services/UsersService'

import { FlutterWaveButton, closePaymentModal } from 'flutterwave-react-v3'


function ConfirmAddFund({payment}) {

    let {userDetails} = useSelector(state => state.userDetails) // TO GET LOGGEDIN USER DETAILS
    
    let [pageLoading, setPageLoading] = useState(true)

    let [requestStatus, setRequestStatus] = useState({message: '', loading: false, status: false}) // STATE FOR API REQUEST

    const apiURL = new usersService()
    const navigate = useNavigate()

    let {state} = useLocation()
    

    //FUNCTION TO HANDLE SUBMIT
    const onSuccessPayment = () => {
        setRequestStatus({message: '', loading: true, status: false})
        let reqData = {amount: state?.account, currency: 'NGN'}
        apiURL.startTopUp(reqData).then((res)=>{
            if(res.data.internal_return < 0){
                setRequestStatus({message: 'Could not finish transaction', loading: false, status: false})
                toast.success('Opps! something went wrong')
            }
             // do something
             setRequestStatus({message: 'Topup successful', loading: false, status: true})
             toast.success('Account Topup was sucessful')
            setTimeout(()=>{
                navigate('/my-wallet', {replace: true})
            }, 1000)
        }).catch(err => {
            // do something
            setRequestStatus({message: 'Opps! An Error Occured', loading: false, status: false})
            toast.success('Opps! something went wrong')
        })
    }

    const config = {
        public_key: process.env.REACT_APP_FLUTTERWAVE_APIKEY,
        tx_ref: Date.now(),
        amount: state?.amount,
        currency: 'NGN',
        payment_options: 'card,mobilemoney,ussd',
        customer: {
          email: `${userDetails.email}`,
          phone_number: userDetails.phone,
          name: `${userDetails.lastname} ${userDetails.firstname}`
        },
        customizations: {
          title: 'WrenchBoard',
          description: 'Topup Payment',
          logo: 'https://st2.depositphotos.com/4403291/7418/v/450/depositphotos_74189661-stock-illustration-online-shop-log.jpg',
        },
      };

    const fwConfig = {
        ...config,
        text: 'Proceed',
        callback: (response) => {
          onSuccessPayment()
          closePaymentModal() // this will close the modal programmatically
        },
        onClose: () => {},
      };

    useEffect(()=>{
        // what happens if not state redirect user
        if(!state){
            navigate('../add-fund',{replace: true})
        }else{
            setPageLoading(false)
        }
    },[])

    return (
        <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
            {pageLoading ?
            <LoadingSpinner size='8' color='sky-blue' />
            :
            <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
                <div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl shadow">
                    <h2 className='md:p-8 p-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Confirm Add Fund To Account</h2>
                    <hr />
                   <div className='px-4 md:px-8 py-4 add-fund-info'>
                        <div className="field w-full mb-3">
                            <InputCom
                                label="Amount (Naira):"
                                type="text"
                                name="amount"
                                value={state.amount || ''}
                                disable={true}
                            />
                        </div>
                    </div>

                    <hr />
                    <div className='md:p-8 p-4 add-fund-btn flex justify-end items-center py-4'>
                        <FlutterWaveButton {...fwConfig} className='text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-md' />
                    </div>
                </div>
            </div>
            }
    
            <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
                <div className="wallet w-full  md:p-8 p-4 h-full max-h-[600px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
                    <h2 className='text-gray-900 dark:text-white text-xl lg:text-2xl font-medium'>Recent Activity</h2>
                    <p className='text-base text-gray-600 dark:text-white'>Activity Report</p>
                    {payment.loading ?
                    <LoadingSpinner size='16' color='sky-blue' />
                    :
                    <RecentActivityTable  payment={payment}/>
                    }
                </div>
            </div>
        </div>
      )
}

export default ConfirmAddFund