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

import Footer from "../../components/home/footer/Footer";

import MobileHeader from "../../components/home/mobile/mobileHeader/MobileHeader";
import InternalPageHeader from "../../components/internalPageHeader/InternalPageHeader";
import MobileFooter from "../../components/home/mobile/mobileFooter/MobileFooter";
import * as CategoryAPI from "../api/category";
import shopConetxt from "../../context/shopConetxt";
import Loading from "../../components/Loading";
import ProductListCommon from "../../components/common/productCommon/ProductListCommon";
import Head from "next/head";
import * as ProductAPIs from "../api/products";
import { get } from "lodash";
import * as commonAPI from "../api/common";
import { baseUrl } from "../../constants/urls";
import { fetchCatgories } from "../api/categories";
import { VIEW_TYPES } from "../../constants/product";
import * as CommonAPI from "../api/common";
import axios from "axios";
import SEOHead from "../../components/SEOHead";
import { image, url } from "../../mockData/seoConstants";
export default function Products() {

	const {
		setIsFiltersLoading,
		setCategoryTreeNested,
		setIsProductListLoading
	} = useContext(shopConetxt);
	let initLoadEffect = true;
	const [category, setCategory] = useState([]);
	const [categoryTree, setCategoryTree] = useState([]);
	const [stateArray, setStateArray] = useState([]);
	const [productsES, setProductES] = useState<any>({
		hits: { total: { value: 0 }, hits: [] },
	});
	const [brandName, setBrandName] = useState<any>();
	const [viewType, setViewType] = useState(VIEW_TYPES.GRID);
	const [initLoad, setInitload] = useState(false);
	const [filterVisible, setFilterVisible] = useState(false);
	const router = useRouter();
	const refreshData = () => router.replace(router.asPath);
	const [activeFilterConditions, setActiveFilterConditions] = useState({});
	const [categoryRoutId, setCategoryRoutId] = useState<any>("ALL");
	const [loginRes, setLoginRes] = useState<any>({});
	const [metaData, setMetaBata] = useState<any>({});
	const [imageUrl, setImageUrl] = useState<any>();
	const [state, setState] = useState({
		isRouteChanging: false,
		loadingKey: 0,
	});

	useEffect(() => {
		const val: any = localStorage.getItem("loginDetails");
		const loginDetails = JSON.parse(val);
		const cityPincode: any = localStorage.getItem("PinCode");
		// console.log(cityPincode, "cityPincode");

		setLoginRes(loginDetails);
		// console.log(router,"router");
		// setStateArray(props?.stateArray)



		if (initLoadEffect) {
			const categoryCode = router?.query?.id;
			const searchParams = router?.query?.search;
			const sellerId = router?.query?.sellerid;
			const brandId = router?.query?.brandId;
			const name = router?.query?.brand;
			const urlImg = router?.query?.url;

			setBrandName(name);
			setImageUrl(urlImg);

			const __activeFilterES: any = {
				name: "",
				subText: "",
				category_ids: "",
				brands: [],
				attributes: [],
				product_type: 2,
				vendor_id: [],
				price_range: {
					min: 0,
					max: 0,
				},
				from: 0,
				size: 30,
			};

			if (searchParams != "" && searchParams != undefined) {
				__activeFilterES.name = searchParams;
			}

			if (sellerId != "" && sellerId != undefined) {
				__activeFilterES.vendor_id = sellerId;
			}

			if (
				categoryCode != "All" &&
				categoryCode != "ALL" &&
				categoryCode != "" &&
				categoryCode != undefined
			) {
				__activeFilterES.category_ids = categoryCode;
			}

			if (brandId != "" && brandId !== undefined) {
				__activeFilterES.brands.push(brandId);
			}
			fetchProductsES(__activeFilterES);
			setActiveFilterConditions(__activeFilterES);
			setCategoryRoutId(categoryCode);
			initLoadEffect = false;

		}

	}, [router]);

	const fetchProductsES = async (payload: any) => {
		// setIsProductListLoading(true);
		const val: any = localStorage.getItem("loginDetails");
		const loginDetails = JSON.parse(val);
		const searchParams1 = router?.query?.search;
		const discountRange = router?.query?.pd_rd_d;

		CommonAPI.getRequest(`${baseUrl}/api/check-groupbykey/${searchParams1}`).then(async (resData) => {
			// console.log(resData,"resData")

			// setIsGroupKey(resData?.data?.status)

			const activeFilterES: any = {
				from: payload.from,
				size: payload.size,
				query: {
					bool: {
						must: [],
						filter: [],
					},
				},
				sort: [],
				filterable_attributes: {},
			};

			activeFilterES.query.bool.filter.push({
				term: { product_type: payload.product_type },
			});

			if (payload.category_ids != "") {
				const _id: any = +payload.category_ids;
				activeFilterES.query.bool.filter.push({
					terms: { category_ids_new: [_id] },
				});
			}

			if (payload.name != "") {
				let variable = {}
				if (resData?.data?.status == true) {
					variable = { "match_phrase": { "groupby_key": { "query": payload.name, "slop": 2 } } }
				} else {
					variable = {
						"multi_match": {
							"query": payload.name,
							"fields": [
								"groupby_key^1000",
								"search_keywords^1000",
								"sku^500",
								"brand_label^500",
								// "name^800",
								// "sku^200",
								// "category_names^100"
							],
							"type": "best_fields",
							"operator": "and",
							"fuzziness": "AUTO"




						}
					}
				}
				activeFilterES.query.bool.must.push(variable);
			}
			if (payload.subText != "") {
				activeFilterES.query.bool.must.push({
					query_string: {
						fields: ["name", "sku", "brand_label"],
						query: "*" + payload.subText + "*",
						type: "best_fields",
					},
				});
			}

			if (Array.isArray(payload.brands) && payload.brands.length > 0) {
				activeFilterES.query.bool.filter.push({
					terms: { brand: [...payload.brands] },
				});
			}

			if (payload.vendor_id != "") {
				activeFilterES.query.bool.must.push({
					terms: { vendor_id: [payload.vendor_id] },
				});
			}
			if (payload.sort && Object.keys(payload.sort).length > 0) {
				activeFilterES.sort = payload.sort;
				if (payload.sort.f_price == "asc") {

					activeFilterES.query.bool.must.push({
						range: {
							f_price: {
								gt: "0"
							}
						},
					});
				}

			}


			if (discountRange) {
				activeFilterES.query.bool.must.push({
					range: {
						selling_price_discount: { "gte": 50, "lte": 70 }
					},

				});
				activeFilterES.sort.push({
					"selling_price_discount": "desc"
				})
			}

			if (payload.price_range.max > 0) {
				activeFilterES.query.bool.must.push({
					range: {
						f_price: {
							gte: payload.price_range.min,
							lte: payload.price_range.max,
						},
					},
				});
			}
			if (
				payload.filterable_attributes &&
				Object.keys(payload.filterable_attributes).length > 0
			) {
				const _filterable_attributes_keys = Object.keys(
					payload.filterable_attributes
				);
				for (const _attr of _filterable_attributes_keys) {
					activeFilterES.query.bool.filter.push({
						terms: {
							["filterable_attributes." + _attr]: [
								...payload.filterable_attributes[_attr],
							],
						},
					});

				}
			}
			delete activeFilterES.filterable_attributes;

			const _activeFilterES = {
				q: activeFilterES,
				index: "product_details",
			};

			handleRouteChangeStart();

			await axios
				.get(ProductAPIs.fetchProductsListES, { params: { ..._activeFilterES } })
				.then((res) => {
					setIsProductListLoading(false);
					handleRouteChangeEnd();
					if (res?.data) {
						const _response = res.data;
						setMetaBata(res.data.metaData);
						if (_response.hits && _response && _response) {
							setProductES(_response);
							//console.log(res);
							// if (res?.data?.hits?.hits?.length == 0) {
							// 	if (_.isEmpty(loginDetails)) {
							// 		setIsOTPModalVisible(!isOTPModalVisible);
							// 	}else {
							// 		router.push(
							// 			{
							// 				pathname: `/rfq`
							// 			},

							// 		);
							// 	}
							// }
							// setLoadPage(true);
						}
					}
				});
		})
	};

	const onViewTypeChange = (viewType: string) => {
		setViewType(viewType);
	};

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

	const handleRouteChangeStart = () => {

		setState((prevState) => ({
			...prevState,
			isRouteChanging: true,
			loadingKey: prevState.loadingKey ^ 1,
		}));
	};
	const handleRouteChangeEnd = () => {
		if (!initLoad)
			setInitload(true);
		setState((prevState) => ({
			...prevState,
			isRouteChanging: false,
		}));
	};

	useEffect(() => {
		setIsFiltersLoading(true);
		fetchCatgories({ category_id: 1 }).then((res) =>
			setCategoryTreeNested(get(res, "categories[0]", {}))

		);
		CategoryAPI.fetchCategory().then((res) => {
			setCategoryTreeNested(get(res, "categories", {}))
			setCategory(res);
			setIsFiltersLoading(false);
		});
		CategoryAPI.fetchCategoryTree().then((res) => {
			setCategoryTree(res.categories);
			setIsFiltersLoading(false);
		});
		commonAPI.getRequest(`${baseUrl}/api/indian-states`).then((res) => {
			setStateArray(res?.data)
		})

	}, [router]);


	return (
		<>
			<Loading isRouteChanging={state.isRouteChanging} key={state.loadingKey} />
			<Head>
				<script async src="https://www.googletagmanager.com/gtag/js?id=G-1QX8VSDY6Z"></script>
				<script src="/google.js" />
			</Head>
			<SEOHead
			title={metaData?.title}
			description={metaData?.description}
			url={`${url}${router?.asPath}`} 
			image={image}
      		/>
			<MediaQuery maxWidth={768}>
				<MobileHeader stateArray={stateArray} />
				<ProductListCommon stateArray={stateArray} />
				<MobileFooter page={"product"} stateArray={stateArray} />
			</MediaQuery>

			<MediaQuery minWidth={769}>
				<InternalPageHeader
					refreshData={refreshData}
					catagories={category}
					categoryTree={categoryTree}
					stateArray={stateArray}
				/>
				<ProductListCommon stateArray={stateArray} />
				<Footer stateArray={stateArray} />
			</MediaQuery>
		</>
	);
}