function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import React, { useState, forwardRef } from 'react';
import { useTranslation } from 'react-i18next';
import { StyleSheet, TouchableOpacity, View } from 'react-native';
import { CodeField, Cursor, useClearByFocusCell } from 'react-native-confirmation-code-field';
import Icon from 'react-native-vector-icons/MaterialIcons';
import { hitSlop, minPINLength } from '../../constants';
import { useTheme } from '../../contexts/theme';
import { testIdWithKey } from '../../utils/testable';
import InlineErrorText from './InlineErrorText';
import { InlineErrorPosition } from '../../types/error';
import { ThemedText } from '../texts/ThemedText';
const PINInputComponent = ({
  label,
  onPINChanged,
  testID,
  accessibilityLabel,
  autoFocus = false,
  inlineMessage
}, ref) => {
  const [PIN, setPIN] = useState('');
  const [showPIN, setShowPIN] = useState(false);
  const {
    t
  } = useTranslation();
  const {
    PINInputTheme
  } = useTheme();
  const cellHeight = 48;
  const onChangeText = value => {
    onPINChanged && onPINChanged(value);
    setPIN(value);
  };
  const [props, getCellOnLayoutHandler] = useClearByFocusCell({
    value: PIN,
    setValue: onChangeText
  });
  const style = StyleSheet.create({
    container: {
      flexDirection: 'column',
      marginBottom: 24
    },
    codeFieldContainer: {
      flex: 1
    },
    cell: {
      height: cellHeight,
      paddingHorizontal: 2,
      backgroundColor: PINInputTheme.cell.backgroundColor
    },
    cellText: {
      color: PINInputTheme.cellText.color,
      textAlign: 'center',
      lineHeight: cellHeight
    },
    hideIcon: {
      paddingHorizontal: 10
    }
  });
  const content = () => /*#__PURE__*/React.createElement(View, {
    style: PINInputTheme.labelAndFieldContainer
  }, /*#__PURE__*/React.createElement(View, {
    style: style.codeFieldContainer
  }, /*#__PURE__*/React.createElement(CodeField, _extends({}, props, {
    testID: testID,
    accessibilityLabel: accessibilityLabel,
    accessible: true,
    value: PIN,
    rootStyle: PINInputTheme.codeFieldRoot,
    onChangeText: onChangeText,
    cellCount: minPINLength,
    keyboardType: "numeric",
    textContentType: "password",
    renderCell: ({
      index,
      symbol,
      isFocused
    }) => {
      let child = '';
      if (symbol) {
        child = showPIN ? symbol : '●'; // Show or hide PIN
      } else if (isFocused) {
        child = /*#__PURE__*/React.createElement(Cursor, null);
      }
      return /*#__PURE__*/React.createElement(View, {
        key: index,
        style: style.cell,
        onLayout: getCellOnLayoutHandler(index)
      }, /*#__PURE__*/React.createElement(ThemedText, {
        variant: "headingThree",
        style: style.cellText,
        maxFontSizeMultiplier: 1
      }, child));
    },
    autoFocus: autoFocus,
    ref: ref
  }))), /*#__PURE__*/React.createElement(TouchableOpacity, {
    style: style.hideIcon,
    accessibilityLabel: showPIN ? t('PINCreate.Hide') : t('PINCreate.Show'),
    accessibilityRole: 'button',
    testID: showPIN ? testIdWithKey('Hide') : testIdWithKey('Show'),
    onPress: () => setShowPIN(!showPIN),
    hitSlop: hitSlop
  }, /*#__PURE__*/React.createElement(Icon, {
    color: PINInputTheme.icon.color,
    name: showPIN ? 'visibility-off' : 'visibility',
    size: 30
  })));
  return /*#__PURE__*/React.createElement(View, {
    style: style.container
  }, label && /*#__PURE__*/React.createElement(ThemedText, {
    variant: "label",
    style: {
      marginBottom: 8
    }
  }, label), (inlineMessage === null || inlineMessage === void 0 ? void 0 : inlineMessage.config.position) === InlineErrorPosition.Above ? /*#__PURE__*/React.createElement(InlineErrorText, {
    message: inlineMessage.message,
    inlineType: inlineMessage.inlineType,
    config: inlineMessage.config
  }) : null, content(), (inlineMessage === null || inlineMessage === void 0 ? void 0 : inlineMessage.config.position) === InlineErrorPosition.Below ? /*#__PURE__*/React.createElement(InlineErrorText, {
    message: inlineMessage.message,
    inlineType: inlineMessage.inlineType,
    config: inlineMessage.config
  }) : null);
};
const PINInput = /*#__PURE__*/forwardRef(PINInputComponent);
export default PINInput;
//# sourceMappingURL=PINInput.js.map