import React, {useRef, useState} from 'react';
import {Button, SafeAreaView, Text} from 'react-native';
import ReactNativePickerModule, {PickerRef} from 'react-native-picker-module';

const App = () => {
    const pickerRef = useRef<PickerRef>(null);
    const [value, setValue] = useState();
    const dataset_1 = [1, 2, 'Java', 'Kotlin', 'C++', 'C#', 'PHP'];
    return (
            <>
                <SafeAreaView>
                    <Button
                            title="Select a language"
                            onPress={() => pickerRef.current?.show()}
                    />
                    <Text>Selected Item Text: {value}</Text>
                </SafeAreaView>
                <ReactNativePickerModule
                        ref={pickerRef}
                        value={value}
                        title={'Select a language'}
                        items={dataset_1}
                        titleStyle={{color: 'white'}}
                        itemStyle={{color: 'white'}}
                        selectedColor="#FC0"
                        confirmButtonEnabledTextStyle={{color: 'white'}}
                        confirmButtonDisabledTextStyle={{color: 'grey'}}
                        cancelButtonTextStyle={{color: 'white'}}
                        confirmButtonStyle={{
                            backgroundColor: 'rgba(0,0,0,1)',
                        }}
                        cancelButtonStyle={{
                            backgroundColor: 'rgba(0,0,0,1)',
                        }}
                        contentContainerStyle={{
                            backgroundColor: 'rgba(0,0,0,1)',
                        }}
                        onCancel={() => {
                            console.log('Cancelled');
                        }}
                        onValueChange={value => {
                            console.log('value: ', value);
                            setValue(value);
                        }}
                />
            </>
    );
};

export default App;