import { StyleSheet, Text, TextInput, View } from "react-native";
import Slider from '@react-native-community/slider';
import { useState } from "react";

type PercentDamageProps = {
    onSetPercentage: (percent: number) => any;
}

export default function PercentDamage ({onSetPercentage} : PercentDamageProps) {
    const [damage, setDamage] = useState(0);
    function doOnChangeText (val : number) {
        setDamage(val);
        onSetPercentage(val / 100);
    }
    return (
        <View style={styles.wrapper}>
            <Slider
                value={damage}
                minimumValue={0}
                maximumValue={100}
                step={5}
                onValueChange={doOnChangeText}
                />
            <Text style={styles.label}> {damage}% Damage</Text>
        </View>
    )
}

const styles = StyleSheet.create({
    wrapper: {
        padding: 5,
    },
    input: {
        flex: 1,
        margin: 5,
        padding: 5,
        borderWidth: 2,
        borderColor: "lightgrey",
        borderStyle: "solid",
    },
    label: {
        margin: 5,
    }
})