import React from 'react';
import {View, Text, StyleSheet, Dimensions} from 'react-native';
import PropTypes from "prop-types";
import RNPickerSelect from "react-native-picker-select";


const FilterItem = (props) => {
    return (
        <View style={{height: props.height, backgroundColor: props.backgroundColor,borderBottomColor: props.borderBottomColor, borderBottomWidth: 1}}>
            <View style={{flex: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'center'}}>
                <Text style={{flex: 1, color: props.fontColor, paddingHorizontal:10}}>{props.title}</Text>
                <View style={{width: props.labelWidth, paddingHorizontal: 10}}>
                    <RNPickerSelect
                        placeholder={{}}
                        items={props.items}
                        onValueChange={value => props.onValueChange(value)}
                        style={  pickerSelectStyles(props.fontColor,props.backgroundColor)}
                        useNativeAndroidPickerStyle={false}
                        value={props.selectedItem}
                    />
                </View>
            </View>
        </View>


    )
};


const pickerSelectStyles = (color,backgroundColor) => StyleSheet.create({
    inputIOS: {
        fontSize: 17,
        color: color,
        fontWeight: 'bold',
        textAlign: 'right',
        paddingHorizontal: 10,
        backgroundColor: backgroundColor
    },
    inputAndroid: {
        fontSize: 17,
        paddingHorizontal: 10,
        color: color,
        fontWeight: 'bold',
        textAlign: 'right',
        backgroundColor: backgroundColor
    },
});

FilterItem.propTypes = {
    title: PropTypes.string.isRequired,
    backgroundColor: PropTypes.string.isRequired,
    borderBottomColor: PropTypes.string,
    labelWidth: PropTypes.number,
    height: PropTypes.number
};

FilterItem.defaultProps = {
    height: 50,
    labelWidth: 200,
    borderBottomColor: 'lightgrey'
};

export default FilterItem;