import React, { Component } from 'react';
import { TouchableOpacity, ScrollView, SafeAreaView } from 'react-native';
import { TextButton } from './Modal';
import ProductList from '../components/ProductsList';
import ProductRecord from '../records/ProductRecord';
import { StrongText } from '../components/ItemTile';
import { Toolbar } from 'react-native-material-ui';
import FilterRecord from '../records/FilterRecord';
import { compose, pure } from 'recompose';
import { withUniqueProducts } from '../enhancers/productsEnhancers';
import { Set } from 'immutable';

type Props = {
	onClose: () => void,
	onUpdate: (name: string) => void,
	productsSeq: ?Set<ProductRecord>,
};

class NameModal extends Component {
	static displayName = 'NameModal';

	props: Props;

	state: {
		filter: FilterRecord,
	};

	state = {
		filter: new FilterRecord(),
	};

	save = () => {
		this.props.onUpdate(this.state.filter.search);
		this.props.onClose();
	};

	setText = (text: string) => {
		this.setState(({ filter }) => ({ filter: filter.set('search', text) }));
	};

	updateAndClose = (text: string) => {
		this.props.onUpdate(text);
		this.props.onClose();
	};

	render() {
		const { onClose, productsSeq } = this.props;
		const { filter } = this.state;
		return (
			<SafeAreaView
				style={{
					position: 'absolute',
					top: 0,
					bottom: 0,
					left: 0,
					right: 0,
				}}>
				<Toolbar
					leftElement="arrow-back"
					onLeftElementPress={onClose}
					searchable={{
						autoFocus: false,
						placeholder: 'Search',
						onChangeText: this.setText,
						onSearchClosed: onClose,
					}}
					isSearchActive={true}
					style={{
						container: {
							elevation: 3,
						},
					}}
				/>
				{!!filter.search && (
					<TextButton
						text="Not here, it's a new product"
						onPress={this.save}
						style={{ marginLeft: 66 }}
					/>
				)}
				<ScrollView style={{ paddingLeft: 78 }}>
					<ProductList filter={filter} limit={10} productsSeq={productsSeq}>
						{(product: ProductRecord) => (
							<TouchableOpacity key={product.id} onPress={() => this.updateAndClose(product.name)}>
								<StrongText style={{ paddingTop: 20, paddingBottom: 20 }}>
									{product.name}
								</StrongText>
							</TouchableOpacity>
						)}
					</ProductList>
				</ScrollView>
			</SafeAreaView>
		);
	}
}

export default compose(
	pure,
	withUniqueProducts
)(NameModal);