import React, { useContext, useEffect, useState, useCallback } from "react";
import debounce from "lodash/debounce"
import Footer from "../../components/home/footer/Footer";
import MobileFooter from "../../components/home/mobile/mobileFooter/MobileFooter";
import MobileHeader from "../../components/home/mobile/mobileHeader/MobileHeader";
import InternalPageHeader from "../../components/internalPageHeader/InternalPageHeader";
import cx from "classnames";
import { Input, Spin } from "antd";
import { useMediaQuery } from "react-responsive";
import Router,{useRouter } from "next/router";
import * as CategoryAPI from "../api/category";
import * as CategoriesAPI from "../api/categories";
import * as SearchAPI from "../../pages/api/search";
import shopConetxt from "../../context/shopConetxt";
import FindByBrands from "../../components/home/findByBrand/FindByBrands";
import CategoriesBreadcrumPage from "../../components/categoriesPage/categoriesBreadcrumPage";
import Breadcrumbs from "../../components/products/productHeader/Breadcrumbs";
import { SearchOutlined } from "@ant-design/icons";
import FeaturedProducts from "../../components/categoriesPage/featuredProducts/featuredProducts";
import BestSelleingProducts from "../../components/categoriesPage/bestSelling/bestSelleingProducts";
import { createBreadcrumb, getFlattenCategory } from "../../components/globalUtils/utils";
import { description, image } from "../../mockData/seoConstants";
import SEOHead from "../../components/SEOHead";

const CategoryPage = (props: any) => {
	const isMobile = useMediaQuery({ maxWidth: 768 });
	const [isDataLoading, setIsDataLoading] = useState(false);
	const [category, setCategory] = useState([]);
	const [categoryTreeFlat, setCategoryTree] = useState([]);
	const router = useRouter();
	const refreshData = () => router.replace(router.asPath);
	const [searchTerm, setSearchTerm] = useState("");
	const [autoComplete, setAutoComplete] = useState([]);
	useEffect(() => {
		CategoryAPI.fetchCategory().then((res) => {
			setCategory(res);
		});
		CategoryAPI.fetchCategoryTree().then((res) => {
			setCategoryTree(res.categories);
		});
	}, []);

	const _searchText = (text: string) => {
		SearchAPI.fetchAutoComplete(text).then((res) => {
			const array_strng: any = [];
			res.hits.hits.forEach((element: any) => {
				const name =
					element._source.name === null
						? element._source.product_number
						: element._source.name;
				const val = { value: name, label: name };
				array_strng.push(val);
			});

			setAutoComplete(array_strng);
		});
	};
	const handleAutoCompleteChange = useCallback(debounce(_searchText, 1000), []);
	const handleChange = (val: string) => {
		setSearchTerm(val)
		handleAutoCompleteChange(val)
	}
	const searchHandler = (): any => {
		const val = router.query.id;
		router.push({
			pathname: `/products/${val}`,
			query: {
				search: searchTerm,
				id: val,
			},
		});
	};

	return (
		<>
		<SEOHead
        title={searchTerm||"Categories - Indispare"}
        description={description}
        url={window.location.href} 
        image={image}
      />
			{isDataLoading ? (
				<div
					style={{
						width: "100%",
						height: "100vh",
						left: "50%",
						top: "50%",
						position: "absolute",
					}}
				>
					<Spin />
				</div>
			) : (
				<>
					{" "}
					{isMobile ? (
						<div style={{ padding: "1em" }}>
							<MobileHeader />
							<BestSelleingProducts />
							<FindByBrands />
						</div>
					) : (
						<>
							<InternalPageHeader
								catagories={category}
								categoryTree={categoryTreeFlat}
								refreshData={refreshData}
							/>
							<div
								style={{
									boxShadow: "0px 4px 40px rgba(0, 0, 0, 0.07)",
									margin: "0em 1em",
									padding: "0.2em",
									borderRadius: "0.5em",
									maxWidth: "100%",
								}}
							>
								<div
									style={{
										display: "flex",
										flexDirection: "row",
										justifyContent: "space-between",
										alignItems: "center",
										margin: "0.5em 1em",
									}}
								>
									<Breadcrumbs />
									<Input
										value={searchTerm}
										placeholder="Search within these results"
										onChange={(evt: any) => handleChange(evt)}
										style={{ width: 220 }}
										suffix={<SearchOutlined onClick={searchHandler} />}
										size={"middle"}
									/>
								</div>
								<div>
									<h2 className={cx("sectionSubTitle")}>
										{router.query.cateName}
									</h2>
								</div>
								<FeaturedProducts />

								<div style={{ margin: "0 1em" }}>
									<CategoriesBreadcrumPage />
								</div>

								<div
									style={{
										boxSizing: "border-box",
										boxShadow: "0px 4px 40px rgba(0, 0, 0, 0.07)",
										margin: "0em 1em",
										borderRadius: "0.5em",
									}}
								>
									<BestSelleingProducts />
								</div>

								<div>
									<FindByBrands />
								</div>
							</div>
						</>
					)}
					{isMobile && <MobileFooter />}
					<Footer />
				</>
			)}
		</>
	);
};
export default CategoryPage;