"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.BoxedInput = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _context = require("../../context");
var _IOColors = require("../../core/IOColors");
var _typography = require("../typography");
var _jsxRuntime = require("react/jsx-runtime");
const MAX_WIDTH = 48;
const MAX_HEIGHT = 64;
const styles = _reactNative.StyleSheet.create({
  boxWrapper: {
    flex: 1,
    maxWidth: MAX_WIDTH,
    maxHeight: MAX_HEIGHT,
    aspectRatio: MAX_WIDTH / MAX_HEIGHT
  },
  baseBox: {
    alignItems: "center",
    justifyContent: "center",
    flex: 1,
    borderRadius: 8,
    borderCurve: "continuous"
  }
});
const SecretValue = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.IOText, {
  font: "FiraCode",
  weight: "Semibold",
  size: 22,
  lineHeight: 33,
  accessible: false,
  children: "•"
});
const BoxedInput = exports.BoxedInput = /*#__PURE__*/(0, _react.memo)(({
  status,
  value,
  secret
}) => {
  const theme = (0, _context.useIOTheme)();
  const statusStyle = (0, _react.useMemo)(() => ({
    error: {
      borderWidth: 1,
      borderColor: _IOColors.IOColors[theme["otpInputBorder-error"]],
      backgroundColor: (0, _IOColors.hexToRgba)(_IOColors.IOColors[theme["otpInputBorder-error"]], 0.15)
    },
    focus: {
      borderWidth: 2,
      borderColor: _IOColors.IOColors[theme["interactiveElem-default"]]
    },
    default: {
      borderWidth: 1,
      borderColor: _IOColors.IOColors[theme["otpInputBorder-default"]]
    }
  }), [theme]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
    style: styles.boxWrapper,
    accessible: false,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
      style: [styles.baseBox, statusStyle[status]],
      children: value && (secret ? /*#__PURE__*/(0, _jsxRuntime.jsx)(SecretValue, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.H6, {
        accessible: false,
        children: value
      }))
    })
  });
});
//# sourceMappingURL=BoxedInput.js.map