// @flow
import React from 'react';
import { View, TouchableOpacity, Text } from 'react-native';
import CheckBox from 'react-native-checkbox';
import Modal from './Modal';
// import { Icon } from 'react-native-material-ui';
import { withFilter } from '../enhancers/filterEnhancers';
import typeof FilterRecord from '../records/FilterRecord';
import { CATEGORIES, type Category } from '../constants/CategoryConstants';
import { getCategoryText } from '../helpers/CategoryHelpers';
// import { Set } from 'immutable';

type Props = {
	isVisible: boolean,
	onClose: () => void,
	filter: FilterRecord,
	setFilter: (f: FilterRecord) => void,
};

const FilterModal = withFilter(({ isVisible, onClose, filter, setFilter }: Props) => {
	const { orderby, categories, radius } = filter;

	const toggleCategory = category => checked => {
		setFilter(
			filter.update('categories', categories => {
				return checked ? categories.delete(category) : categories.add(category);
			})
		);
	};

	return (
		<Modal isVisible={isVisible}>
			<TouchableOpacity onPress={onClose}>
				<Text style={{ fontSize: 30, fontWeight: 'bold' }}>Filters</Text>
				{CATEGORIES.map((category: Category) => (
					<CheckBox
						key={category}
						style={{ margin: 20 }}
						checked={categories.has(category)}
						onChange={toggleCategory(category)}
						label={getCategoryText(category)}
					/>
				))}
			</TouchableOpacity>
		</Modal>
	);
});

export default FilterModal;