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

function Balance({wallet, coupon}) {
    return (
        <div className="content-wrapper">
            {/* heading */}
            <div className="sm:flex justify-between items-center mb-6">
                <div className="mb-5 sm:mb-0">
                    <h1 className="text-26 font-bold   text-dark-gray dark:text-white">
                        Wallet
                    </h1>
                </div>
                <div className="slider-btns flex space-x-4">

                </div>
            </div>
            <div className='w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin'>
                {/* WALLET SECTION */}
                <div className="lg:w-4/4 w-full mb-10 lg:mb-0">
                    <div className="wallet w-full  md:p-8 p-4 h-full bg-white dark:bg-dark-white rounded-2xl shadow min-h-[520px]">
                        <div className='flex items-baseline justify-between'>
                            {/*<h2 className='text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Wallet</h2>*/}
                            {/*<p className='text-base text-slate-500 dark:text-white'>Add New Wallet</p>*/}
                        </div>
                        {/* wallet balance */}
                        {wallet.loading ?
                        <LoadingSpinner size='16' color='sky-blue' />
                        :
                        wallet.data.length ?
                        wallet.data.map((item, index)=> (
                        <div key={index} className="md:flex items-center flex-wrap my-3 border-t-2 border-slate-400">
                            <div className='text-slate-900 w-full md:w-1/2 flex space-x-3 items-start justify-start'>
                                <div className='balance-info'>
                                    <p className='py-2'></p>
                                    <span className='text-xl text-dark-gray dark:text-white'>{item.description}</span>
                                    <p className='text-base text-slate-500'>{item.symbol}</p>
                                </div>
                                <div className='balance-info'>
                                    <p className='py-2'>Balance</p>
                                    <span className='text-sm py-1 px-2 bg-green-100 text-green-500 rounded-lg'>{item.symbol}{(item.amount*0.01).toFixed(2)}</span>
                                </div>
                                <div className='balance-info'>
                                    <p className='py-2'>Escrow</p>
                                    <span className='text-sm py-1 px-2 bg-red-100 text-red-500 rounded-lg'>{item.symbol}{(item.escrow*0.01).toFixed(2)}</span>
                                </div>
                            </div>

                            <div className='w-full my-2 md:my-0 md:w-1/2 flex space-x-2 items-center justify-start md:justify-end'>
                                {
                                    item.action_type != 'AC_AD_FD_ONLY' ?
                                        <Link to='transfer-fund' className='lg:flex hidden user-balance cursor-pointer lg:w-[152px] w-[150px] h-[48px]
                                                                   items-center rounded-full relative  bg-purple pr-1.5 pl-4 lg:text-xl text-lg font-bold text-white'>Transfer</Link>:''
                                }
                                <Link to='add-fund' className='lg:flex hidden user-balance cursor-pointer lg:w-[152px] w-[150px] h-[48px]
                                                                   items-center rounded-full relative  bg-purple pr-1.5 pl-4 lg:text-xl text-lg font-bold text-white'>+Add Credit</Link>
                            </div>
                        </div>
                        ))
                        :
                        wallet.error ? 
                        (
                        <div className="md:flex items-center flex-wrap mt-3">
                            <p className='text-base'>Opps! An Error occurred, please try again</p>
                        </div>
                        )
                        :
                        (
                        <div className="md:flex items-center flex-wrap mt-3">
                            <p className='text-base'>No Wallets Found!</p>
                        </div>
                        )
                        }
                        {/* end of wallet balance */}
                    </div>
                </div>
                {/* END OF WALLET SECTION */}



            </div>

            {/*<div className='w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin'>*/}

            {/*    /!* COUPON SECTION *!/*/}
            {/*    <div className="lg:w-3/4 w-full mb-10 lg:mb-0">*/}
            {/*        <div className="wallet w-full  md:p-8 p-4 h-full max-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'>Coupons</h2>*/}
            {/*            {coupon.loading ?*/}
            {/*                <LoadingSpinner size='16' color='sky-blue' />*/}
            {/*                :*/}
            {/*                <CouponTable coupon={coupon} />*/}
            {/*            }*/}
            {/*        </div>*/}
            {/*    </div>*/}
            {/*    /!* END OF COUPON SECTION *!/*/}

            {/*</div>*/}
        </div>
      )
}

export default Balance