import React, { Component } from 'react'
import {
  Dimensions,
  Keyboard,
  KeyboardAvoidingView,
  SafeAreaView,
  ScrollView,
  TextInput,
  TouchableWithoutFeedback,
  View,
} from 'react-native'

/*
 * Components -- these are custom components from our boilerplate
 * You can replace these with the component of your choice
 * -- FullButton is made from ReactNative's TouchableOpacity and View
 * -- Text is made from ReactNative's Text component with additional style prop helpers
 */
import { FullButton, Text } from '../../components'

/*
 * Component to demonstrate a form example where the keyboard scrolls the view up properly, allows
 * the user to click the button when the keyboard is open, and allows the user to click on the
 * background to close the keyboard
 *
 * Note: To fully test this component, make sure that your device is set to use the software
 * keyboard
 */
class KeyboardAvoidExample extends Component {
  componentDidMount() {
    this._keyboardDidShowListener = Keyboard.addListener(
      'keyboardDidShow',
      this._handleKeyboardDidShow,
    )
  }

  componentWillUnmount() {
    this._keyboardDidShowListener.remove()
  }

  _handleKeyboardDidShow = () => {
    /*
     * The scrollToEnd call can be omitted if you don't want to scroll to the bottom.
     * If you have a long form, you should remove this. If your form fits with the keyboard shown,
     * you can use this to ensure the action button is visible
     */
    this.scrollView.scrollToEnd()

    /*
     * Wait a half second before flashing the scroll indicators. This makes sure the keyboard has
     * finished animating so the user isn't distracted by that animiation. Flashing the scroll
     * indicators shows the user they can scroll in the view
     */
    setTimeout(() => {
      this.scrollView.flashScrollIndicators()
    }, 500)
  }

  render() {
    return (
      <KeyboardAvoidingView behavior="padding">
        {/*
         * `keyboardShouldPersistTaps` ensures that the user can click on the button even when the
         * keyboard is open. If that isn't the desired behavior, you cann remove
         * `keyboardShouldPersistTaps` and the TouchableWithoutFeedback component below
         */}
        <ScrollView
          keyboardShouldPersistTaps
          alwaysBounceVertical={false}
          ref={ref => {
            this.scrollView = ref
          }}
        >
          {/*
           * Enable the user to click the background and close the keyboard. This isn't needed if
           * you remove `keyboardShouldPersistTaps` from the ScrollView, as the ScrollView handles
           * this otherwise
           */}
          <TouchableWithoutFeedback
            onPress={() => {
              Keyboard.dismiss()
            }}
          >
            <SafeAreaView style={{ flex: 1 }}>
              <View style={{ minHeight: Dimensions.get('window').height }}>
                <Text center dark mY={200}>
                  Some Text!
                </Text>

                {/* This doesn't have proper prop values and is just for demonstration */}
                <TextInput
                  onChangeText={() => {}}
                  style={{ backgroundColor: 'white' }}
                  value={1}
                />

                <FullButton title="Do Something" />
              </View>
            </SafeAreaView>
          </TouchableWithoutFeedback>
        </ScrollView>
      </KeyboardAvoidingView>
    )
  }
}

export default KeyboardAvoidExample