import React, {useState} from 'react'
import RecentActivityTable from './WalletComponent/RecentActivityTable'
import LoadingSpinner from '../Spinners/LoadingSpinner'
import { useNavigate } from 'react-router-dom'

function AddFund({payment}) {
   
    const navigate = useNavigate()

    //STATE FOR CONTROLLED INPUT
    let [input, setInput] = useState('0')

    let [inputError, setInputError] = useState('')

    // FUNCTION TO HANDLE INPUT CHANGE
    const handleChange = ({target:{name, value}}) => {
        setInput(value)
    }

    //FUNCTION TO HANDLE SUBMIT
    const handleSubmit = () => {
        setInputError('')
        if(!input || input == '0'){
            setInputError('Please Enter Amount')
            return
        }

        if(isNaN(input)){
            setInputError('Amount must be a Number')
            return
        }

        const stateData = {amount: Number(input)}
        navigate('confirm-add-fund', {state: stateData})
     
        setInput('')
    }
    return (
        <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
            <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'>Add Credit with Account Deposit</h2>
                    <hr />
                   <form className='md:p-8 p-4 add-fund-info'>
                        <div className='md:flex items-center'>
                            <label className='w-full md:w-2/4 text-slate-600 text-lg'>Amount(Naira) <span className='text-red-500'>*</span></label>
                            <input className='w-full md:w-2/4 p-3 text-lg text-right bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
                                value={input} 
                                name='amount' 
                                type="text" 
                                placeholder='Amount' 
                                required
                                onChange={handleChange}
                                />
                        </div>
                        {inputError && <p className='text-base text-red-500'>{inputError}</p>}
                   </form>
                        <hr />
                        <div className='md:p-8 p-4 add-fund-btn flex justify-end items-center py-4'>
                            <button onClick={handleSubmit} className='text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-md'>Continue</button>
                        </div>
                </div>
                <div className="add-fund py-4 my-2 w-full bg-white dark:bg-dark-white rounded-2xl shadow">
                    <h2 className='md:px-8 px-4 py-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Add Credit with Account Deposit</h2>
                    <hr />
                    <p className='md:px-8 px-4 py-2 text-slate-600 dark:text-white text-base lg:text-xl font-medium'>Transfer fund to WrenchBoard GTB Account 0250869867</p>
                    <p className='md:px-8 px-4 py-2 text-slate-500 dark:text-white text-sm lg:text-base font-medium'>
                    Make sure you add your account username in the notes part of the transfer for prompt processing. When the transfer is complete notify here <a className='text-sky-blue' href='#'>Contact us</a>
                    </p>
                </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-[590px] 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 AddFund