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

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

const FilterComponent: FC<any> = ({ filters, fetchProducts, activeFilters, setActiveFilters, handleSelectionEvent }) => {
	const filtersToSkip = ["price", "brand"];
	const [searchText, setSearchText] = useState("");
	const [selectedFilters, setSelectedFilters] = useState<number[]>([]);
	const [filterOptions, setFilterOptions] = useState(filters.options || []);

	useEffect(() => {
		if (!isEmpty(filters?.options)) {
			setFilterOptions(filters?.options)
		}else{
			setFilterOptions([]);
		}
	}, [filters,activeFilters])


	useEffect(() => {
		const updatedFilterOptions = searchText ? (filters?.options || []).filter((filterOption: { label: string }) =>
			filterOption?.label?.toLowerCase().includes(String(searchText.toLowerCase()))
		) : filters?.options
		setFilterOptions(updatedFilterOptions)
	}, [searchText])

	const onSearhTextChange = (event: any) => {
		setSearchText(event.target.value);
	}

	const onFilterSelect = (attr_code: string,value: any) => (event: any) => {
		activeFilters.page = 1 ;
		activeFilters.from =0 ;
		handleSelectionEvent('attr_'+attr_code);
		if(!activeFilters.filterable_attributes){
			activeFilters.filterable_attributes = {};
		}
		if (event.target.checked) {
			if(Array.isArray(activeFilters.filterable_attributes[attr_code])){
				activeFilters.filterable_attributes[attr_code] = [...activeFilters.filterable_attributes[attr_code],value];
			}else{
				activeFilters.filterable_attributes[attr_code] = [value];
			}
		} else {
			if(activeFilters.filterable_attributes[attr_code])
			delete activeFilters.filterable_attributes[attr_code];
		}
		fetchProducts(activeFilters)
		setActiveFilters(activeFilters)
	}

	return (
		<>
			{!filtersToSkip.includes(filters.code)  && Array.isArray(filterOptions) && filterOptions.length > 0 ? (
				<div className={cx(styles.individualFilters, "p-4 mb-5")}>
					<h1 className="text-lg">{filters.attribute_label || "Text"}</h1>
					<Input
						value={searchText}
						placeholder={filters.attribute_label}
						onChange={onSearhTextChange}
						className={styles.filterSearch}
						suffix={(<SearchOutlined />)}
						size={"middle"}
					/>
					<div className="max-h-40 mt-2 overflow-scroll">
						{!isEmpty(filterOptions) && filterOptions.map((filterOption: { id: number; label: string }) => {
							return (<div key={filterOption.id} className="mt-2">
								<Checkbox value={selectedFilters.includes(filterOption?.id)} onChange={onFilterSelect(filters.code,filterOption?.id)}>
									{filterOption?.label || "Test"}
								</Checkbox>
							</div>)
						})}
					</div>
				</div>
			) : null}
		</>

	)
}

export default FilterComponent;