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

export default function TopBar() {

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

    const topData = data?.data?.bar_data?.top_bar
    console.log('topData', topData)

  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>
        :
        <>
        {topData && topData?.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">
                    <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">{item?.description}</h5>
                                        <strong className={`${textColor} m-t-5`}><i
                                            className="zmdi zmdi-long-arrow-up font-weight-bold"></i> N/A</strong>
                                    </div>
                                </div>
                                <div className="apexchart-wrapper">
                                    <div id="ecommercedemo3" className="chart-fit"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            )
        })}
        </>
        }
    </>
  )
}