function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
import React, { Component } from "react";
import { TextInput, View, TouchableOpacity } from "react-native";
import { Text } from ".";
import { connect } from "react-redux";
import { COLOUR_TEAL, COLOUR_TANGERINE, TEXT_DARK, TEXT_LIGHT, TEXT_MID, getMainBrandingColourFromState, getDarkBrandingColourFromState } from "../colours";

/*
Class Breakdown ------ 
    - label: Description tag above the text input
    - value: Users input
    - onChangeText: Sets parent state to users input -- example input: onChangeText={emailLogin => this.setState({ emailLogin })}
    - placeholder: placeholder text when no user input
    - secureTextEntry: used for password input -- hides on front end
    - textColour: define color of user input
    - keyboardType: changes device keyboard exmaples == 'email-address', 'phone-pad' 
    - underlineColorAndroid: Android inputs have an underline.. define color here-- defaults to grey
    - editable: locks user input.. use with loading states
    - hasError: renders space for error feedback below input
    - errorText: displays desired text within above view
*/

class Input extends Component {
  constructor(...args) {
    super(...args);
    _defineProperty(this, "state", {
      height: "auto"
    });
  }
  renderInputChage() {
    if (this.props.toggleInput != null) {
      return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(TouchableOpacity, {
        activeOpacity: 0.9,
        onPress: this.props.toggleInput.bind(this)
      }, /*#__PURE__*/React.createElement(Text, {
        style: [{
          fontFamily: "sf-regular",
          color: COLOUR_TEAL,
          textAlign: "right",
          backgroundColor: "transparent",
          textDecorationLine: "underline"
        }, this.props.toggleInputStyle]
      }, this.props.toggleInputText)));
    }
    return null;
  }
  renderLabel() {
    if (this.props.label) {
      return /*#__PURE__*/React.createElement(View, {
        style: {
          flexDirection: "row",
          justifyContent: "space-between"
        }
      }, /*#__PURE__*/React.createElement(Text, {
        style: [styles.labelStyle, this.props.labelStyle, this.props.hasLabelError && this.props.labelError && {
          color: this.props.colourBrandingMain
        }]
      }, this.props.label), this.props.hasLabelError && /*#__PURE__*/React.createElement(View, {
        style: [{
          height: 5,
          width: 5,
          borderRadius: 3,
          backgroundColor: COLOUR_TEAL,
          alignSelf: "center"
        }, this.props.labelError && {
          backgroundColor: this.props.colourBrandingMain
        }]
      }));
    }
    return null;
  }
  renderErrorField() {
    if (this.props.hasError) {
      return /*#__PURE__*/React.createElement(View, {
        style: [{
          justifyContent: "center"
        }, this.props.errorStyle && this.props.errorText !== " " && this.props.errorStyle]
      }, /*#__PURE__*/React.createElement(Text, {
        style: [styles.errorText]
      }, this.props.errorText));
    }
    return null;
  }
  render() {
    return /*#__PURE__*/React.createElement(View, {
      style: [styles.containerStyle, this.props.containerStyle]
    }, this.renderLabel(), /*#__PURE__*/React.createElement(TextInput, {
      maxFontSizeMultiplier: 1.2,
      secureTextEntry: this.props.secureTextEntry,
      placeholder: this.props.placeholder,
      placeholderTextColor: this.props.placeholderTextColor,
      autoCorrect: this.props.autoCorrect != null ? this.props.autoCorrect : false,
      multiline: this.props.multiline != null ? this.props.multiline : false,
      autoGrow: this.props.autoGrow != null ? this.props.autoGrow : false,
      style: [styles.inputStyle, {
        textAlignVertical: this.props.autoGrow != null ? "top" : "center",
        color: this.props.textColour,
        borderBottomColor: this.props.borderBottomColour != null ? this.props.value.length > 0 || this.props.errorText !== " " || this.props.forceBottomBorder ? this.props.borderBottomColour : TEXT_MID : "rgba(0,0,0,0)",
        borderBottomWidth: this.props.borderBottomColour != null ? 1 : 0,
        height: this.props.autoGrow != null ? Math.max(30, this.state.height) : "auto"
      }, this.props.textStyle],
      value: this.props.value,
      onChangeText: this.props.onChangeText,
      keyboardType: this.props.keyboardType,
      selectionColor: this.props.colourBrandingDark,
      underlineColorAndroid: this.props.underlineColorAndroid != null ? this.props.underlineColorAndroid : "rgba(0,0,0,0)",
      editable: this.props.editable != null ? this.props.editable : true,
      autoCapitalize: this.props.autoCapitalize != null ? this.props.autoCapitalize : "sentences",
      autoFocus: this.props.autoFocus,
      onContentSizeChange: event => {
        this.setState({
          height: event.nativeEvent.contentSize.height
        });
      }
    }), this.renderInputChage(), this.renderErrorField());
  }
}
const styles = {
  labelStyle: {
    fontSize: 15,
    backgroundColor: "transparent",
    fontFamily: "sf-semibold",
    color: TEXT_DARK
  },
  inputStyle: {
    flex: 1,
    marginBottom: 2,
    paddingTop: 0,
    fontSize: 18,
    color: TEXT_DARK,
    fontFamily: "sf-regular",
    borderBottomColor: TEXT_LIGHT
  },
  containerStyle: {
    width: "100%",
    flexDirection: "column"
  },
  errorText: {
    backgroundColor: "transparent",
    color: COLOUR_TANGERINE,
    fontSize: 13,
    fontFamily: "sf-semibold",
    marginTop: 0
  }
};
const mapStateToProps = state => {
  return {
    colourBrandingMain: getMainBrandingColourFromState(state),
    colourBrandingDark: getDarkBrandingColourFromState(state)
  };
};
const input = connect(mapStateToProps, {})(Input);
export { input as Input };
//# sourceMappingURL=Input.js.map