import odooApi from '@/core/api/odooApi'
import React, { useEffect, useState } from 'react'
import axios from 'axios';
import { useQuery } from 'react-query'
import Link from '@/core/components/elements/Link/Link'
import { createSlug } from '@/core/utils/slug'
import Image from 'next/image'
import { ChevronRightIcon } from '@heroicons/react/24/outline'
import useProductSearch from '../../../lib/product/hooks/useProductSearch';
import { SolrResponse } from "~/types/solr";
import { fetchPopulerProductSolr } from '../api/popularProduct'

const SOLR_HOST = process.env.SOLR_HOST

const PopularBrand = ({ category }) => {
    // const [topBrands, setTopBrands] = useState([]);

    // const fetchTopBrands = async () => {
    //     try {
    //         const items = await fetchPopulerProductSolr(`category_id_ids:(${category?.categoryDataIds?.join(' OR ')})`);
    //         const getTop12UniqueBrands = (prod) => {
    //             const brandMap = new Map();
    
    //             for (const product of prod) {
    //                 const { manufacture_name, manufacture_id, qty_sold } = product;
    
    //                 if (brandMap.has(manufacture_name)) {
    //                     // Update the existing brand's qty_sold
    //                     brandMap.set(manufacture_name, {
    //                         name: manufacture_name,
    //                         id: manufacture_id,
    //                         qty_sold: brandMap.get(manufacture_name).qty_sold + qty_sold
    //                     });
    //                 } else {
    //                     // Add a new brand to the map
    //                     brandMap.set(manufacture_name, {
    //                         name: manufacture_name,
    //                         id: manufacture_id,
    //                         qty_sold
    //                     });
    //                 }
    //             }
    
    //             // Convert the map to an array and sort by qty_sold in descending order
    //             const sortedBrands = Array.from(brandMap.values()).sort((a, b) => b.qty_sold - a.qty_sold);
    
    //             // Return the top 12 brands
    //             return sortedBrands.slice(0, 18);
    //         };
    
    //         // Using the fetched products
    //         const products = items;
    //         const top12UniqueBrands = getTop12UniqueBrands(products);
    
    //         // Set the top 12 brands to the state
    //         setTopBrands(top12UniqueBrands);
    //     } catch (error) {
    //         console.error("Error fetching data from Solr", error);
    //         throw error;
    //     }
    // }

    // useEffect(() => {
    //     fetchTopBrands();
    // }, [category]);

    return (
        <div className='flex flex-col'>
            {/* <div className='grid grid-cols-3 max-h-full w-full gap-2'>
                {topBrands.map((brand, index) => (
                    <div key={index} className='w-full flex items-center justify-center pb-2'>
                        <Link
                            href={createSlug('/shop/brands/', brand.name, brand.id)}
                            className='category-mega-box__child-one w-8 h-full flex items-center justify-center '
                        >
                            <Image src={`https://erp.indoteknik.com/api/image/x_manufactures/x_logo_manufacture/${brand.id}` } alt={`${brand.name}`} width={104} height={44} objectFit='cover' />
                        </Link>
                    </div>
                ))}
            </div> */}
            {/* {topBrands.length > 8 && (
                <div className='flex hover:bg-gray_r-8/35 rounded-10'>
                    <Link
                        href={createSlug('/shop/category/', category.name, category.id)}
                        className='category-mega-box__child-one flex items-center gap-4 font-bold hover:ml-4'
                    >
                        <p className='mt-2 mb-0 text-danger-500 font-semibold'>Lihat Semua Brand</p>
                        <ChevronRightIcon className='w-4 text-danger-500 font-bold' />
                    </Link>
                </div>
            )} */}
        </div>
    )
}

export default PopularBrand;