"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _color = _interopRequireDefault(require("color"));
var _reactNativeMaskInput = require("react-native-mask-input");
var _constants = require("./constants");
var _helpers = require("./helpers");
var _Text = _interopRequireDefault(require("../Typography/Text"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
const OUTLINE_MINIMIZED_LABEL_Y_OFFSET = -6;
const LABEL_PADDING_TOP = 8;
const MIN_HEIGHT = 80;
const MIN_DENSE_HEIGHT = 48;
const INPUT_PADDING_HORIZONTAL = 22;
const TextInputCard = _ref => {
  let {
    disabled = false,
    editable = true,
    label,
    error = false,
    selectionColor,
    underlineColor: _underlineColor,
    outlineColor: customOutlineColor,
    activeOutlineColor,
    dense,
    style,
    theme,
    parentState,
    innerRef,
    onFocus,
    forceFocus,
    onBlur,
    onChangeText,
    onLayoutAnimatedText,
    onLeftAffixLayoutChange,
    onRightAffixLayoutChange,
    left,
    right,
    placeholderTextColor,
    ...rest
  } = _ref;
  const {
    colors,
    fonts
  } = theme;
  const font = fonts.semiBold;
  const hasActiveOutline = parentState.focused || error;
  const [cardExpiration, setcardExpiration] = React.useState('');
  const expirationMask = [/\d/, /\d/, '/', /\d/, /\d/];
  const maskedCardExpirationInputProps = (0, _reactNativeMaskInput.useMaskedInputProps)({
    value: cardExpiration,
    onChangeText: setcardExpiration,
    mask: expirationMask
  });
  const [cardNumber, setcardNumber] = React.useState('');
  const maskedCardNumberInputProps = (0, _reactNativeMaskInput.useMaskedInputProps)({
    value: cardNumber,
    onChangeText: setcardNumber,
    mask: _reactNativeMaskInput.Masks.CREDIT_CARD
  });
  const [cardCVC, setCardCVC] = React.useState('');
  const CVCMask = [/\d/, /\d/, /\d/];
  const maskedCardCVCInputProps = (0, _reactNativeMaskInput.useMaskedInputProps)({
    value: cardCVC,
    onChangeText: setCardCVC,
    mask: CVCMask
  });
  const {
    fontSize: fontSizeStyle,
    fontWeight,
    lineHeight,
    height,
    backgroundColor = colors.bg.subtle,
    textAlign,
    ...viewStyle
  } = _reactNative.StyleSheet.flatten(style) || {};
  const fontSize = fontSizeStyle || _constants.MAXIMIZED_LABEL_FONT_SIZE;
  let inputTextColor, activeColor, outlineColor, placeholderColor, errorColor;
  if (disabled) {
    const isTransparent = (0, _color.default)(customOutlineColor).alpha() === 0;
    inputTextColor = activeColor = (0, _color.default)(colors.text).alpha(0.54).rgb().string();
    placeholderColor = colors.disabled;
    outlineColor = isTransparent ? customOutlineColor : colors.disabled;
  } else {
    inputTextColor = colors.text;
    activeColor = error ? colors.error.default : activeOutlineColor || colors.primary.default;
    placeholderColor = colors.fg.subtle;
    outlineColor = customOutlineColor || colors.placeholder;
    errorColor = colors.error;
  }
  const minInputHeight = (dense ? MIN_DENSE_HEIGHT : MIN_HEIGHT) - LABEL_PADDING_TOP;
  const labelScale = _constants.MINIMIZED_LABEL_FONT_SIZE / fontSize;
  const fontScale = _constants.MAXIMIZED_LABEL_FONT_SIZE / fontSize;
  const labelHeight = parentState.labelLayout.height;
  const labelHalfHeight = labelHeight / 2;
  const inputHeight = (0, _helpers.calculateInputHeight)(labelHeight, height, minInputHeight);
  const paddingSettings = {
    height: height ? +height : null,
    labelHalfHeight,
    offset: LABEL_PADDING_TOP,
    dense: dense ? dense : null,
    topPosition: 24,
    fontSize,
    lineHeight,
    label,
    scale: fontScale,
    isAndroid: _reactNative.Platform.OS === 'android',
    multiline: null,
    styles: _reactNative.StyleSheet.flatten(dense ? styles.inputOutlinedDense : styles.inputOutlined)
  };
  const pad = (0, _helpers.calculatePadding)(paddingSettings);
  const paddingOut = (0, _helpers.adjustPaddingOut)({
    ...paddingSettings,
    pad
  });
  const InputProps = {
    ...rest,
    ref: innerRef,
    // onChangeText,
    // placeholder: label ? parentState.placeholder : rest.placeholder,
    placeholderTextColor: placeholderTextColor || placeholderColor,
    editable: !disabled && editable,
    selectionColor: typeof selectionColor === 'undefined' ? activeColor : selectionColor,
    onFocus,
    onBlur,
    underlineColorAndroid: 'transparent',
    style: [styles.input, {
      height: inputHeight
    }, paddingOut, {
      ...font,
      fontSize: 14,
      top: 32,
      fontWeight,
      color: inputTextColor,
      textAlignVertical: 'top',
      textAlign: textAlign ? textAlign : _reactNative.I18nManager.isRTL ? 'right' : 'left'
    }]
  };
  const CardNumber = {
    ...InputProps,
    style: [...InputProps.style, {
      width: '60%'
    }, _reactNative.Platform.OS === 'web' && {
      outline: 'none',
      fontFamily: 'Inter'
    }],
    ...maskedCardNumberInputProps,
    placeholder: 'Card Number'
  };
  const CardExpiration = {
    ...InputProps,
    style: [...InputProps.style, _reactNative.Platform.OS === 'web' && {
      outline: 'none',
      fontFamily: 'Inter'
    }, {
      paddingLeft: 0,
      paddingRight: 0,
      borderRadius: 0,
      width: '50%'
    }],
    ...maskedCardExpirationInputProps,
    placeholder: 'MM/YY'
  };
  const CardCVC = {
    ...InputProps,
    ...maskedCardCVCInputProps,
    placeholder: 'CVC',
    style: [...InputProps.style, _reactNative.Platform.OS === 'web' && {
      outline: 'none',
      fontFamily: 'Inter'
    }, {
      paddingLeft: 0,
      paddingRight: 0,
      borderRadius: 0,
      width: '50%'
    }]
  };
  return /*#__PURE__*/React.createElement(_reactNative.KeyboardAvoidingView, {
    style: {
      ...viewStyle
    },
    keyboardVerticalOffset: _reactNative.Platform.OS === 'ios' ? 40 : 0,
    behavior: _reactNative.Platform.OS === 'ios' ? 'padding' : 'height'
  }, /*#__PURE__*/React.createElement(_reactNative.View, {
    testID: "text-input-outline",
    pointerEvents: "none",
    style: [styles.outline,
    // eslint-disable-next-line react-native/no-inline-styles
    {
      backgroundColor,
      borderRadius: theme.roundness,
      borderWidth: parentState.focused ? 2 : 1,
      borderColor: hasActiveOutline ? activeColor : outlineColor
    }]
  }), /*#__PURE__*/React.createElement(_Text.default, {
    style: [styles.label, {
      ...font
    }, _reactNative.Platform.OS === 'web' && {
      minWidth: 0,
      position: 'absolute',
      top: 28
    }, {
      color: theme.colors.fg.subtle
    }]
  }, label), /*#__PURE__*/React.createElement(_reactNative.View, {
    style: [styles.row, _reactNative.Platform.OS === 'web' && {
      paddingTop: 24
    }]
  }, /*#__PURE__*/React.createElement(_reactNative.TextInput, CardNumber), /*#__PURE__*/React.createElement(_reactNative.View, {
    style: {
      flexDirection: 'row',
      justifyContent: 'flex-end',
      width: '35%'
    }
  }, /*#__PURE__*/React.createElement(_reactNative.TextInput, CardExpiration), /*#__PURE__*/React.createElement(_reactNative.TextInput, CardCVC))));
};
var _default = TextInputCard;
exports.default = _default;
const styles = _reactNative.StyleSheet.create({
  row: {
    flexDirection: 'row',
    width: '100%',
    justifyContent: 'space-between',
    alignItems: 'center'
  },
  placeholder: {
    position: 'absolute',
    left: 0,
    paddingHorizontal: INPUT_PADDING_HORIZONTAL
  },
  outline: {
    position: 'absolute',
    left: 0,
    right: 0,
    top: 6,
    bottom: 0
  },
  labelContainer: {
    paddingBottom: 0
  },
  input: {
    paddingHorizontal: INPUT_PADDING_HORIZONTAL,
    margin: 0,
    zIndex: 1,
    lineHeight: 22
  },
  inputOutlined: {
    paddingTop: 8,
    paddingBottom: 8
  },
  inputOutlinedDense: {
    paddingTop: 4,
    paddingBottom: 4
  },
  label: {
    letterSpacing: 0.9,
    textTransform: 'uppercase',
    fontSize: 10,
    top: 24,
    paddingHorizontal: INPUT_PADDING_HORIZONTAL
  }
});
//# sourceMappingURL=TextInputCard.js.map