import React, { useState, FC, useEffect, useCallback } from 'react';
import { Input, Checkbox } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import { isEmpty, get, debounce, omit } from 'lodash';
import cx from 'classnames';

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

const MobileFilterComponent: FC<any> = ({ filters, fetchProducts, activeFilters, setActiveFilters,filterData,filterOption }) => {
	const [searchText, setSearchText] = useState("");
	const [selectedFilters, setSelectedFilters] = useState<string[]>([]);
	const [filterOptions, setFilterOptions] = useState(filters?.filterOptions || []);

	useEffect(() => {
		const updatedFilterOptions = searchText ? (filters?.filterOptions || []).filter((filterOption: { name: string }) =>
			filterOption?.name?.toLowerCase().includes(String(searchText.toLowerCase()))
		) : filters?.filterOptions
		setFilterOptions(updatedFilterOptions)
	}, [searchText, filters])
	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)
	}

	const onFilterSelect = (key: string) => (event: any) => {
		if (event.target.checked) {
			setSelectedFilters([...selectedFilters, key])
		} else {
			setSelectedFilters(selectedFilters.filter(value => value !== key))
		}
	}

	return (
		<div className='mt-4'>
			<Input
				value={searchText}
				placeholder={filters.filterName}
				onChange={onSearhTextChange}
				className={styles.filterSearch}
				suffix={(<SearchOutlined />)}
				size={"middle"}
			/>
			<div className={cx("mt-2 overflow-scroll", styles.mobileProductFilterOptions)}>
				{filterOption && filterOption.map((filterOption: { code: string; name: string;label:string }) => {
					return (<div className="mt-2">
						<Checkbox value={selectedFilters.includes(filterOption?.code)} onChange={onFilterSelect(filterOption?.code)}>
							{filterOption?.label}
						</Checkbox>
					</div>)
				})}
			</div>
		</div>
	)
}

export default MobileFilterComponent