function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import React, { PureComponent } from "react";
import { View, TouchableOpacity } from "react-native";
import { Text } from "./Text";
import { Icon } from "@rneui/themed";
import { connect } from "react-redux";
import { GenericInput } from "./GenericInput";
import { TEXT_DARKEST, COLOUR_GREEN, COLOUR_GRAPEFRUIT, getMainBrandingColourFromState } from "../colours";
import { RadioButton } from "./RadioButton";
class GenericInputSection extends PureComponent {
  renderValidationDot() {
    if (!this.props.required) {
      return null;
    }
    return /*#__PURE__*/React.createElement(View, {
      style: [styles.validatorDot, this.props.isValid() ? styles.validatorTrue : styles.validatorFalse]
    });
  }
  renderLabel() {
    if (!this.props.label) {
      return null;
    }
    return /*#__PURE__*/React.createElement(View, {
      style: styles.labelContainer
    }, /*#__PURE__*/React.createElement(Text, {
      style: [styles.labelText, this.props.labelStyle]
    }, this.props.label), this.renderValidationDot());
  }
  renderRadioOption(label, value, isActive, onChange, style) {
    return /*#__PURE__*/React.createElement(TouchableOpacity, {
      onPress: () => onChange(value),
      key: label,
      style: [styles.radioOption, style],
      hitSlop: {
        top: 8,
        left: 8,
        bottom: 8,
        right: 8
      }
    }, /*#__PURE__*/React.createElement(RadioButton, {
      onPress: () => onChange(value),
      isActive: isActive,
      iconSize: 22,
      style: styles.radioOptionButton
    }), /*#__PURE__*/React.createElement(Text, {
      style: styles.radioOptionText
    }, label));
  }
  renderInput() {
    if (this.props.children) {
      return this.props.children;
    }
    if (this.props.inputType === "toggle") {
      return /*#__PURE__*/React.createElement(View, {
        style: styles.radioOptionsContainer
      }, this.renderRadioOption("Yes", true, this.props.value === true, this.props.onChange), this.renderRadioOption("No", false, this.props.value === false, this.props.onChange));
    }
    if (this.props.inputType === "radio") {
      return /*#__PURE__*/React.createElement(View, null, this.props.options.map(o => {
        return this.renderRadioOption(o.Label, o.Value, this.props.value === o.Value, this.props.onChange, styles.radioOptionVertical);
      }));
    }
    if (this.props.inputType === "optionSelector") {
      return /*#__PURE__*/React.createElement(TouchableOpacity, {
        onPress: this.props.onPress
      }, /*#__PURE__*/React.createElement(View, {
        style: styles.optionSelector
      }, /*#__PURE__*/React.createElement(Text, {
        style: styles.optionSelectorText
      }, this.props.value), /*#__PURE__*/React.createElement(Icon, {
        name: "angle-right",
        type: "font-awesome",
        iconStyle: [styles.optionSelectorIcon, {
          color: this.props.colourBrandingMain
        }]
      })));
    }
    return /*#__PURE__*/React.createElement(GenericInput, _extends({}, this.props, {
      containerStyle: [styles.input, this.props.containerStyle]
    }));
  }
  renderError() {
    if (this.props.showError === true && !this.props.isValid()) {
      return /*#__PURE__*/React.createElement(Text, {
        style: styles.errorText
      }, this.props.errorText || "Required");
    }
    return null;
  }
  render() {
    return /*#__PURE__*/React.createElement(View, {
      style: [styles.container, this.props.sectionStyle]
    }, this.renderLabel(), this.renderInput(), this.renderError());
  }
}
const styles = {
  container: {},
  labelContainer: {
    flexDirection: "row",
    alignItems: "center"
  },
  labelText: {
    fontFamily: "sf-semibold",
    fontSize: 16,
    color: TEXT_DARKEST
  },
  input: {
    marginTop: 8
  },
  validatorDot: {
    height: 6,
    width: 6,
    borderRadius: 3,
    marginLeft: 8
  },
  validatorTrue: {
    backgroundColor: COLOUR_GREEN
  },
  validatorFalse: {
    backgroundColor: COLOUR_GRAPEFRUIT
  },
  radioOptionsContainer: {
    flexDirection: "row",
    alignItems: "center",
    marginTop: 8
  },
  radioOptionVertical: {
    marginTop: 16
  },
  radioOption: {
    flexDirection: "row",
    alignItems: "center",
    marginRight: 24
  },
  radioOptionButton: {
    marginRight: 8
  },
  radioOptionText: {
    fontFamily: "sf-medium",
    fontSize: 14,
    color: TEXT_DARKEST
  },
  optionSelector: {
    marginTop: 8,
    flex: 1,
    height: 36,
    backgroundColor: "#ebeff2",
    alignItems: "center",
    flexDirection: "row",
    justifyContent: "space-between",
    borderRadius: 5,
    paddingHorizontal: 8
  },
  optionSelectorText: {
    color: TEXT_DARKEST,
    fontFamily: "sf-regular",
    fontSize: 16
  },
  errorText: {
    paddingTop: 4,
    fontSize: 13,
    fontFamily: "sf-regular",
    color: COLOUR_GRAPEFRUIT
  }
};
const mapStateToProps = state => {
  return {
    colourBrandingMain: getMainBrandingColourFromState(state)
  };
};
const genericInputSection = connect(mapStateToProps, {})(GenericInputSection);
export { genericInputSection as GenericInputSection };
//# sourceMappingURL=GenericInputSection.js.map