import React, { useState, FC, useCallback, useEffect } from "react";
import cx from "classnames";
import { Radio, Menu, Dropdown, Space, Input } from "antd";
import { SearchOutlined, DownOutlined } from "@ant-design/icons";
import MediaQuery from "react-responsive";
import { isEmpty, get, debounce, omit } from "lodash";

import Breadcrumbs from "./Breadcrumbs";
import {
	BRAND_PRICE_RADIO,
	VIEW_TYPE_VS_LABLES,
	SORT_OPTIONS_VS_LABLES,
	SORT_TYPES,
	VIEW_OPTIONS,
	SORT_OPTIONS,
	SORT_TO_PAYLOAD_CONVERT,
} from "./productHeader.constants";
import styles from "./producntHeader.module.scss";
import { useRouter } from "next/router";

const ProductHeaders: FC<any> = ({
	viewType,
	setViewType,
	productInfo,
	activeFilters,
	fetchProducts,
	breadCrumbData,
	setActiveFilters,
	productHeaderTitle,
}) => {
	const [radioStatus, setradioStatus] = useState(BRAND_PRICE_RADIO[0].value);
	const [searchText, setsearchText] = useState("");
	const [sortType, setSortType] = useState(SORT_TYPES.POPULARITY);
	const [imageUrl, setImageUrl] = useState<any>();
	const router = useRouter();
	useEffect(() => {
		setImageUrl(router?.query?.url);
	}, [router])
	
	const handleDebounce = (inputText: string, activeFilter: any) => {
		let updatedFilterValue;
		if (!isEmpty(inputText)) {
			updatedFilterValue = { ...activeFilter, second_name: inputText };
		} else {
			updatedFilterValue = omit({ ...activeFilter }, "second_name");
		}
		fetchProducts(updatedFilterValue);
		setActiveFilters(updatedFilterValue);
	};
	const debounceFn = useCallback(debounce(handleDebounce, 1000), []);
	const onChange = (event: any) => {
		setradioStatus(event.target.value);
	};

	const onSearhTextChange = (event: any) => {
		setsearchText(event.target.value);
		debounceFn(event.target.value, activeFilters);
	};

	const onViewChange = (event: any) => {
		setViewType(event.key);
	};

	const onSortTypeChange = (event: any) => {
		setSortType(event.key);
		fetchProducts({ ...activeFilters, ...SORT_TO_PAYLOAD_CONVERT[event.key] });
		setActiveFilters({
			...activeFilters,
			...SORT_TO_PAYLOAD_CONVERT[event.key],
		});
	};

	const viewTypeMenu = <Menu onClick={onViewChange} items={VIEW_OPTIONS} />;

	const sortTypeMenu = (
		<Menu
			onClick={onSortTypeChange}
			items={SORT_OPTIONS}
		/>
	);
	const isFreeSearch = () => {
		return isEmpty(get(activeFilters, 'category_id', {})) || get(activeFilters, 'category_id') === 1

	}



	return (
		<div className={cx("w-full", styles.productHeaderWrapper)}>
			<MediaQuery minWidth={1223.98}>
				{!isFreeSearch()  || !imageUrl ? <Breadcrumbs /> : null}
				
				<div className="flex justify-between mt-6">
					<div>
						{productHeaderTitle ? (
							<div className={styles.productSearchResultDesc}>
								{productHeaderTitle}
							</div>
						) : (
							<>
								{isFreeSearch() ? (
									<div className={styles.productSearchResultDesc}>
										{/* {`Search results for ${get(
											activeFilters,
											"name",
											"' '"
										)} in All Categories`} */}
									</div>
								) : (
									<div className={styles.productHeaderText}>
										{breadCrumbData || productHeaderTitle}
									</div>
								)}
							</>
						)}

						{productInfo !== undefined && (
							<div className={cx(styles.pproductCount, "mt-5")}>
								({productInfo.from}-{productInfo.to} products of{" "}
								{productInfo.total})
							</div>
						)}
					</div>
					<div>
						<Space size="middle">
							{/* <Radio.Group
								options={BRAND_PRICE_RADIO}
								onChange={onChange}
								value={radioStatus}
								optionType="button"
								buttonStyle="solid"
								size={"middle"}
							/> */}
							<Input
								value={searchText}
								placeholder="Search within these results"
								onChange={onSearhTextChange}
								style={{ width: 200 }}
								suffix={<SearchOutlined />}
								size={"middle"}
							/>
							<Dropdown.Button
								icon={<DownOutlined />}
								overlay={viewTypeMenu}
								size={"middle"}
							>
								{VIEW_TYPE_VS_LABLES[viewType]}
							</Dropdown.Button>
							<Dropdown.Button
								icon={<DownOutlined />}
								overlay={sortTypeMenu}
								size={"middle"}
							>
								{SORT_OPTIONS_VS_LABLES[sortType]}
							</Dropdown.Button>
						</Space>
					</div>
				</div>
			</MediaQuery>
			<MediaQuery maxWidth={769}> 
				<div className={styles.productHeaderTextMobile}>
					{productHeaderTitle ? productHeaderTitle : "All Products"}
				</div>
			</MediaQuery>
		</div>
	);
};

export default ProductHeaders;