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'
import ConfirmAddFund from './ConfirmAddFund'

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
    })

    //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}))
        })
    }

    useEffect(()=>{
        getWalletList()
        getPaymentHistory()
    }, [])
    return (
        <Routes>
            <Route element={<Wallet />}>
                <Route path='add-fund' element={<AddFund payment={paymentHistory} />} />
                <Route path='add-fund/confirm-add-fund' element={<ConfirmAddFund payment={paymentHistory} />} />
                <Route path='transfer-fund' element={<TransferFund payment={paymentHistory} wallet={walletList} />} />
                <Route index element={<Balance 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