import React, { useState, FC } from 'react';
import { CloseOutlined } from '@ant-design/icons';
import { Button } from 'antd';
import cx from 'classnames';

import MobileFilterComponent from './MobileFilterComponent';
import PriceRangeFilter from './PriceRangeFilter';
import RadioTypeMobileFilter from './RadioTypeMobileFilter';
import { SORT_TYPES_OPTIONS, BRAND_PRICE_OPTIONS } from './filters.constants';

import styles from './filters.module.scss';
import BrandFilters from './BrandFilters';
import { SORT_TO_PAYLOAD_CONVERT } from '../productHeader/productHeader.constants';

const MobileFilters: FC<any> = ({ onClose, filterData = [], fetchProducts, activeFilters, setActiveFilters,maxPrice,brandData }) => {
	const [selectedFilter, setSelectedFilter] = useState<any>('SORT_TYPES');
	const [filterValues, setFilterValues] = useState({ SORT_TYPES: "", BRAND_PRICE: "" });

	const onFilterSelect = (filterCode: any) => () => {
		setSelectedFilter(filterData.find((filter: any) => filter?.code === filterCode) || filterCode);
	}

	

	const onFilterChange = (type: any) => (value: any) => {
		//console.log(value,type)
		setFilterValues({ ...filterValues, [type]: value })
		fetchProducts({ ...activeFilters, ...SORT_TO_PAYLOAD_CONVERT[value] });
		setActiveFilters({
			...activeFilters,
			...SORT_TO_PAYLOAD_CONVERT[value],
		});
		
	}
	

	const getFilterComponent = () => {
		const { SORT_TYPES, BRAND_PRICE } = filterValues;

		switch (selectedFilter) {
			case 'priceRange':
				return <PriceRangeFilter maxPrice={maxPrice} fetchProducts={fetchProducts}  activeFilters={activeFilters}
				setActiveFilters={setActiveFilters}/>
			case 'SORT_TYPES':
				return <RadioTypeMobileFilter onChange={onFilterChange('SORT_TYPES')} options={SORT_TYPES_OPTIONS} value={SORT_TYPES} activeFilters={activeFilters}
				setActiveFilters={setActiveFilters}/>
			case 'BRAND_PRICE':
				return  <BrandFilters
				brandFilterOptions={brandData || []}
				fetchProducts={fetchProducts}
				activeFilters={activeFilters}
				setActiveFilters={setActiveFilters}
			  />
			default:
				return <MobileFilterComponent filters={selectedFilter} activeFilter={activeFilters} setActiveFilters={setActiveFilters}  filterData={filterData} filterOption={selectedFilter?.options}/>

		}
	}


	return (
		<div className={styles.mobileFiltersContainer}>
			<div className={cx(`flex justify-between px-5 h-16 items-center`, styles.mobileFilterHeader)}>
				<div className={cx(`text-2xl font-medium`)}>Filters</div>
				<CloseOutlined className='text-2xl' onClick={onClose} />

			</div>
			<div className={cx(styles.mobileIndividualFilter)}>
				<div>
					<div onClick={onFilterSelect('SORT_TYPES')} className={cx(styles.mobileFilterNames, { [styles.mobileFilterActive]: selectedFilter === 'SORT_TYPES' })}>Sort Type</div>
					<div onClick={onFilterSelect('BRAND_PRICE')} className={cx(styles.mobileFilterNames, { [styles.mobileFilterActive]: selectedFilter === 'BRAND_PRICE' })}>Brand Type</div>
					<div onClick={onFilterSelect('priceRange')} className={cx(styles.mobileFilterNames, { [styles.mobileFilterActive]: selectedFilter === 'priceRange' })}>Price Range</div>
					{filterData.map((filter: any) => {
						// console.log(filter,"filter")
						return <div onClick={onFilterSelect(filter.code)} className={cx(styles.mobileFilterNames, { [styles.mobileFilterActive]: selectedFilter?.code === filter.code })} >{filter.attribute_label}</div>
					})}
				</div>
				{getFilterComponent()}
			</div>

			<div className={cx(`flex h-20 px-9 absolute ${styles.mobileFilterFooter}`)}>
				{/* <Button className={styles.mobileFilterFooterButtons}>Clear Filter</Button> */}
				<Button className={styles.mobileFilterFooterButtons} type="primary" onClick={onClose}>Apply</Button>
			</div>
		</div>
	)
}

export default MobileFilters;