import React, { useState, useEffect, FC, useCallback } from 'react';
import { Slider, Input } from 'antd';
import { isEmpty, debounce, omit } from 'lodash';
import cx from 'classnames';
import MediaQuery from 'react-responsive';

import { fetchMaxPrice } from '../../../pages/api/max_price_by_category';

import styles from './filters.module.scss';

const PriceRangeFilter: FC<any> = ({
	minPrice = 0,
	maxPrice,
	fetchProducts,
	activeFilters,
	setActiveFilters,
	handleSelectionEvent
}) => {
	const [upperLimit, setUpperLimit] = useState(1000);
	const [lowerLimit, setLowerLimit] = useState(minPrice);
	//const [maxPrice, setMaxPrice] = useState(1000);


	useEffect(() => {
		if (maxPrice !== 1000) {
			
			setUpperLimit(maxPrice)
		}
	}, [maxPrice])
	const handleDebounce = (minRange: number, maxRange: number, activeFilters: any) => {	
		
		activeFilters.price_range.min = minRange;
		activeFilters.price_range.max = maxRange;
		fetchProducts({ ...activeFilters});
		setActiveFilters(activeFilters)
	}
	const debounceFn = useCallback(debounce(handleDebounce, 1000), []);
	const updateLowerLimit = (event: any) => {
		//fetchProducts({...activeFilters,})
		setLowerLimit(event.target.value);
		debounceFn(event.target.value, upperLimit, activeFilters);
		handleSelectionEvent('price');
	}

	const updateUpperLimit = (event: any) => {
		setUpperLimit(event.target.value);
		debounceFn(lowerLimit, event.target.value, activeFilters);
		handleSelectionEvent('price');
		
	}

	const onPriceRangeChange = (values: any) => {
		debounceFn(values[0], values[1], activeFilters)
		setLowerLimit(values[0]);
		setUpperLimit(values[1]);
		handleSelectionEvent('price');
	}

	return (
		<div className={cx(styles.individualFilters, "p-4 mb-5")}>
			<MediaQuery minWidth={768}>
				<h1 className="text-lg">Price Range</h1>
			</MediaQuery>
			<Slider onChange={onPriceRangeChange} range min={minPrice} max={maxPrice} defaultValue={[minPrice, maxPrice]} value={[lowerLimit, upperLimit]} />
			<div className='flex justify-between'>
				<Input onChange={updateLowerLimit} value={lowerLimit} className={styles.priceRangeInput} />
				<div>To</div>
				<Input onChange={updateUpperLimit} value={upperLimit} className={styles.priceRangeInput} />
			</div>
		</div>
	)
}

export default PriceRangeFilter