content: /**
   * Copyright 2016 Reza (github.com/rghorbani)
   *
   * @flow
   */
  
  'use strict';
  
  import React from 'react';
  import PropTypes from 'prop-types';
  import {
    TextInput as RNTextInput,
    StyleSheet,
    Animated,
    TouchableOpacity,
  } from 'react-native';
  import _ from 'lodash';
  import {
    Colors,
    Constants,
    Modal,
    Image,
    Text,
    Typography,
    View,
  } from 'react-native-ui-lib';
  import BaseInput from './BaseInput';
  import TextArea from './TextArea';
  
  const DEFAULT_COLOR_BY_STATE = {
    default: Colors.dark40,
    focus: Colors.blue30,
    error: Colors.red30,
  };
  const DEFAULT_UNDERLINE_COLOR_BY_STATE = {
    default: Colors.dark70,
    focus: Colors.blue30,
    error: Colors.red30,
  };
  const LABEL_TYPOGRAPHY = Typography.text80;
  
  export default class TextInput extends BaseInput {
    static displayName = 'TextInput';
    static propTypes = {
      ...RNTextInput.propTypes,
      ...BaseInput.propTypes,
      /**
       * make component rtl
       */
      rtl: PropTypes.bool,
      /**
       * should placeholder have floating behavior
       */
      floatingPlaceholder: PropTypes.bool,
      /**
       * floating placeholder color as a string or object of states, ex. {default: 'black', error: 'red', focus: 'blue'}
       */
      floatingPlaceholderColor: PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.object,
      ]),
      /**
       * This text will appear as a placeholder when the textInput becomes focused, only when passing floatingPlaceholder
       * as well (NOT for expandable textInputs)
       */
      helperText: PropTypes.string,
      /**
       * hide text input underline, by default false
       */
      hideUnderline: PropTypes.bool,
      /**
       * underline color as a string or object of states, ex. {default: 'black', error: 'red', focus: 'blue'}
       */
      underlineColor: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
      /**
       * the color of all text when the input is disabled (if undefined will not apply color)
       */
      disabledColor: PropTypes.string,
      /**
       * should text input be align to center
       */
      centered: PropTypes.bool,
      /**
       * input error message, should be empty if no error exists
       */
      error: PropTypes.string,
      /**
       * should the input component support error messages
       */
      enableErrors: PropTypes.bool,
      /**
       * should the input expand to another text area modal
       */
      expandable: PropTypes.bool,
      /**
       * Render custom expandable input (requires expandable to be true)
       */
      renderExpandableInput: PropTypes.func,
      /**
       * allow custom rendering of expandable content when clicking on the input (useful for pickers)
       * accept props and state as params, ex. (props, state) => {...}
       * use toggleExpandableModal(false) method to toggle off the expandable content
       */
      renderExpandable: PropTypes.func,
      /**
       * transform function executed on value and return transformed value
       */
      transformer: PropTypes.func,
      /**
       * Fixed title that will displayed above the input (note: floatingPlaceholder MUST be 'false')
       */
      title: PropTypes.string,
      /**
       * The title's color as a string or object of states, ex. {default: 'black', error: 'red', focus: 'blue'}
       */
      titleColor: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
      /**
       * Additional styles for the title (not including 'color')
       */
      titleStyle: PropTypes.oneOfType([
        PropTypes.object,
        PropTypes.number,
        PropTypes.array,
      ]),
      /**
       * should the input display a character counter (only when passing 'maxLength')
       */
      showCharacterCounter: PropTypes.bool,
      /**
       * should float the placeholer when focused (instead of when typing)
       */
      floatOnFocus: PropTypes.bool,
      /**
       * should the errors be displayed at the top
       */
      useTopErrors: PropTypes.bool,
      /**
       * Icon asset source for showing on the right side, appropriate for dropdown icon and such
       */
      rightIconSource: PropTypes.oneOfType([PropTypes.object, PropTypes.number]),
      /**
       * Use to identify the component in tests
       */
      testId: PropTypes.string,
    };
  
    static defaultProps = {
      placeholderTextColor: DEFAULT_COLOR_BY_STATE.default,
      enableErrors: true,
    };
  
    constructor(props) {
      super(props);
  
      this.updateFloatingPlaceholderState = this.updateFloatingPlaceholderState.bind(
        this,
      );
      this.toggleExpandableModal = this.toggleExpandableModal.bind(this);
  
      this.state = {
        value: props.value,
        floatingPlaceholderState: new Animated.Value(
          this.shouldFloatPlacholder(props.value) ? 1 : 0,
        ),
        showExpandableModal: false,
      };
  
      this.generatePropsWarnings(props);
    }
  
    componentWillReceiveProps(nextProps) {
      if (nextProps.value !== this.props.value) {
        this.setState(
          { value: nextProps.value },
          this.updateFloatingPlaceholderState,
        );
      }
    }
  
    componentDidMount() {
      // this.getHeight();
    }
  
    /** Actions */
    generatePropsWarnings(props) {
      if (props.maxLength === 0) {
        console.warn('Setting maxLength to zero will block typing in this input');
      }
      if (props.showCharacterCounter && !props.maxLength) {
        console.warn(
          "In order to use showCharacterCount please pass 'maxLength' prop",
        );
      }
    }
  
    generateStyles() {
      this.styles = createStyles(this.props);
    }
  
    toggleExpandableModal(value) {
      this.setState({ showExpandableModal: value });
    }
  
    updateFloatingPlaceholderState(withoutAnimation) {
      if (withoutAnimation) {
        this.state.floatingPlaceholderState.setValue(
          this.shouldFloatPlacholder() ? 1 : 0,
        );
      } else {
        Animated.spring(this.state.floatingPlaceholderState, {
          toValue: this.shouldFloatPlacholder() ? 1 : 0,
          duration: 150,
        }).start();
      }
    }
  
    getPlaceholderText() {
      const { placeholder, helperText } = this.props;
      const text = this.shouldFakePlaceholder()
        ? this.shouldShowHelperText()
          ? helperText
          : ' '
        : this.shouldShowTopError() && this.shouldShowHelperText()
        ? helperText
        : placeholder;
      return text;
    }
  
    // getHeight() {
    //   const {multiline, numberOfLines} = this.props;
    //   const typography = this.getTypography();
    //   if (!multiline) {
    //     return typography.lineHeight;
    //   }
    //   // numberOfLines support for both platforms
    //   if (multiline && numberOfLines) {
    //     return typography.lineHeight * numberOfLines;
    //   }
    // }
  
    isDisabled() {
      return this.props.editable === false;
    }
  
    getStateColor(colorProp, isUnderline) {
      const { focused } = this.state;
      const { error, disabledColor } = this.props;
      const colorByState = _.cloneDeep(
        isUnderline ? DEFAULT_UNDERLINE_COLOR_BY_STATE : DEFAULT_COLOR_BY_STATE,
      );
  
      if (this.isDisabled() && disabledColor) {
        return disabledColor;
      }
  
      if (colorProp) {
        if (_.isString(colorProp)) {
          // use given color for any state
          return colorProp;
        } else if (_.isObject(colorProp)) {
          // set given colors by states
          _.merge(colorByState, colorProp);
        }
      }
  
      // return the right color for the current state
      let color = colorByState.default;
      if (error && isUnderline) {
        color = colorByState.error;
      } else if (focused) {
        color = colorByState.focus;
      }
      return color;
    }
  
    getCharCount() {
      const { value } = this.state;
      if (value) {
        return value.length;
      }
      return 0;
    }
  
    isCounterLimit() {
      const { maxLength } = this.props;
      const counter = this.getCharCount();
      return counter === 0 ? false : maxLength <= counter;
    }
  
    hasText(value) {
      return !_.isEmpty(value || this.state.value);
    }
  
    shouldShowHelperText() {
      const { focused } = this.state;
      const { helperText } = this.props;
      return focused && helperText;
    }
  
    shouldFloatOnFocus() {
      const { focused } = this.state;
      const { floatOnFocus } = this.props;
      return focused && floatOnFocus;
    }
  
    shouldFloatPlacholder(text) {
      return (
        this.hasText(text) ||
        this.shouldShowHelperText() ||
        this.shouldFloatOnFocus()
      );
    }
  
    shouldFakePlaceholder() {
      const { floatingPlaceholder, centered } = this.props;
      return Boolean(
        floatingPlaceholder && !centered && !this.shouldShowTopError(),
      );
    }
  
    shouldShowError() {
      const { enableErrors, error } = this.props;
      return enableErrors && error;
    }
  
    shouldShowTopError() {
      const { useTopErrors } = this.props;
      return this.shouldShowError() && useTopErrors;
    }
  
    /** Renders */
    renderPlaceholder() {
      const { floatingPlaceholderState } = this.state;
      const {
        centered,
        expandable,
        placeholder,
        placeholderTextColor,
        floatingPlaceholderColor,
        multiline,
      } = this.props;
      const typography = this.getTypography();
      const placeholderColor = this.getStateColor(placeholderTextColor);
  
      if (this.shouldFakePlaceholder()) {
        return (
          <Animated.Text
            style={[
              this.styles.floatingPlaceholder,
              this.styles.placeholder,
              typography,
              centered && this.styles.placeholderCentered,
              !centered && {
                top: floatingPlaceholderState.interpolate({
                  inputRange: [0, 1],
                  outputRange: [multiline ? 30 : 28, multiline ? 7 : 0],
                }),
                fontSize: floatingPlaceholderState.interpolate({
                  inputRange: [0, 1],
                  outputRange: [typography.fontSize, LABEL_TYPOGRAPHY.fontSize],
                }),
                color: floatingPlaceholderState.interpolate({
                  inputRange: [0, 1],
                  outputRange: [
                    placeholderColor,
                    this.getStateColor(floatingPlaceholderColor),
                  ],
                }),
                lineHeight: this.shouldFloatPlacholder()
                  ? LABEL_TYPOGRAPHY.lineHeight
                  : typography.lineHeight,
              },
            ]}
            numberOfLines={1}
            onPress={() => expandable && this.toggleExpandableModal(true)}
            suppressHighlighting
          >
            {placeholder}
          </Animated.Text>
        );
      }
    }
  
    renderTitle() {
      const { floatingPlaceholder, title, titleColor, titleStyle } = this.props;
      const color = this.getStateColor(titleColor);
  
      if (!floatingPlaceholder && title) {
        return (
          <Text
            style={[
              { color },
              this.styles.topLabel,
              this.styles.label,
              titleStyle,
            ]}
          >
            {title}
          </Text>
        );
      }
    }
  
    renderCharCounter() {
      const { focused } = this.state;
      const { maxLength, showCharacterCounter, disabledColor } = this.props;
  
      if (maxLength && showCharacterCounter) {
        const counter = this.getCharCount();
        const textColor =
          this.isCounterLimit() && focused
            ? DEFAULT_COLOR_BY_STATE.error
            : DEFAULT_COLOR_BY_STATE.default;
        const color =
          this.isDisabled() && disabledColor ? disabledColor : textColor;
  
        return (
          <Text style={[{ color }, this.styles.bottomLabel, this.styles.label]}>
            {counter} / {maxLength}
          </Text>
        );
      }
    }
  
    renderError(visible) {
      const { enableErrors, error, useTopErrors } = this.props;
      const positionStyle = useTopErrors
        ? this.styles.topLabel
        : this.styles.bottomLabel;
  
      if (visible && enableErrors) {
        return (
          <Text
            style={[this.styles.errorMessage, this.styles.label, positionStyle]}
          >
            {error}
          </Text>
        );
      }
    }
  
    renderExpandableModal() {
      const { renderExpandable } = this.props;
      const { showExpandableModal } = this.state;
  
      if (_.isFunction(renderExpandable) && showExpandableModal) {
        return renderExpandable(this.props, this.state);
      }
  
      return (
        <Modal
          animationType={'slide'}
          visible={showExpandableModal}
          onRequestClose={() => this.toggleExpandableModal(false)}
        >
          <Modal.TopBar
            onCancel={() => this.toggleExpandableModal(false)}
            onDone={this.onDoneEditingExpandableInput}
          />
          <View style={this.styles.expandableModalContent}>
            <TextArea
              ref={textarea => {
                this.expandableInput = textarea;
              }}
              {...this.props}
              value={this.state.value}
            />
          </View>
        </Modal>
      );
    }
  
    renderExpandableInput() {
      const {
        style,
        floatingPlaceholder,
        placeholder,
        hideUnderline,
        renderExpandableInput,
        rightIconSource,
      } = this.props;
      const { value } = this.state;
      const typography = this.getTypography();
      const color = this.getStateColor(
        this.props.color || this.extractColorValue(),
      );
      const minHeight = typography.lineHeight;
      const shouldShowPlaceholder = _.isEmpty(value) && !floatingPlaceholder;
      const inputStyle = [
        this.styles.input,
        hideUnderline && this.styles.inputWithoutUnderline,
        typography,
        color && { color },
        style,
      ];
  
      if (_.isFunction(renderExpandableInput)) {
        return renderExpandableInput(this.getThemeProps());
      }
  
      return (
        <TouchableOpacity
          style={this.styles.expandableInput}
          activeOpacity={1}
          onPress={() => !this.isDisabled() && this.toggleExpandableModal(true)}
        >
          <Text
            style={[
              { minHeight },
              inputStyle,
              shouldShowPlaceholder && this.styles.placeholder,
            ]}
            numberOfLines={3}
          >
            {shouldShowPlaceholder ? placeholder : value}
          </Text>
          {rightIconSource && (
            <Image pointerEvents="none" source={rightIconSource} />
          )}
        </TouchableOpacity>
      );
    }
  
    renderTextInput() {
      const { value } = this.state; // value set on state for floatingPlaceholder functionality
      const color = this.getStateColor(
        this.props.color || this.extractColorValue(),
      );
      const typography = this.getTypography();
      /* eslint-disable no-unused-vars */
      const {
        style,
        placeholder,
        placeholderTextColor,
        floatingPlaceholder,
        rtl,
        centered,
        multiline,
        hideUnderline,
        numberOfLines,
        helperText,
        ...others
      } = this.props;
      /* eslint-enable no-unused-vars */
      const inputStyle = [
        this.styles.input,
        hideUnderline && this.styles.inputWithoutUnderline,
        typography,
        color && { color },
        rtl && this.styles.inputRTL,
        centered && this.styles.inputCentered,
        // with the right flex on the tree hierarchy we might not need this
        // {height: this.getHeight()},
        style,
      ];
      // HACK: passing whitespace instead of undefined. Issue fixed in RN56
      const placeholderText = this.getPlaceholderText();
      const placeholderColor = this.getStateColor(placeholderTextColor);
  
      return (
        <RNTextInput
          {...others}
          value={value}
          placeholder={placeholderText}
          placeholderTextColor={placeholderColor}
          underlineColorAndroid="transparent"
          style={inputStyle}
          multiline={multiline}
          numberOfLines={numberOfLines}
          onKeyPress={this.onKeyPress}
          onChangeText={this.onChangeText}
          onChange={this.onChange}
          onFocus={this.onFocus}
          onBlur={this.onBlur}
          ref={input => {
            this.input = input;
          }}
        />
      );
    }
  
    getTopPaddings() {
      const { floatingPlaceholder } = this.props;
      return floatingPlaceholder
        ? this.shouldShowTopError()
          ? undefined
          : 25
        : undefined;
    }
  
    render() {
      const {
        centered,
        expandable,
        containerStyle,
        underlineColor,
        useTopErrors,
        hideUnderline,
      } = this.props;
      const underlineStateColor = this.getStateColor(underlineColor, true);
  
      return (
        <View style={[this.styles.container, containerStyle]} collapsable={false}>
          <View>
            {this.shouldShowTopError()
              ? this.renderError(useTopErrors)
              : this.renderTitle()}
          </View>
          <View
            style={[
              this.styles.innerContainer,
              hideUnderline && this.styles.innerContainerWithoutUnderline,
              { borderColor: underlineStateColor },
              { paddingTop: this.getTopPaddings() },
            ]}
          >
            {this.renderPlaceholder()}
            {expandable ? this.renderExpandableInput() : this.renderTextInput()}
            {this.renderExpandableModal()}
          </View>
          <View row>
            <View flex left={centered !== true}>
              {this.renderError(!useTopErrors)}
            </View>
            {this.renderCharCounter()}
          </View>
        </View>
      );
    }
  
    /** Events */
    onDoneEditingExpandableInput = () => {
      const expandableInputValue = _.get(this.expandableInput, 'state.value');
      this.setState({ value: expandableInputValue });
      this.state.floatingPlaceholderState.setValue(expandableInputValue ? 1 : 0);
      _.invoke(this.props, 'onChangeText', expandableInputValue);
      this.toggleExpandableModal(false);
    };
  
    onKeyPress = event => {
      this.lastKey = event.nativeEvent.key;
      _.invoke(this.props, 'onKeyPress', event);
    };
  
    onChangeText = text => {
      // when character count exceeds maxLength text will be empty string.
      // HACK: To avoid setting state value to '' we check the source of that deletion
      if (text === '' && this.lastKey && this.lastKey !== 'Backspace') {
        return;
      }
  
      const { transformer } = this.props;
      let transformedText = text;
      if (_.isFunction(transformer)) {
        transformedText = transformer(text);
      }
  
      _.invoke(this.props, 'onChangeText', transformedText);
      this.setState(
        { value: transformedText },
        this.updateFloatingPlaceholderState,
      );
    };
  
    onFocus = (...args) => {
      _.invoke(this.props, 'onFocus', ...args);
      this.setState({ focused: true }, this.updateFloatingPlaceholderState);
    };
  
    onBlur = (...args) => {
      _.invoke(this.props, 'onBlur', ...args);
      this.setState({ focused: false }, this.updateFloatingPlaceholderState);
    };
  }
  
  function createStyles({ rtl, placeholderTextColor, centered }) {
    return StyleSheet.create({
      container: {},
      innerContainer: {
        flexDirection: 'row',
        borderBottomWidth: 1,
        borderColor: Colors.dark70,
        justifyContent: centered ? 'center' : undefined,
        flexGrow: 1,
      },
      innerContainerWithoutUnderline: {
        borderBottomWidth: 0,
      },
      input: {
        flexGrow: 1,
        marginBottom: Constants.isIOS ? 10 : 5,
        padding: 0,
        // textAlign: centered ? 'center' : (rtl ? 'right' : undefined),
        // writingDirection: rtl ? 'rtl' : undefined,
        backgroundColor: 'transparent',
      },
      inputRTL: {
        textAlign: 'right',
        writingDirection: 'rtl',
      },
      inputCentered: {
        textAlign: 'center',
        writingDirection: undefined,
      },
      expandableInput: {
        flexDirection: 'row',
        alignItems: 'center',
        flexGrow: 1,
      },
      inputWithoutUnderline: {
        marginBottom: undefined,
      },
      floatingPlaceholder: {
        position: 'absolute',
        width: '100%',
      },
      placeholder: {
        color: placeholderTextColor,
        textAlign: 'left',
      },
      placeholderCentered: {
        left: 0,
        right: 0,
        textAlign: 'center',
      },
      errorMessage: {
        color: Colors.red30,
        textAlign: centered ? 'center' : undefined,
      },
      expandableModalContent: {
        flex: 1,
        paddingTop: 15,
        paddingHorizontal: 20,
      },
      topLabel: {
        marginBottom: Constants.isIOS ? 6 : 7,
      },
      bottomLabel: {
        marginTop: 1,
      },
      label: {
        ...LABEL_TYPOGRAPHY,
        height: LABEL_TYPOGRAPHY.lineHeight,
      },
    });
  }
  