import React, { useEffect, useState } from 'react';
import { useRouter } from 'next/router';
import MediaQuery from 'react-responsive';
import axios from 'axios';

import ProductHeader from '../components/products/productHeader';
import ProductFilters from '../components/products/filters';
import ProductsList from "../components/products/productsList";
import Pagination from '../components/products/pagination';
import Footer from "../components/home/footer/Footer";
import { productData } from '../mockData/products';
import { VIEW_TYPES } from '../constants/product';
import * as ProductAPIs from './api/products';
import MobileHeader from '../components/home/mobile/mobileHeader/MobileHeader';
import InternalPageHeader from '../components/internalPageHeader/InternalPageHeader';
import MobileFooter from '../components/home/mobile/mobileFooter/MobileFooter';
import * as SearchAPIs from './api/search';

import { Spin } from 'antd';
import EnquiryPage from '../components/enquiry/EnquiryPage';
import SEOHead from "../components/SEOHead";
import { seoDataMap } from "../mockData/seoData";
const seoData = seoDataMap['enquiry'];


export default function Enquiry(props: any) {
	const [productsPerPage, setProductsPerPage] = useState({});
	const [paginationData, setPaginationData] = useState({})
	const [products, setProducts] = useState<any>({ data: {}, meta: {} });
	const [viewType, setViewType] = useState(VIEW_TYPES.LIST);
	const [filterVisible, setFilterVisible] = useState(false);
	const [loading, setLoading]=useState(false);
	const [activeFilterConditions, setActiveFilterConditions] = useState({});

	
	const [breadCrumbData, setBreadCrumbData] = useState("");

	const router = useRouter();
	useEffect(() => {
		const categoryCode = router?.query?.id;
		const searchParams = router?.query?.search;
		if (searchParams || categoryCode) {
			let activeFilter = {}
			if (searchParams !== "") {
				activeFilter = {
					category_id: categoryCode === "All" ? 1 : categoryCode,
					name: searchParams,
					page: 1,
					limit: 30
				}
			} else {
				activeFilter = {
					category_id: categoryCode === "All" ? 1 : categoryCode,
					page: 1,
					limit: 30
				}
			}
			fetchProducts(activeFilter);
			setActiveFilterConditions(activeFilter);
		} else {
			fetchProducts({ categoryCode, searchParams })
            setActiveFilterConditions({category_id:1})
		}


		
		
	}, [router])

	const onViewTypeChange = (viewType: string) => {
		setViewType(viewType)
	}
	const fetchProducts = async (payload: any) => {
		await axios.get(ProductAPIs.fetchProductsList, { params: { ...payload } }).then(res => {
			setProducts(res.data);
		})
	}

	const toggleFilterVisible = () => {
		setFilterVisible(!filterVisible);
	}

	const handleCategorySelectFromSearchList = (categoryPath: string) => {
		setBreadCrumbData(categoryPath)
	}

	return (
		<div>
			<SEOHead {...seoData} />

			 <Spin spinning={loading} tip="Loading..." style={{ height: '100%',background:"rgba(0, 0, 0, 0.05)" }}>
			<MediaQuery maxWidth={768}>
				<MobileHeader />
				{/* <ProductHeader
					setViewType={onViewTypeChange}
					productInfo={products.meta}
					activeFilters={activeFilterConditions}
					fetchProducts={fetchProducts}
					breadCrumbData={breadCrumbData}
					setActiveFilters={(data: any) => setActiveFilterConditions(data)}
				/> */}
				<ProductFilters
					toggleFilterVisible={toggleFilterVisible}
					fetchProducts={fetchProducts}
					filterVisible={filterVisible}
					activeFilters={activeFilterConditions}
					setActiveFilters={(data: any) => setActiveFilterConditions(data)}
				/>
				
				<MobileFooter />
			</MediaQuery>

			<MediaQuery minWidth={769}>
				<InternalPageHeader />
				<div className="m-6 flex">
					<ProductFilters fetchProducts={fetchProducts}
						activeFilters={activeFilterConditions}
						setActiveFilters={(data: any) => setActiveFilterConditions(data)} />
					<div className="w-full">
                        <EnquiryPage/>
						{/* <ProductHeader
							setViewType={onViewTypeChange}
							viewType={viewType}
							productInfo={products.meta}
							activeFilters={activeFilterConditions}
							fetchProducts={fetchProducts}
							breadCrumbData={breadCrumbData}
							setActiveFilters={(data: any) => setActiveFilterConditions(data)}
						/>
						<ProductsList products={products.data || []} viewType={viewType} />
						<Pagination
							listMetaData={products.meta || {}}
							fetchProducts={fetchProducts}
							activeFilters={activeFilterConditions}
							setActiveFilters={(data: any) => setActiveFilterConditions(data)}
						/> */}
					</div>
				</div>
				<Footer />
			</MediaQuery>
			</Spin>
		</div>
		
	)
}