import React, { useState } from 'react'
import { useQuery } from "@tanstack/react-query";
import queryKeys from '../../../services/queryKeys'
import { getRecentLoans } from '../../../services/siteServices'
import Icons from '../../Icons'
import Orders from './Orders'
import Tickets from './Tickets'
import Tasks from './Tasks'

export default function RightAsideBar() {

    let [active, setActive] = useState('orders')

    const handleActiveMenu = (name) => {
        let lowerStr = name.toLowerCase()
        setActive(lowerStr)
    }

    const {data, isFetching, isError, error} = useQuery({
        queryKey: queryKeys.recent_loans,
        queryFn: () => getRecentLoans()
    })

    const loanList = data?.data?.loans

    return (
        <div className='w-full h-full flex flex-col gap-8'>
            {/* Menu */}
            <div className='grid grid-cols-3 gap-8'>
                <button name='orders' onClick={() => handleActiveMenu('orders')} className={`flex justify-center items-center px-2 py-3 large:px-4 large:py-5 rounded-md shadow-round_white bg-[#0E172E] text-white-body hover:scale-[1.1] ${active == 'orders' && 'scale-[1.2]'}`}>
                    <Icons name='dashboard' className='text-3xl' />
                </button>
                {/*<button name='tickets' onClick={() => handleActiveMenu('tickets')} className={`flex justify-center items-center px-2 py-3 large:px-4 large:py-5 rounded-md shadow-round_white bg-[#0E172E] text-white-body hover:scale-[1.1] ${active == 'tickets' && 'scale-[1.2]'}`}>*/}
                {/*    <Icons name='settings' className='text-3xl' />*/}
                {/*</button>*/}
                {/*<button name='tasks' onClick={() => handleActiveMenu('tasks')} className={`flex justify-center items-center px-2 py-3 large:px-4 large:py-5 rounded-md shadow-round_white bg-[#0E172E] text-white-body hover:scale-[1.1] ${active == 'tasks' && 'scale-[1.2]'}`}>*/}
                {/*    <Icons name='dashboard' className='text-3xl' />*/}
                {/*</button>*/}
            </div>

            {/* Body */}
            {(isFetching || isError) ?
                <div className=''>
                    {isError ? <p className='p-8 bg-white text-red-500'>{error.message}</p> :
                        <p className='text-white'>Loading...</p>}
                </div>
                :
                <div className='w-full'>
                    {active === 'orders' && <Orders data={loanList} />}
                    {/*{active == 'tickets' && <Tickets />}*/}
                    {/*{active == 'tasks' && <Tasks />}*/}
                </div>
            }
        </div>
    )
}