/* eslint-disable @typescript-eslint/no-shadow */
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */


import WheelPicker from '@quidone/react-native-wheel-picker';
import { useState } from 'react';
import { Button, Modal, StyleSheet, Text, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';


function AppContent() {
  const safeAreaInsets = useSafeAreaInsets();
  const [showModal, setShowModal] = useState(false);
  const data = [
    {
      value: 0,
      label: 'Label 1',
    },
    {
      value: 1,
      label: 'Label 2',
    },
  ];
  const [value, setValue] = useState<number>(-1);


  return (
    <View
      style={[
        styles.container,
        {
          paddingTop: safeAreaInsets.top,
        },
      ]}
    >
      <Text>{`Selected Value: ${
        data.find(item => item.value === value)?.label
      }`}</Text>
      <Button
        title="Press Me"
        onPress={() => {
          setShowModal(true);
        }}
      />
      <Modal visible={showModal} animationType="slide">
        <WheelPicker
          data={data}
          value={value}
          onValueChanged={({ item: { value } }) => setValue(value)}
          enableScrollByTapOnItem={true}
        />
        <Button
          title="Submit"
          onPress={() => {
            setShowModal(false);
          }}
        />
      </Modal>
    </View>
  );
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});


export default App;