"use strict";

import { memo, useMemo } from "react";
import { StyleSheet, View } from "react-native";
import { useIOTheme } from "../../context";
import { hexToRgba, IOColors } from "../../core/IOColors";
import { H6, IOText } from "../typography";
import { jsx as _jsx } from "react/jsx-runtime";
const MAX_WIDTH = 48;
const MAX_HEIGHT = 64;
const styles = 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__*/_jsx(IOText, {
  font: "FiraCode",
  weight: "Semibold",
  size: 22,
  lineHeight: 33,
  accessible: false,
  children: "•"
});
export const BoxedInput = /*#__PURE__*/memo(({
  status,
  value,
  secret
}) => {
  const theme = useIOTheme();
  const statusStyle = useMemo(() => ({
    error: {
      borderWidth: 1,
      borderColor: IOColors[theme["otpInputBorder-error"]],
      backgroundColor: hexToRgba(IOColors[theme["otpInputBorder-error"]], 0.15)
    },
    focus: {
      borderWidth: 2,
      borderColor: IOColors[theme["interactiveElem-default"]]
    },
    default: {
      borderWidth: 1,
      borderColor: IOColors[theme["otpInputBorder-default"]]
    }
  }), [theme]);
  return /*#__PURE__*/_jsx(View, {
    style: styles.boxWrapper,
    accessible: false,
    children: /*#__PURE__*/_jsx(View, {
      style: [styles.baseBox, statusStyle[status]],
      children: value && (secret ? /*#__PURE__*/_jsx(SecretValue, {}) : /*#__PURE__*/_jsx(H6, {
        accessible: false,
        children: value
      }))
    })
  });
});
//# sourceMappingURL=BoxedInput.js.map