// Imports: Dependencies
import React from 'react';
import { SafeAreaView } from 'react-native';
import {
  DateRangePicker,
  DatePicker,
  TimePicker,
  DateTimePicker,
  ListPicker,
  StatePicker,
  StatePickerSmall,
} from 'react-native-ultimate-modal-picker';

// React Native App
const App = () => {
  return (
    <SafeAreaView>
      // Date Picker (Modes: spinner/calendar)
      <DatePicker
        title="Date"
        onValueChange={(date) => console.log(`Date Value: ${date}`)}
        mode="spinner"
      />

      // Time Picker (Modes: spinner/clock)
      <TimePicker
        title="Time"
        onValueChange={(date) => console.log(`Time Value: ${date}`)}
        mode="spinner"
      />

      // Date Time Picker (iOS Only)
      <DateTimePicker
        title="Date/Time"
        onValueChange={(date) => console.log(`Date/Time Value: ${date}`)}
      />

      // List Picker
      <ListPicker title="List" items={items} onValueChange={(value) => console.log(`List Value: ${value}`)}/>

      // State Picker
      <StatePicker onValueChange={(state) => console.log(`State Value: ${state}`)}/>

      // State Picker (Small)
      <StatePickerSmall onValueChange={(state) => console.log(`State Value: ${state}`)}/>

      // Date Range Picker
      <DateRangePicker
        title="Date/Range"
        onFromValueChange={(date) => console.log(`From Date Value: ${date}`)}
        onToValueChange={(date) => console.log(`To Date Value: ${date}`)}
        mode="spinner"
      />
    </SafeAreaView>
  )
}