import React, {useState} from 'react'
import { Link } from 'react-router-dom'

function TransferFund() {
   
    //STATE FOR CONTROLLED INPUTS
    let [inputs, setInputs] = useState({
        amount: '0',
        fee: '0',
        recipient: '',
        total: '0',
        comment: ''
    })

    // FUNCTION TO HANDLE INPUT CHANGE
    const handleChange = ({target:{name, value}}) => {
        setInputs(prev => ({...prev, [name]:value}))
    }

    //FUNCTION TO HANDLE SUBMIT
    const handleSubmit = (e) => {
        e.preventDefault();

        //valid inputs before submitting. Just for texting remove later
    
        setInputs({
            amount: '0',
            fee: '0',
            recipient: '',
            total: '0',
            comment: ''
        })
    }
    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 md:p-8 p-4 bg-white dark:bg-dark-white rounded-2xl shadow">
                   <form className='transfer-fund-info'>
                        <h2 className='my-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Withdraw from Naira Wallet : &#8358;0.00</h2>
                        <div className='my-3 md:flex items-center justify-between space-x-2'>
                            <div className='transfer-input w-full md:w-1/2'>
                                <label className='w-full text-slate-600 text-lg'>Amount <span className='text-red-500'>*</span></label>
                                <input className='w-full p-3 text-lg text-right bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
                                    value={inputs.amount} 
                                    name='amount' 
                                    type="text" 
                                    placeholder='Amount' 
                                    required
                                    onChange={handleChange}
                                    />
                            </div>
                            <div className='transfer-input w-full md:w-1/2'>
                                <label className='w-full text-slate-600 text-lg'>Fee <span className='text-red-500'>*</span></label>
                                <input className='w-full p-3 text-lg text-right bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
                                    value={inputs.fee} 
                                    name='fee' 
                                    type="text" 
                                    placeholder='Fee' 
                                    required
                                    onChange={handleChange}
                                    />
                            </div>
                        </div>

                        <div className='my-3 md:flex items-center justify-end space-x-2'>
                            <div className='transfer-input w-full md:w-1/2'>
                                <label className='w-full text-slate-600 text-lg'>Amount <span className='text-red-500'>*</span></label>
                                <input className='w-full p-3 text-lg text-right bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
                                    value={inputs.total} 
                                    name='total' 
                                    type="text" 
                                    placeholder='Total' 
                                    required
                                    onChange={handleChange}
                                    />
                            </div>
                        </div>

                        <div className='relative my-3 md:flex items-center'>
                            <div className='transfer-input w-full'>
                                <div className='flex items-center justify-start'>
                                    <label className='text-slate-600 text-lg'>Recipient 
                                        <span className='text-red-500 mx-2'>*</span> 
                                        <span title='Transfer Recipient' className={`text-white text-sm bg-slate-500 w-1 h-1 rounded-full px-3 py-1 cursor-pointer`}>!</span>
                                    </label>
                                    <Link to='add-recipient' className='mx-1 text-base text-white p-3 bg-[orange] rounded-md hover:opacity-80'>Add New</Link>
                                </div>
                                <select className='mt-2 w-full p-3 text-lg bg-white rounded-md border border-slate-300 outline-0' name='recipient' onChange={handleChange}>
                                    <option className='text-slate-500 text-lg' value="">Select...</option>
                                </select>
                            </div>
                        </div>

                        <div className='my-3 md:flex items-center'>
                            <div className='transfer-input w-full'>
                                <label className='w-full text-slate-600 text-lg'>Comment <span className='text-red-500'>*</span></label>
                                <input className='w-full p-3 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
                                    value={inputs.comment} 
                                    name='comment' 
                                    type="text" 
                                    placeholder='Comment' 
                                    required
                                    onChange={handleChange}
                                    />
                            </div>
                        </div>

                        <div className='transfer-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>
                   </form>
                </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-[500px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
                    <h2 className='text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Recent Activity</h2>
                    <p className='text-base text-slate-500 dark:text-white'>Activity Report</p>
                    <table className="wallet-activity w-full table-auto border-collapse text-left">
                        <thead className='border-b-2'>
                            <tr className='text-slate-600'>
                            <th className="py-3">Date</th>
                            <th className="py-3">Recipient</th>
                            <th className="py-3">Amount/FeeConf/Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr className='text-slate-500'>
                                <td className="py-3">Item</td>
                                <td className="py-3">Item</td>
                                <td className="py-3">Item</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
      )
}

export default TransferFund