import Slider from "@react-native-community/slider";
import React from "react";
import { View, Text, TextInput } from "react-native";
import { IconButton } from "../../../Buttons";

interface MinRatingProps {
    localMinRating: number
    setLocalMinRating: (number) => void
    cancelChanges: () => void
    toggleFilter: (boolean) => void
}

/**
 * Component that offers a slider to set the minimum rating filter
 */
export const FilterMinRating: React.FC<MinRatingProps> = ({localMinRating, setLocalMinRating, cancelChanges, toggleFilter}) => {
    return (
        <View style={{marginBottom: 10, flexDirection: 'row', justifyContent: 'space-between'}} >  
            <View style={{width: '90%'}}>
                <View style={{marginBottom: 10, justifyContent: 'flex-start'}}>
                    <Text style={{marginTop: 3, marginRight: 10}}>Min rating:</Text>
                    <View style={{flexDirection: 'row'}}>
                        <TextInput value={localMinRating.toString()} keyboardType='numeric' onChangeText={value => {
                                if (value) {
                                    setLocalMinRating(parseInt(value))   
                                }
                                else {
                                    setLocalMinRating(0)   
                                }
                            }} 
                            style={{width: '10%'}}/>
                        <Slider step={1} value={localMinRating} onSlidingComplete={value => setLocalMinRating(value)} minimumValue={0} maximumValue={1000} style={{width: '90%'}} />
                    </View>
                </View>
            </View>
            <IconButton style={{justifyContent: 'flex-start'}} icon="times" size={20} color='black' onPress={() => {cancelChanges(); toggleFilter(false)}}/>
        </View>
    )
}