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'
import CustomerAccountView from "./CustomerAccountView";
import AccountProfileView from "./AccountProfileView";
import CustomerSubscriptionsView from "./CustomerSubscriptionsView";
import CustomerPaymentsView from "./CustomerPaymentsView";

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 // ACCOUNT VIEW DATA
    const account_info = accountsViewData?.account
    const account_profile = accountsViewData?.account_profile
    const subscriptions = accountsViewData?.subscriptions
    const payments = accountsViewData?.payments
    // console.log('DATA', payments, subscriptions)

    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>
                :
                        <>
                            <CustomerAccountView accountInfo={account_info} />
                            <AccountProfileView profile={account_profile} />
                            <CustomerSubscriptionsView subscriptions={subscriptions} memberUID={memberUID} />
                            <CustomerPaymentsView payments={payments} />
                        </>

                }

            </div>
        </div>
    )
}