import React, { useEffect, useState } from 'react'
import {Routes, Route, Outlet, Navigate} from 'react-router-dom'
import usersService from '../../services/UsersService'

import Layout from '../Partials/Layout'

import Balance from './Balance'
import TransferFund from './TransferFund'
import AddFund from './AddFund'
import AddRecipient from './AddRecipient'
import ConfirmTransfer from './ConfirmTransfer'

function Wallet() {
  return (
    <Layout>
        <Outlet />
    </Layout>
  )
}





const WalletRoutes = () => {
    const apiCall = new usersService()

    let [walletList, setWalletList] = useState({ // FOR WALLET LIST
        loading: true,
        data: [],
        error: false
    })

    let [paymentHistory, setPaymentHistory] = useState({ // FOR PAYMENT HISTORY
        loading: true,
        data: [],
        error: false
    })

    let [purchaseHistory, setPurchaseHistory] = useState({ // FOR PURCHASE HISTORY
        loading: true,
        data: [],
        error: false
    })

    let [couponHistory, setCouponHistory] = useState({ // FOR COUPON HISTORY
        loading: true,
        data: [],
        error: false
    })

    //FUNCTION TO GET WALLET LIST
    const getWalletList = ()=>{
        apiCall.getUserWallets(null).then((res)=>{
            if(res.data.internal_return < 0){ // success but no data
                setWalletList(prev => ({...prev, loading: false}))
                return
            }
            setWalletList(prev => ({...prev, loading: false, data: res.data.result_list}))
        }).catch((error)=>{
            setWalletList(prev => ({...prev, loading: false, error: true}))
        })
    }

    //FUNCTION TO GET PAYMENT HISTORY
    const getPaymentHistory = ()=>{
        apiCall.getPaymentHx().then((res)=>{
            if(res.data.internal_return < 0){ // success but no data
                setPaymentHistory(prev => ({...prev, loading: false}))
                return
            }
            setPaymentHistory(prev => ({...prev, loading: false, data: res.data.result_list}))
        }).catch((error)=>{
            setPaymentHistory(prev => ({...prev, loading: false, error: true}))
        })
    }

    //FUNCTION TO GET PURCHASE HISTORY
    const getPurchaseHistory = ()=>{
        apiCall.getPurchaseHx().then((res)=>{
            if(res.data.internal_return < 0){ // success but no data
                setPurchaseHistory(prev => ({...prev, loading: false}))
                return
            }
            // console.log('purchase',res.data)
            setPurchaseHistory(prev => ({...prev, loading: false, data: res.data.result_list}))
        }).catch((error)=>{
            setPurchaseHistory(prev => ({...prev, loading: false, error: true}))
        })
    }

     //FUNCTION TO GET COUPON HISTORY
     const getCouponHistory = ()=>{
        apiCall.getCouponHx().then((res)=>{
            if(res.data.internal_return < 0){ // success but no data
                setCouponHistory(prev => ({...prev, loading: false}))
                return
            }
            setCouponHistory(prev => ({...prev, loading: false, data: res.data.result_list}))
        }).catch((error)=>{
            setCouponHistory(prev => ({...prev, loading: false, error: true}))
        })
    }

    useEffect(()=>{
        getWalletList()
        getPaymentHistory()
        getPurchaseHistory()
        getCouponHistory()
    }, [])
    return (
        <Routes>
            <Route element={<Wallet />}>
                <Route path='add-fund' element={<AddFund payment={paymentHistory} />} />
                <Route path='transfer-fund' element={<TransferFund payment={paymentHistory} wallet={walletList} />} />
                <Route index element={<Balance payment={paymentHistory} purchase={purchaseHistory} coupon={couponHistory} wallet={walletList} />} />
                <Route path='transfer-fund/add-recipient' element={<AddRecipient />} />
                <Route path='transfer-fund/confirm-transfer' element={<ConfirmTransfer payment={paymentHistory} wallet={walletList} />} />
                <Route path='*' element={<Navigate to='/' />} />
            </Route>
        </Routes>
    )
}

export default WalletRoutes