"use strict";

exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _novaIcons = require("@coorpacademy/nova-icons");
var _index = _interopRequireDefault(require("../../../hoc/touchable/index.native"));
var _useMobileKeyboardVisibility = _interopRequireDefault(require("../../../util/use-mobile-keyboard-visibility"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
const enabledColor = '#0061ff';
const disabledColor = '#9999A8';
const emailRegex = /^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
const styles = _reactNative.StyleSheet.create({
  container: {
    width: '100%',
    height: '100%',
    flex: 1,
    justifyContent: 'space-between',
    alignItems: 'flex-start',
    paddingVertical: 50,
    paddingHorizontal: 24
  },
  contentWrapper: {
    width: '100%'
  },
  backButton: {
    paddingVertical: 20
  },
  arrowIcon: {
    fill: '#515161',
    width: 24,
    height: 15
  },
  mailIconWrapper: {
    backgroundColor: '#f1f6fe',
    width: 64,
    height: 64,
    padding: 23,
    marginVertical: 24,
    borderRadius: 16,
    justifyContent: 'center',
    alignItems: 'center'
  },
  mailIcon: {
    fill: '#0061ff',
    width: 24,
    height: 18
  },
  innerMailIcon: {
    fill: '#515161',
    width: 16,
    height: 12,
    marginTop: -30,
    marginLeft: 16
  },
  title: {
    color: '#1D1D2B',
    fontSize: 24,
    fontWeight: '600',
    lineHeight: 32,
    textAlign: 'left',
    marginBottom: 12
  },
  explanation: {
    color: '#515161',
    fontSize: 17,
    letterSpacing: 0.4,
    fontWeight: '500',
    lineHeight: 22,
    textAlign: 'left',
    marginBottom: 24
  },
  subtitle: {
    color: '#1D1D2B',
    fontSize: 15,
    fontWeight: '600',
    lineHeight: 20,
    textAlign: 'left',
    marginBottom: 8
  },
  textInput: {
    height: 48,
    width: '100%',
    backgroundColor: '#F4F4F5',
    borderColor: enabledColor,
    borderWidth: 2,
    fontSize: 15,
    lineHeight: 16,
    alignContent: 'center',
    color: '#515161',
    borderRadius: 7,
    paddingHorizontal: 40
  },
  ctaWrapper: {
    width: '100%',
    overflow: 'hidden',
    borderRadius: 12,
    marginTop: 30,
    marginBottom: 50
  },
  ctaButton: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    paddingVertical: 16
  },
  sendIcon: {
    fill: '#fff',
    width: 16,
    height: 16,
    marginRight: 8
  },
  ctaText: {
    color: '#fff',
    fontWeight: '700',
    fontSize: 15,
    lineHeight: 24
  }
});
const ReceiveEmail = props => {
  const {
    locales,
    onClose,
    onSend
  } = props;
  const [email, setEmail] = (0, _react.useState)('');
  const [isValid, setValid] = (0, _react.useState)(false);
  const [isTextInputFocused, setTextInputFocused] = (0, _react.useState)(false);
  const isKeyboardVisible = (0, _useMobileKeyboardVisibility.default)();
  const handleSend = (0, _react.useCallback)(() => {
    onSend(email);
  }, [email, onSend]);
  const handleChangeText = (0, _react.useCallback)(value => {
    setValid(emailRegex.test(value));
    setEmail(value);
  }, []);
  const handleTextInputFocus = (0, _react.useCallback)(() => {
    setTextInputFocused(true);
  }, []);
  const handleTextInputBlur = (0, _react.useCallback)(() => {
    setTextInputFocused(false);
  }, []);
  const animationRef = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
  const animatedColor = animationRef.interpolate({
    inputRange: [0, 1],
    outputRange: [disabledColor, enabledColor]
  });
  (0, _react.useEffect)(() => {
    const animation = _reactNative.Animated.timing(animationRef, {
      toValue: isValid ? 1 : 0,
      duration: 250,
      easing: _reactNative.Easing.out(_reactNative.Easing.sin),
      useNativeDriver: false
    });
    animation.start();
  }, [animationRef, isValid]);
  return /*#__PURE__*/_react.default.createElement(_reactNative.KeyboardAvoidingView, {
    behavior: _reactNative.Platform.OS === 'ios' ? 'padding' : 'height',
    style: [styles.container],
    testID: "receive-email"
  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: styles.contentWrapper
  }, /*#__PURE__*/_react.default.createElement(_index.default, {
    style: styles.backButton,
    onPress: onClose,
    testID: "close-button"
  }, /*#__PURE__*/_react.default.createElement(_novaIcons.NovaCompositionNavigationLeftArrow, {
    style: styles.arrowIcon
  })), isKeyboardVisible ? null : /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: styles.mailIconWrapper
  }, /*#__PURE__*/_react.default.createElement(_novaIcons.NovaCompositionCoorpacademyEmail, {
    style: styles.mailIcon
  })), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
    style: styles.title
  }, locales.title), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
    style: styles.explanation
  }, locales.explanation), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
    style: styles.subtitle
  }, locales.subtitle), /*#__PURE__*/_react.default.createElement(_reactNative.TextInput, {
    style: [styles.textInput, {
      borderWidth: isTextInputFocused ? 2 : 0
    }],
    placeholder: "john.doe@company.com",
    placeholderTextColor: disabledColor,
    onChangeText: handleChangeText,
    onFocus: handleTextInputFocus,
    onBlur: handleTextInputBlur
  }), /*#__PURE__*/_react.default.createElement(_novaIcons.NovaCompositionCoorpacademyEmail, {
    style: styles.innerMailIcon
  })), /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
    style: [styles.ctaWrapper, {
      backgroundColor: animatedColor
    }]
  }, /*#__PURE__*/_react.default.createElement(_index.default, {
    disabled: !isValid,
    style: [styles.ctaButton],
    onPress: handleSend,
    testID: "send-button"
  }, /*#__PURE__*/_react.default.createElement(_novaIcons.NovaCompositionCoorpacademySendEmail, {
    style: styles.sendIcon
  }), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
    style: styles.ctaText
  }, locales.cta))));
};
var _default = exports.default = ReceiveEmail;
//# sourceMappingURL=index.native.js.map