// @flow
import React, { PureComponent } from 'react';
import typeof ProductRecord from '../records/ProductRecord';
import { CATEGORIES } from '../constants/CategoryConstants';
import { getCategoryText } from '../helpers/CategoryHelpers';
import FullScreenModal from './FullScreenModal';
import { type Category } from '../constants/CategoryConstants';
import PickerItemRow from '../components/PickerItemRow';

type Props = {
	onClose: () => void,
	onUpdate: (c: Category) => void,
	product: ProductRecord,
};

class CategoryModal extends PureComponent {
	static displayName = 'NameModal';

	props: Props;

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

	render() {
		const { onClose, product } = this.props;
		return (
			<FullScreenModal title="Category" onClose={onClose}>
				{CATEGORIES.map(category => (
					<PickerItemRow
						key={category}
						isSelected={product && product.category === category}
						text={getCategoryText(category)}
						onPress={() => this.updateAndClose(category)}
					/>
				))}
			</FullScreenModal>
		);
	}
}

export default CategoryModal;