'use client'

import NotFound from '@/src/components/not-found'
import { animations } from '@/src/constants/animations'
import { useAppDispatch, useAppSelector } from '@/src/redux/hooks'
import { clearProductFilters, setProductFilters } from '@/src/redux/slice/products-slice'
import { apiEndpoints } from '@/src/server_api/config/api.endpoints'
import useApi from '@/src/server_api/hooks/use-api'
import { APIFetch } from '@/src/server_api/utils/api-fetch'
import ProductFilter from '@/src/shared-pages/product-listing/product-filter'
import ProductHeader from '@/src/shared-pages/product-listing/product-header'
import ProductList from '@/src/shared-pages/product-listing/product-list'
import { useSearchParams } from 'next/navigation'
import React, { useEffect, useState } from 'react'

const ProductListing = () => {

    const dispatch = useAppDispatch();
    const [clearFilters, setClearFilters] = useState(false);
    const {
        filters
    } = useAppSelector(
        (state) => state.products
    );

    const searchParams = useSearchParams();
    const category = filters?.category || searchParams.get("category");
    useEffect(() => {
        const category = searchParams.get("category");

        if (category) {
            dispatch(
                setProductFilters({
                    category,
                })
            );
        }
    }, [searchParams, dispatch]);
    const displayName = category
        ?.split(/[,-]/)
        .slice(0, 2)
        .map((item) =>
            item
                .replace(/_/g, " ")
                .replace(/\b\w/g, (char) => char.toUpperCase())
        )
        .join(" ");

    const productSearchParams = React.useMemo(
        () => ({
            getcategory: 1,
            categories: filters.category,
            brand: filters.brand,
            sortby: filters.sortby,
            sortorder: filters.sortorder,
            minprice: filters.minPrice,
            maxprice: filters.maxPrice,
            limit: 20,
            random: 1,
            getbrand: 1,
        }),
        [
            filters.category,
            filters.brand,
            filters.sortby,
            filters.sortorder,
            filters.minPrice,
            filters.maxPrice
        ]
    );

    const { data, isLoading } = useApi({
        apiEndpoint: apiEndpoints.products.product_list,
        enableFetchApi: true,
        searchParams: productSearchParams,
    });

    const { data: categories } = useApi({
        apiEndpoint: apiEndpoints.products.categories,
        enableFetchApi: true,
        searchParams: {
            limit: 50
        }
    });

    const { data: brands } = useApi({
        apiEndpoint: apiEndpoints.products.brands,
        enableFetchApi: true
    });

    const handleClearFilters = () => {
        dispatch(clearProductFilters());
        setClearFilters(true);
        setTimeout(() => {
            setClearFilters(false);
        }, 100);
    };
    console.log("brand filters.....", filters?.brand)
    return (
        <div className="bg-white">

            <ProductHeader
                onFilterChange={(value: any) => {
                    dispatch(setProductFilters(value));
                }}
                categories={categories || []}
                totalCount={data?.totalCount || 0}
                brands={brands}
                clearFilters={handleClearFilters}
                categoryName={displayName}
            />
            <div
                className="
                    mx-auto
                    px-5
                    py-10
                    lg:px-26
                    grid
                    grid-cols-1
                    gap-8
                    lg:grid-cols-[300px_1fr]
                "
            >
                <aside className="hidden sm:block">
                    <ProductFilter
                        categories={categories}
                        brands={brands}
                        clearFilters={clearFilters}
                        onFilterChange={(value: any) => {
                            dispatch(setProductFilters(value));
                        }}
                    />
                </aside>
                <main>
                    <APIFetch
                        lengthCheckObject={data?.products}
                        isLoading={isLoading}
                        animatedLoading={animations.listBlock}
                        blocks={8}
                        messageContent={<NotFound />}
                    >
                        <ProductList
                            products={data?.products || []}
                            totalCount={data?.totalCount || 0}
                        />
                    </APIFetch>
                </main>
            </div>
        </div>
    )
}

export default ProductListing;