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

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

function ConfirmTransfer({payment, wallet}) {
    const apiURL = new usersService()

    const navigate = useNavigate()
    
    let {state} = useLocation()
    // what happens if not state redirect user
    if(!state){
        navigate('../transfer-fund',{replace: true})
    }

    let [requestStatus, setRequestStatus] = useState({message: '', loading: false, status: false})
    let [pageLoading, setPageLoading] = useState(true)

    //FUNCTION TO HANDLE SUBMIT
    const handleSubmit = () => {
        setRequestStatus({message: '', loading: true, status: false})
        let reqData = {
            amount: Number(state.amount),
            Fee: Number(state.fee),
            recipientid: Number(state.recipientID)
        }
        apiURL.sendMoney(reqData).then((res)=>{
            if(res.data.internal_return < 0){
                setRequestStatus({message: 'Could not perform transaction', loading: false, status: false})
                return
            }
            setRequestStatus({message: 'transfer successful', loading: false, status: true})
            toast.success('Transfer sucessful')
            setTimeout(()=>{
                navigate('/', {replace: true})
            }, 1000)
        }).catch(error=>{
            setRequestStatus({message: 'Opps! something went wrong! Try Again', loading: false, status: false})
        })
    }

    useEffect(()=>{
        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">
                        <div className='px-4 md:px-8 py-4'>
                            {wallet.loading ?
                                <LoadingSpinner size='8' color='sky-blue' />
                                :
                                wallet.data.length ? 
                                <h2 className='my-4 text-slate-500 dark:text-white text-sm xl:text-xl font-medium'>
                                {wallet.data.map(item => {
                                    if(item.description == 'Naira'){
                                        return `Withdraw from Naira Wallet : ${item.symbol}${(item.amount*0.01).toFixed(2)}`
                                    }
                                })}
                                </h2>
                                :
                                wallet.error ? 
                                <h2 className='my-4 text-slate-500 dark:text-white text-sm xl:text-xl font-medium'>Opps! An Error Occured</h2>
                                :
                                <h2 className='my-4 text-slate-500 dark:text-white text-sm xl:text-xl font-medium'>No Wallet Information Found!</h2>
                            }
                        </div>
                        <hr />
                        <div className='px-4 md:px-8 py-4 add-fund-info'>
                                <h2 className='my-2 text-slate-900 dark:text-white text-sm xl:text-xl font-medium'>Confirm Withdraw to Account</h2>
                                {/* AMOUNT */}
                                <div className="field w-full mb-3">
                                    <InputCom
                                        label="Amount:"
                                        type="text"
                                        name="amount"
                                        value={state?.amount || ''}
                                        disable={true}
                                    />
                                </div>

                                {/* RECIPIENT ACC: */}
                                <div className="field w-full mb-3">
                                    <InputCom
                                        label="Recipient Acc:"
                                        type="text"
                                        name="recipient"
                                        value={state?.details.recipient || ''}
                                        disable={true}
                                    />
                                </div>

                                {/* PROCESSING FEE: */}
                                <div className="field w-full mb-3">
                                    <InputCom
                                        label="Processing Fee:"
                                        type="text"
                                        name="processingFee"
                                        value={state?.fee || ''}
                                        disable={true}
                                    />
                                </div>

                                {/* TOTAL */}
                                <div className="field w-full mb-3">
                                    <InputCom
                                        label="Total"
                                        type="text"
                                        name="total"
                                        value={state?.total || ''}
                                        disable={true}
                                    />
                                </div>

                                {/* COMMENT/NOTE */}
                                <div className="field w-full mb-3">
                                    <InputCom
                                        label="Comment/Note:"
                                        type="text"
                                        name="comment"
                                        value={state?.comment || ''}
                                        disable={true}
                                    />
                                </div>
                        </div>

                        <hr />
                        {requestStatus.message && <p className={`text-base ${requestStatus.status? 'text-green-500' : 'text-red-500'} px-4 md:px-8 py-4`}>{requestStatus.message}</p>}
                        <div className='px-4 md:px-8 py-4 add-fund-btn flex justify-end items-center'>
                            {requestStatus.loading ? 
                            <LoadingSpinner size='8' color='sky-blue' />
                            :
                            <button onClick={handleSubmit} className='text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-md'>Transfer</button>
                            }
                        </div>
                    </div>
                </div>
                )
            }
    
            <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
                <div className="wallet w-full px-4 md:px-8 py-4 h-full max-h-[800px] 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 ConfirmTransfer