import { useQuery } from '@tanstack/react-query'
import { topBar } from '../../services/services'
import queryKeys from '../../services/queryKeys'

export default function TopBar() {

//   const topBarData = useMutation({
//     mutationFn: (reqData) => {
//         return topBar(reqData)
//     },
//     onError: (error) => {
//         console.log(error)
//     },
//       onSuccess: (res) => {
//         if(res?.data?.resultCode != '0'){
//             throw({message: 'Something went wrong'})
//         }
//     }
//   })

//     useEffect(()=>{
//       let reqData = {
//         token: localStorage.getItem('token'), // USER TOKEN
//         uid: localStorage.getItem('uid') // USER UID
//       }
//       topBarData.mutate(reqData)
//     },[])
    
    let reqData = {
        token: localStorage.getItem('token'), // USER TOKEN
        uid: localStorage.getItem('uid') // USER UID
    }
    const {data:topBarData, isFetching, isError, error} = useQuery({
        queryKey: queryKeys.topBar,
        queryFn: () => topBar(reqData)
    })
    const data = topBarData?.data?.top_bar // top bar data

  return (
    <>
        {isFetching ? 
        <>
            <div className="col-12">
                <div className="card p-4">
                    <p className='text-mute'>Loading...</p>
                </div>
            </div>
        </>
        : isError?
        <div className="col-12">
            <div className="card p-4">
                <p className='text-danger'>{error.message}</p>
            </div>
        </div>
        :
        <>
        {data && data?.map((item, index)=>{
            let textColor = item?.description == 'Contacts' ? 'text-danger' : item?.description == 'Site Traffic' ? 'text-primary' : item?.description == 'Appointments' ? 'text-orange' : 'text-success'
            return (
            <div key={item.id + index} className="col-sm-6 col-xxl-3">
                <div className={`card card-statistics ecommerce-contant overflow-h ${item?.extra_style} `}>
                    <div className="card-body p-0">
                        <div className="d-flex m-b-0 ecommerce-contant-text h-100">
                            <div className="w-100">
                                <div className="row p-3">
                                    <div className="col">
                                        <h3 className="mb-0">{item?.value || 0}</h3>
                                        <small className="d-block">{item?.data_span}</small>
                                    </div>
                                    <div className="col text-right">
                                        <h5 className="text-muted mb-0"><a href={item?.link}>{item?.description}</a></h5>
                                    </div>
                                </div>
                                <div className="apexchart-wrapper">
                                    <div id="ecommercedemo3" className="chart-fit"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            )
        })}
        </>
        }
    </>
  )
}