import React, { Component } from "react";
import _ from "lodash";
import { TextInput, View, TouchableWithoutFeedback } from "react-native";
import { Text } from ".";
import { Icon } from "@rneui/themed";
import { TEXT_LIGHT, TEXT_DARK, TEXT_DARKEST } from "../colours";
import { FontAwesome } from "./Icon";
class GenericInput extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showSecureText: false
    };
    this.inputRef = /*#__PURE__*/React.createRef();
  }
  blur() {
    this.inputRef.current.blur();
  }
  toggleSecureText() {
    this.setState({
      showSecureText: !this.state.showSecureText
    });
  }
  renderLeftIcon() {
    if (!this.props.icon) {
      return null;
    }
    if (this.props.iconType && this.props.iconType === "pl60") {
      return /*#__PURE__*/React.createElement(FontAwesome, {
        name: this.props.icon,
        style: styles.searchIcon
      });
    }
    return /*#__PURE__*/React.createElement(Icon, {
      type: "font-awesome",
      name: this.props.icon,
      iconStyle: styles.searchIcon
    });
  }
  renderRightIcon() {
    if (this.props.secureTextEntry) {
      return /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
        onPress: this.toggleSecureText.bind(this)
      }, /*#__PURE__*/React.createElement(FontAwesome, {
        name: this.state.showSecureText ? "eye-slash" : "eye",
        style: [styles.clearIcon, styles.secureIcon]
      }));
    }
    if (this.props.rightIcon) {
      if (this.props.rightIconAction) {
        return /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
          onPress: this.props.rightIconAction
        }, /*#__PURE__*/React.createElement(Icon, {
          type: "font-awesome",
          name: this.props.rightIcon,
          iconStyle: styles.clearIcon
        }));
      }
      return /*#__PURE__*/React.createElement(Icon, {
        type: "font-awesome",
        name: this.props.rightIcon,
        iconStyle: styles.clearIcon
      });
    }
    if (this.props.hasClear && !_.isEmpty(this.props.value)) {
      return /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
        onPress: () => {
          this.props.onChangeText("");
        }
      }, /*#__PURE__*/React.createElement(FontAwesome, {
        name: "circle-x",
        style: styles.clearIcon
      }));
    }
    return null;
  }
  render() {
    return /*#__PURE__*/React.createElement(View, {
      style: [styles.searchInputContainer, this.props.squaredCorners && styles.squaredSearchInputContainer, this.props.autoGrow ? {
        paddingVertical: 8,
        minHeight: 40
      } : {
        height: 36
      }, this.props.containerStyle]
    }, this.renderLeftIcon(), /*#__PURE__*/React.createElement(TextInput, {
      maxFontSizeMultiplier: 1.2,
      ref: this.inputRef,
      placeholder: this.props.placeholder,
      placeholderTextColor: TEXT_LIGHT,
      autoCorrect: this.props.autoCorrect != null ? this.props.autoCorrect : false,
      autoFocus: this.props.autoFocus != null ? this.props.autoFocus : false,
      autoGrow: this.props.autoGrow != null ? this.props.autoGrow : false,
      multiline: this.props.multiline != null ? this.props.multiline : false,
      style: [styles.searchText, this.props.style, {
        textAlignVertical: this.props.multiline ? "top" : "center"
      }, this.props.minHeight && {
        minHeight: this.props.minHeight
      }],
      value: this.props.value,
      onChangeText: this.props.onChangeText,
      keyboardType: this.props.keyboardType,
      returnKeyType: this.props.returnKeyType,
      selectionColor: TEXT_DARK,
      underlineColorAndroid: "rgba(0,0,0,0)",
      editable: this.props.editable != null ? this.props.editable : true,
      autoCapitalize: this.props.autoCapitalize || "none",
      onKeyPress: this.props.onKeyPress,
      onSubmitEditing: this.props.onSubmitEditing,
      onFocus: this.props.onFocus,
      onBlur: this.props.onBlur,
      secureTextEntry: this.props.secureTextEntry && !this.state.showSecureText
    }), this.renderRightIcon());
  }
}
const styles = {
  searchInputContainer: {
    flex: 1,
    borderRadius: 25,
    backgroundColor: "#ebeff2",
    alignItems: "center",
    flexDirection: "row",
    paddingHorizontal: 16
  },
  squaredSearchInputContainer: {
    borderRadius: 5,
    paddingHorizontal: 8
  },
  searchIcon: {
    fontSize: 14,
    color: TEXT_LIGHT,
    marginRight: 8
  },
  clearIcon: {
    fontSize: 14,
    color: TEXT_LIGHT,
    marginLeft: 8,
    marginTop: 8,
    marginBottom: 8
  },
  secureIcon: {
    fontSize: 20
  },
  searchText: {
    color: TEXT_DARKEST,
    fontFamily: "sf-regular",
    fontSize: 16,
    flex: 1
  }
};
export { GenericInput };
//# sourceMappingURL=GenericInput.js.map