import { useQuery } from '@tanstack/react-query'
import React from 'react'
import { productData } from '../../services/services'
import queryKeys from '../../services/queryKeys'
import productPath from "../../utils/productpath";
export default function Products() {

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

    const products = data?.data?.products_data?.products

  return (
    <>
        <div className="card card-statistics h-100 mb-0 panel_round_c1">
            <div className="card-header">
                <h4 className="card-title">My Products</h4>
            </div>
            <div className="card-body pb-0">
            {isFetching ? 
                <>
                    <div className="row">
                        <div className="col-12">
                            <p className='text-mute'>Loading...</p>
                        </div>
                    </div>
                </>
                : isError ?
                <div className="row">
                    <div className="col-12">
                        <p className='text-danger'>{error.message}</p>
                    </div>
                </div>
                :
                <div className="row m-b-20">
                    {products && products.map((product, index) => (
                        <div key={product.uid+index} className="col-xxs-6 col-xl-4 col-xxl-6 mb-2 mb-xxl-0 ">
                            <a href={productPath(product?.uid)}  >
                                <div className="d-flex align-items-center extraProductCard">
                                    <div className="icon-container img-icon m-r-20 bg-light-gray rounded">
                                        <i className="fa fa-cart-plus text-primary"></i>
                                    </div>
                                    <div className="report-details">
                                        <p>{product?.status}</p>
                                        <h4>{product?.description}</h4>
                                    </div>
                                </div>
                            </a>

                        </div>
                    ))}
                    {/*<div style={{backgroundColor: 'green'}} className="col-xxs-6 col-md-4 col-xxl-6 mb-2 mb-xxl-0">*/}
                    {/*    <div className="d-flex align-items-center">*/}
                    {/*        <div className="icon-container img-icon m-r-20 bg-light-gray rounded">*/}
                    {/*            <i className="fa fa-dollar text-primary"></i>*/}
                    {/*        </div>*/}
                    {/*        <div className="report-details">*/}
                    {/*            <p>Annual Revenue</p>*/}
                    {/*            <h3>$40,516</h3>*/}
                    {/*        </div>*/}
                    {/*    </div>*/}
                    {/*</div>*/}
                </div>
            }
                <div className="apexchart-wrapper">
                    <div id="ecommerce5" className="chart-fit"></div>
                </div>
            </div>
        </div>
    </>
  )
}