import {useEffect, useState} from 'react'
import { useQuery } from '@tanstack/react-query'

import {useLocation, useNavigate, Link} from 'react-router-dom'

import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
import RouteLinks from '../../RouteLinks'
import { getAccountView } from '../../services/siteServices'
import queryKeys from '../../services/queryKeys'

export default function AccountViewCom() {

    const {state:{memberUID}} = useLocation()
    const navigate = useNavigate()

    useEffect(()=>{
        if(!memberUID){
            navigate(RouteLinks.customerPage, {replace: true})
        }
    },[])

    const {data, isFetching, isError, error} = useQuery({
        queryKey: queryKeys.account_view,
        queryFn: () => {
            // const filterData = filter?.type ? {[filter?.type]: filter.id} : {}
            const reqData = {
                member_uid: memberUID
                // page,
                // ...filterData
            }
            return getAccountView(reqData)
        },
        staleTime: 0 //0 mins
    })
    const accountsViewData = data?.data?.products // ACCOUNT VIEW DATA
    const pagination = data?.data?.pagination
    console.log('DATA', data?.data)

    return (
        <div className='w-full flex flex-col gap-8'>
            <BreadcrumbCom title={`Account View [${memberUID}]`} paths={['Dashboard', 'Account View']}/>

            <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
                {isFetching ? 
                <>
                    <p className='text-slate-800'>Loading...</p>
                </>
                : isError ?
                    <p className='text-red-500'>{error.message}</p>
                :
                    <p className='text-slate-800'>coming soon</p>
                }

            </div>
        </div>
    )
}