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

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.right_sidebar],
        queryFn: () => {
            // const filterData = filter?.type ? {[filter?.type]: filter.id} : {}
            // const reqData = {
            //     page,
            //     ...filterData
            // }
            return getRightSidebar()
        },
        // staleTime: 0 //0 mins
    })
    const recentData = [] // RECENT LIST
    
    // const recentData = data?.data // RECENT LIST
    // const pagination = data?.data?.pagination
    // console.log('RIGHT', data?.data)

  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 */}
        {active === 'orders' && <RecentPaymentsBar data={recentData} isFetching={isFetching} isError={isError} error={error}  />}
        {active === 'tickets' && <Tickets data={recentData} isFetching={isFetching} isError={isError} error={error}  />}
        {active === 'tasks' && <Tasks data={recentData} isFetching={isFetching} isError={isError} error={error}  />}
    </div>
  )
}