"use strict";

import React, { forwardRef, useContext, useEffect, useImperativeHandle, useRef, useState } from 'react';
import { Animated, TextInput, TouchableOpacity, View } from 'react-native';
import { ErrorView, getBorderColor } from "./common.js";
import { ApplicationContext } from "../Context/index.js";
import { Spacing, Styles } from "../Consts/index.js";
import { Text } from "../Text/index.js";
import styles from "./styles.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const OTPCaret = ({
  index,
  length
}) => {
  const DURATION = 300;
  const {
    theme
  } = useContext(ApplicationContext);
  const opacity = useRef(new Animated.Value(0)).current;
  useEffect(() => {
    Animated.loop(Animated.sequence([Animated.timing(opacity, {
      toValue: 1,
      duration: DURATION,
      useNativeDriver: true
    }), Animated.delay(DURATION * 2), Animated.timing(opacity, {
      toValue: 0,
      duration: DURATION,
      useNativeDriver: true
    })])).start();
  }, [opacity]);
  const spacingStyle = index !== length - 1 && {
    marginRight: Spacing.L
  };
  return /*#__PURE__*/_jsx(View, {
    style: [styles.otpContainer, spacingStyle],
    children: /*#__PURE__*/_jsx(Animated.View, {
      style: [styles.otpCaret, {
        backgroundColor: theme.colors.primary.default,
        opacity
      }]
    })
  });
};
const InputOTP = /*#__PURE__*/forwardRef(({
  length = 10,
  error,
  floatingValue,
  onChangeText,
  onBlur,
  dataType = 'number',
  style,
  ...props
}, ref) => {
  const {
    theme
  } = useContext(ApplicationContext);
  const inputRef = useRef(null);
  const [value, setValue] = useState('');
  const [focused, setFocused] = useState(false);
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current?.focus();
    },
    blur: () => {
      inputRef.current?.blur();
    },
    clear: () => {
      inputRef.current?.clear();
      setValue('');
    },
    setText: text => {
      _onChangeText?.(text);
    }
  }));
  const onFocusInput = () => {
    setFocused(true);
    inputRef.current?.focus();
  };
  const onBlurInput = e => {
    setFocused(false);
    onBlur?.(e);
  };
  const _onChangeText = text => {
    if (text.length > length) {
      return;
    }
    if (dataType === 'number' && isNaN(Number(text))) {
      return;
    }
    setValue(text);
    onChangeText?.(text);
  };
  const renderInputs = index => {
    const TextInputs = [];
    for (let i = 0; i < index; i++) {
      const styleItem = i !== index - 1 && {
        marginRight: Spacing.L
      };
      let item = /*#__PURE__*/_jsx(View, {
        style: [styles.otpItem, {
          backgroundColor: theme.colors.text.default
        }, styleItem]
      });
      if (value[i]) {
        item = /*#__PURE__*/_jsx(Text, {
          style: [styles.otpContainer, styleItem],
          typography: 'headline',
          fontWeight: "bold",
          children: value[i]
        });
      }
      TextInputs.push(/*#__PURE__*/_jsx(View, {
        children: focused && value.length === i ? /*#__PURE__*/_jsx(OTPCaret, {
          index: i,
          length: index
        }) : item
      }, `OTPCaret${i}`));
    }
    return TextInputs;
  };
  const renderInputView = () => {
    return /*#__PURE__*/_jsxs(View, {
      style: [styles.otpInput, {
        backgroundColor: theme.colors.background.surface
      }, getBorderColor(theme, focused, error)],
      children: [!!floatingValue && /*#__PURE__*/_jsx(View, {
        style: [styles.otpFloatingView, {
          backgroundColor: theme.colors.background.surface
        }],
        children: /*#__PURE__*/_jsx(Text, {
          typography: 'caption1',
          children: floatingValue
        })
      }), /*#__PURE__*/_jsx(View, {
        style: styles.otpInputsView,
        children: length ? renderInputs(length) : renderInputs(value.length + 1)
      }), /*#__PURE__*/_jsx(View, {
        style: styles.inputView,
        children: /*#__PURE__*/_jsx(TextInput, {
          ...props,
          ref: inputRef,
          value: value,
          onChangeText: _onChangeText,
          keyboardType: dataType === 'number' ? 'number-pad' : 'default',
          onFocus: onFocusInput,
          onBlur: onBlurInput,
          style: styles.otpTextInput,
          selectionColor: theme.colors.primary.default,
          placeholderTextColor: theme.colors.text.hint
        })
      })]
    });
  };
  return /*#__PURE__*/_jsxs(TouchableOpacity, {
    activeOpacity: 1,
    onPress: onFocusInput,
    style: [style, styles.otpWrapper],
    children: [renderInputView(), /*#__PURE__*/_jsx(ErrorView, {
      error: error,
      style: Styles.rowCenter
    })]
  });
});
export default InputOTP;
//# sourceMappingURL=InputOTP.js.map