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

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>
            {/* heading */}
            <div className="sm:flex justify-between items-center mb-6">
                <div className="w-full flex justify-start space-x-3 items-center">
                    <button
                    type="button"
                    className="min-w-[45px] h-auto text-[#374557] border border-sky-blue p-1 rounded-full"
                    onClick={() =>
                        navigate('/my-wallet', { replace: true })
                    }
                    >
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            width="35"
                            height="35"
                            viewBox="0 0 24 24"
                            fill="skyblue"
                        >
                            <path d="M19 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H19v-2z" />
                        </svg>
                    </button>
                    <h1 className="text-26 font-bold inline-flex gap-3 text-dark-gray dark:text-white items-center">
                    Add Credit
                    </h1>
                </div>
                <div className="slider-btns flex space-x-4">
                    <div
                        onClick={() => filterHandler("today")}
                        className="relative"
                    ></div>
                </div>
            </div>

            <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
                <div className="lg:w-2/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="field w-full mb-6">
                                <InputCom
                                    fieldClass="px-6"
                                    label="Amount(Naira)"
                                    type="text"
                                    name="amount"
                                    placeholder="Amount"
                                    value={input}
                                    inputHandler={handleChange}
                                    // blurHandler={props.handleBlur}
                                />
                                {inputError && <p className='text-base text-red-500'>{inputError}</p>}
                            </div>
                        </form>
                        <hr />
                        <div className='md:p-8 p-4 add-fund-btn flex justify-end items-center py-4'>
                            <button
                                onClick={handleSubmit}
                                type="button"
                                className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
                            >
                                <span className="text-white">Continue</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
                <div className="lg:w-2/2 w-full mb-10 lg:mb-0">
                    <div className="wallet w-full md:p-8 p-4 h-full min-h-[590px] bg-white dark:bg-dark-white 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>
        </div>
      )
}

export default AddFund