// @flow
import React from 'react';
import { getQuantityDropdownText } from '../helpers/QuantityHelpers';
import { type Quantity, QUANTITIES } from '../constants/QuantityConstants';
import FullScreenModal from './FullScreenModal';
import { typeof Product } from '../records/ProductRecord';
import PickerItemRow from '../components/PickerItemRow';

type Props = {
	onClose: () => void,
	product: Product,
	onUpdate: (q: Quantity) => void,
};

const QuantityModal = (props: Props) => {
	const { product, onUpdate, onClose } = props;

	const onPress = (q: Quantity) => () => {
		onUpdate(q);
		onClose();
	};

	return (
		<FullScreenModal title="Quantity" onClose={onClose}>
			{QUANTITIES.map((quantity: Quantity) => (
				<PickerItemRow
					key={quantity}
					text={getQuantityDropdownText(quantity)}
					isSelected={quantity === product.quantity}
					onPress={onPress(quantity)}
				/>
			))}
		</FullScreenModal>
	);
};

export default QuantityModal;