import React, { FC, useCallback, useState } from 'react';
import cx from 'classnames';

import { isEmpty, get, debounce, omit } from 'lodash';
import { Input, Button, Spin } from 'antd';
import { FilterFilled, SearchOutlined, CloseCircleOutlined } from '@ant-design/icons';

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


const MobileFilterSearch: FC<any> = ({ seachVisible,
	toggleFilterVisible,
	toggleSearchVisible,
	activeFilters,
	setActiveFilters,
	fetchProducts
}) => {
	const [searchText, setSearchText] = useState("");

	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 onSearhTextChange = (event: any) => {
		setSearchText(event.target.value);
		debounceFn(event.target.value, activeFilters);
		debounceFn(event.target.value, activeFilters);
		activeFilters.subText = event.target.value;
		fetchProducts(activeFilters);
		setActiveFilters(activeFilters);
	}
	return (
		<div className="mx-4 mt-4">
			{!seachVisible ?
				(<div className='flex justify-between mt-4'>
					<div onClick={toggleSearchVisible} className={`flex ${styles.searchTrigger}`}>
						<SearchOutlined className={styles.seacrhIcon} />
						Search within these results
					</div>
					<Button onClick={toggleFilterVisible} className={styles.filterBtnMobile}>
						<div className={styles.filterBtnContent}>
							<FilterFilled className={cx(styles.filterIcon, `mr-2`)} />
							Filters
						</div>
					</Button>
				</div>) :
				<Input
					prefix={<SearchOutlined className={styles.seacrhIcon} />}
					value={searchText}
					onChange={onSearhTextChange}
					size="large"
					autoFocus
					suffix={<CloseCircleOutlined className={styles.seacrhIcon} onClick={toggleSearchVisible} />}
				/>
			}
		</div>
	)

}
export default MobileFilterSearch