"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.CodeInput = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _reactNativeReanimated = _interopRequireDefault(require("react-native-reanimated"));
var _context = require("../../context");
var _IOColors = require("../../core/IOColors");
var _functions = require("../../functions");
var _useErrorShakeAnimation = require("../../utils/hooks/useErrorShakeAnimation");
var _layout = require("../layout");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const DOT_SIZE = 16;
const styles = _reactNative.StyleSheet.create({
  dotShape: {
    width: DOT_SIZE,
    height: DOT_SIZE,
    borderRadius: DOT_SIZE / 2,
    borderWidth: 2
  }
});
const EmptyDot = ({
  color: borderColor
}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
  style: [styles.dotShape, {
    borderColor,
    backgroundColor: (0, _IOColors.hexToRgba)(borderColor, 0)
  }]
});
const FilledDot = ({
  color: backgroundColor
}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
  style: [styles.dotShape, {
    backgroundColor,
    borderColor: backgroundColor
  }]
});
const CodeInput = ({
  length,
  value,
  onValueChange,
  variant = "primary",
  onValidate
}) => {
  const [status, setStatus] = (0, _react.useState)("default");
  const {
    themeType,
    theme
  } = (0, _context.useIOThemeContext)();
  const {
    translate,
    animatedStyle,
    shakeAnimation
  } = (0, _useErrorShakeAnimation.useErrorShakeAnimation)();

  /* Empty Dot
  - Right color depending on both theme and variant */
  const emptyDotColorLightBg = _IOColors.IOColors["grey-650"];
  const emptyDotColorDarkBg = _IOColors.IOColors["grey-300"];
  const emptyDotColorAccentBg = (0, _IOColors.hexToRgba)(_IOColors.IOColors.white, 0.75);
  const emptyDotColorThemeBased = themeType === "light" ? emptyDotColorLightBg : emptyDotColorDarkBg;
  const emptyDotColor = variant === "primary" ? emptyDotColorAccentBg : emptyDotColorThemeBased;

  /* Filled Dot
  - Right color depending on theme, variant and status */
  const filledDotColorLightBg = _IOColors.IOColors.black;
  const filledDotColorDarkBg = _IOColors.IOColors.white;
  const filledDotColorError = variant === "primary" ? _IOColors.IOColors["error-400"] : _IOColors.IOColors[theme.errorText];
  const filledDotColorThemeBased = themeType === "light" ? filledDotColorLightBg : filledDotColorDarkBg;
  const filledDotColor = status === "error" ? filledDotColorError : variant === "primary" ? filledDotColorDarkBg : filledDotColorThemeBased;
  (0, _react.useEffect)(() => {
    if (onValidate && value.length === length) {
      const isValid = onValidate(value);
      if (!isValid) {
        setStatus("error");
        (0, _functions.triggerHaptic)("notificationError");

        // eslint-disable-next-line functional/immutable-data
        translate.value = shakeAnimation();
        const timer = setTimeout(() => {
          setStatus("default");
          onValueChange("");
        }, 500);
        return () => clearTimeout(timer);
      }
    }
    return;
  }, [value, onValidate, length, onValueChange, translate, shakeAnimation]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
    style: [{
      flexDirection: "row",
      justifyContent: "center"
    }, animatedStyle],
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_layout.HStack, {
      space: DOT_SIZE,
      children: [...Array(length)].map((_, i) => value[i] ? /*#__PURE__*/(0, _jsxRuntime.jsx)(FilledDot, {
        color: filledDotColor
      }, i) : /*#__PURE__*/(0, _jsxRuntime.jsx)(EmptyDot, {
        color: emptyDotColor
      }, i))
    })
  });
};
exports.CodeInput = CodeInput;
//# sourceMappingURL=CodeInput.js.map