import React, { Component, PureComponent } from 'react';
import { StyleSheet, View, Text, GestureResponderEvent, ActivityIndicator, Slider, SafeAreaView } from 'react-native';
// import { Button } from 'react-native-vector-icons/FontAwesome';
import { getStatusBarHeight } from '../helper';
import { connect } from 'react-redux';
import actions from '../Actions/actions';
import { Portal } from '../Api/types';
import { bindActionCreators } from 'redux';

type Props = {
    guid: string
    portal?: Portal
}

class Settings extends PureComponent<Props> {
    static navigationOptions = ({ navigation }) => {
        return {
            title: 'Настройки',
        };
    };

    render() {
        const { filterLevel } = this.props.settings
        return (
            <SafeAreaView style={styles.overlay}>
                <Text>Мин. Ур.: {filterLevel[0]}</Text>
                <Slider
                    style={{ width: 150, height: 40 }}
                    minimumValue={0}
                    maximumValue={filterLevel[1]}
                    value={filterLevel[0]}
                    step={1}
                    minimumTrackTintColor="#028ce3"
                    maximumTrackTintColor="#000000"
                    onSlidingComplete={this.props.setLevelFrom}
                />
                <Text>Макс. Ур.: {filterLevel[1]}</Text>
                <Slider
                    style={{ width: 150, height: 40 }}
                    minimumValue={filterLevel[0]}
                    maximumValue={8}
                    value={filterLevel[1]}
                    step={1}
                    minimumTrackTintColor="#028ce3"
                    maximumTrackTintColor="#000000"
                    onSlidingComplete={this.props.setLevelTo}
                />
            </SafeAreaView>
        );
    }
}

export default connect((store) => ({ settings: store.settings }), (dispatch) => bindActionCreators(actions, dispatch))(Settings)

const styles = StyleSheet.create({
    overlay: {
        flex: 1,
        padding: 8,
    },
    title: {
        fontWeight: 'bold',
        fontSize: 22,
    },
    subtitle: {
        fontWeight: 'normal',
        fontSize: 18,
    }
});