// @flow
import React from 'react';
import { Picker, View } from 'react-native';
import theme from '../ui-theme';
import { pure } from 'recompose';
import debounce from '../helpers/debounce';

const { picker: { color: selectedColor } } = theme;
const defaultColor = 'black';

const getItemColor = (selected, current) => (selected === current ? selectedColor : defaultColor);

export type Orderby = 'distance' | 'lastupdated' | 'quantity';

export const ORDER_BY = ['distance', 'lastupdated', 'quantity'];

export const getOrderbyText = (orderby: Orderby) => {
	switch (orderby) {
		case 'quantity':
			return 'Quantity';
		case 'lastupdated':
			return 'Most Recently Updated';
		default:
			return 'Distance';
	}
};

/* eslint-disable react/display-name */
const renderItem = (selected: Orderby) => (item: Orderby) => (
	<Picker.Item key={item} label={getOrderbyText(item)} value={item} color={getItemColor(selected, item)} />
);

type orderbyPickerProps = { selected: Orderby, onValueChange: Function, style: Object };
const orderbyPicker = pure(({ selected, onValueChange, style }: orderbyPickerProps) => (
	<View style={style}>
		<Picker selectedValue={selected} onValueChange={debounce(onValueChange)} style={{ flex: 1 }}>
			{ORDER_BY.map(renderItem(selected))}
		</Picker>
	</View>
));

export default orderbyPicker;