import React, {memo} from 'react'
import getImage from "../../../utils/getImage";
import { useQuery } from '@tanstack/react-query';
import queryKeys from '../../../services/queryKeys';
import { getProductTemplateData } from '../../../services/services';

const SiteTemplateSelector = memo(({name='Full Name', data, productData}) =>{

        const {data:templateData, isFetching, isError, error} = useQuery({
            queryKey: queryKeys.productTemplateData,
            queryFn: () => {
                let reqData = {
                    token: localStorage.getItem('token'), // USER TOKEN
                    uid: localStorage.getItem('uid'), // USER UID
                    product_id: productData?.product_id
                }
            return getProductTemplateData(reqData)
            },
            staleTime: 0
        })

        const templateResponse = templateData?.data
        const templates = templateResponse?.templates

        // console.log('data Template', templates)
        // console.log("Page data == ", data)
        return (
            <div className="page-account-form">
                <div className="p-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">
                        <>
                        {!templates.length ?
                            <p>No data Found</p>
                            :
                            templates.map(template => (
                                <div key={template.template_uid} className="col-xl-6 col-sm-6">
                                    <div className="card card-statistics">
                                        <div className="card-body">
                                            <div className="text-center p-2">
                                                <div className="mb-2">
                                                    <img  src={getImage('file-icon/svg.png')} alt={template.title} />
                                                </div>
                                                <h4 className="mb-0">{template.title}</h4>
                                                <a href="#" className="btn btn-light">Activate</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            ))
                        }
                            {/* {Object.entries(data)?.map(([key, value]) => (
                                <div key={key} className="col-xl-6 col-sm-6">
                                    <div className="card card-statistics">
                                        <div className="card-body">
                                            <div className="text-center p-2">
                                                <div className="mb-2">
                                                    <img  src={getImage(value.banner)} alt={value.title} />
                                                </div>
                                                <h4 className="mb-0">{value.title}</h4>
                                                <a href="javascript:void(0)" className="btn btn-light">Activate</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            ))} */}
                        </>
                    </div>
                    }
                </div>
            </div>
        )
    }
)
export default SiteTemplateSelector