import React, {useEffect} from 'react'
import { useMutation } from '@tanstack/react-query'
import { topBar } from '../../services/services'

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)
    },[])
    
    const data = topBarData?.data?.data?.top_bar // top bar data

  return (
    <>
        {topBarData.isPending ? 
        <>
            <div className="col-12">
                <div className="card p-4">
                    <p className='text-mute'>Loading...</p>
                </div>
            </div>
        </>
        : topBarData.error ?
        <div className="col-12">
            <div className="card p-4">
                <p className='text-danger'>{topBarData.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">
                    <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>
            )
        })}
        </>
        }
    </>
  )
}