import React, {Component} from 'react';
import {
    Platform, StyleSheet, Text,
    TouchableWithoutFeedback, View, TextInput,
    Animated, Dimensions, Image, PermissionsAndroid,
    AsyncStorage,
    StatusBar, TouchableNativeFeedback, TouchableOpacity,BackHandler,Alert,ProgressBarAndroid
    , FlatList
} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';
const theme=require('./../../utils/theme.json');
import I18n from 'react-native-i18n'

import {Title,Subheading,Button} from 'react-native-paper'
var SnapSlider = require('react-native-snap-slider');
export default class Networks extends Component{
    static navigationOptions = ({navigation})=>{
        return{ drawerLabel: () => null,
         title:"Filtre",
         tabBarIcon:({focused,horizontal,tintColor})=>{
            return (<Icon
                badgeCount={navigation.getParam("count",0)}
                size={24}
                name={"filter-list"}
                color={tintColor}
            />)
          },
     }};

    constructor(props) {
        super(props);
        this.state = {
            valuePosition:0
        }
        this.mounted = false;
        this.filterOptions = [
            {value: 5, label: "5 km"},
            {value: 15, label: "15 km"},
            {value: 20, label: "20 km"},
            {value: 25, label: "25 km"}
        ];
    }
    geInitialState(){
        return {
            valuePosition:0
        }
    }
    render(){
        return (<View style={{flex:1}}>
          <SnapSlider
        items={this.filterOptions}
        defaultItem={this.state.valuePosition}
        labelPosition="bottom"
        onSlidingComplete={(item) => this.slidingComplete(item)}
    />
    <Text>
        <Text style={{fontWeight: "bold"}}>
            {(this.state.value === undefined ? 0 : this.state.value)}</Text> km {I18n.t("DISTANCE_ARROUND")}</Text>
   </View>)
    }

    slidingComplete(itemSelected) {
        this.setState({value: this.filterOptions[itemSelected].value, valuePosition: itemSelected});

    }


}