import { useId } from 'react';
import {
  Button, InputAccessoryView, Keyboard,
  Platform, TextInput, View,
} from 'react-native';

export function KeyboardToolbar() {
  const accessoryId = useId();
  return (
    <View style={{ padding: 16, gap: 12 }}>
      <TextInput
        accessibilityLabel="Reference number"
        keyboardType="number-pad"
        inputAccessoryViewID={
          Platform.OS === 'ios' ? accessoryId : undefined
        }
        style={{ borderWidth: 1, padding: 12 }}
      />
      <Button title="Close keyboard" onPress={Keyboard.dismiss} />
      {Platform.OS === 'ios' && (
        <InputAccessoryView nativeID={accessoryId}>
          <View style={{ backgroundColor: '#fff', padding: 8 }}>
            <Button title="Done" onPress={Keyboard.dismiss} />
          </View>
        </InputAccessoryView>
      )}
    </View>
  );
}