// Metro module 9261 (f9262).
import _slicedToArray from "../../../_bundle/_slicedToArray";
import { useState, useRef, useEffect } from "react";
import { ScrollView, View } from "react-native";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { TextInput } from "../../../design/void/native";
import * as _TextInput_native from "../../../design/components/TextInput/native/TextInput.native";
import { intl, t } from "../../../intl/index.native";
import { Button } from "../../../design/components/Button/native/Button.native";
import { Text } from "../../../design/components/Text/native/Text";
import KeyboardAwareView from "../../keyboard/native/KeyboardAwareView";
let c6092_9, useStyles, CodeFieldInner;
const SingleCodeInput = function SingleCodeInput(props) {
  const { loading = false, error, count = 6, codeType = c6092_9.NUMERIC } = props;
  const NUMERIC = codeType;
  const { onCodeEntered, disabled, code, setCode } = props;
  const styles = useStyles();
  return <View style={styles.singleInputWrapper}>
    <_TextInput_native.TextInput errorMessage={error} value={code} autoCapitalize="characters" maxLength={count} accessibilityLabel={intl.string(t["ysthA+"])} textContentType="oneTimeCode" keyboardType={NUMERIC === c6092_9.NUMERIC ? "number-pad" : "default"} onChange={function handleChange(event) {
      setCode(event.replace(NUMERIC === c6092_9.NUMERIC ? /\D/g : /[^A-Z0-9]/g, ""));
    }} isDisabled={disabled} isClearable autoFocus />
    <View style={styles.singleInputButton}>
      <Button loading={loading} variant="primary" size="lg" text={intl.string(t["13ofGu"])} onPress={function handlePressSubmit() {
        return onCodeEntered(code);
      }} disabled={code.length !== count || disabled} />
    </View>
  </View>;
};
CodeFieldInner = function CodeFieldInner(props) {
  const { title, description, error, onCodeEntered: onCodeEntered2, loading = false, count = 6, codeType = c6092_9.NUMERIC, actions, footer, backgroundStyle, disabled } = props;
  const styles = useStyles();
  const r33 = _slicedToArray(useState(""), 2);
  return <ScrollView style={[styles.background, backgroundStyle]} contentContainerStyle={styles.backgroundFlex} keyboardShouldPersistTaps="handled" alwaysBounceVertical={false}>
    <View style={styles.container}>
      <Text style={styles.title} accessibilityRole="header" variant="heading-xl/extrabold" color="mobile-text-heading-primary">{title}</Text>
      <Text style={styles.subtitle} variant="text-sm/medium" color="text-default">{description}</Text>
      <View style={styles.inputContainer}>
        <SingleCodeInput loading={loading} error={error} count={count} onCodeEntered={onCodeEntered2} codeType={codeType} disabled={disabled} code={r33[0]} setCode={r33[1]} />
      </View>
      {actions}
    </View>
    <KeyboardAwareView>{footer}</KeyboardAwareView>
  </ScrollView>;
};
c6092_9 = {
  NUMERIC: "numeric",
  ALPHANUMERIC: "alphanumeric"
};
useStyles = createStyles({
  viewWrapper: {
    flex: 1
  },
  background: {
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
    flex: 1
  },
  backgroundFlex: {
    flex: 1,
    justifyContent: "space-between"
  },
  container: {
    padding: 16
  },
  title: {
    textAlign: "center"
  },
  subtitle: {
    marginTop: 8,
    lineHeight: 18,
    textAlign: "center"
  },
  inputContainer: {
    marginTop: 20,
    width: "100%",
    alignItems: "center"
  },
  codeContainer: {
    maxWidth: 336,
    width: "100%",
    flexDirection: "row",
    justifyContent: "space-around"
  },
  spacer: {
    width: 4
  },
  inputWrapper: {
    borderWidth: 1,
    borderRadius: 5,
    alignItems: "center",
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWEST,
    borderColor: Module712.colors.BACKGROUND_BASE_LOWEST
  },
  inputWrapperError: {
    borderColor: Module712.unsafe_rawColors.RED_400
  },
  input: {
    textAlign: "center"
  },
  singleInputWrapper: {
    width: "100%"
  },
  singleInputButton: {
    marginTop: 8,
    justifyContent: "flex-end"
  }
});
export default function CodeField(props) {
  const styles = useStyles();
  return props.disableKeyboardAvoidingView ? <CodeFieldInner {...props} /> : <KeyboardAwareView style={styles.viewWrapper}>
    <CodeFieldInner {...props} />
  </KeyboardAwareView>;
};
export { c6092_9 as CodeType };
export function CodeBlocks(props) {
  let env17100 = {};
  const { hasError, onCodeEntered: onCodeEntered2 } = props;
  env17100[0] = onCodeEntered2;
  let count = props.count;
  if (count === void 0) {
    count = 6;
  }
  env17100[1] = count;
  let codeType = props.codeType;
  if (codeType === void 0) {
    codeType = c6092_9.NUMERIC;
  }
  env17100[2] = void 0;
  env17100[3] = void 0;
  env17100[4] = void 0;
  env17100[5] = void 0;
  const styles = useStyles();
  const r37 = _slicedToArray(useState(Array(count).fill("")), 2);
  const r38 = r37[0];
  env17100[2] = r38;
  env17100[3] = r37[1];
  env17100[4] = useRef(Array(count).fill(null));
  env17100[5] = useRef(onCodeEntered2);
  useEffect(() => {
    env17100[5].current = env17100[0];
  });
  useEffect(() => {
    const r5 = env17100[2];
    if (r5.every((item) => item.trim() !== "")) {
      env17100[5].current(r5.join(""));
    }
  }, [r38]);
  const r55 = [];
  const r9 = 0 < count;
  let r1 = 0;
  if (r9) {
    do {
      let c17101_0 = r1;
      const r2 = count / 2;
      const key = r1;
      if (key === r2) {
        r55.push(<View key="spacer" style={styles.spacer} />);
      }
      r55.push(<View key={key} style={[styles.inputWrapper, hasError ? styles.inputWrapperError : null]}>
        <TextInput ref={(a0) => {
          env17100[4].current[c17101_0] = a0;
        }} style={[{
          height: 42,
          width: 252 / count
        }, styles.input]} keyboardType={codeType === c6092_9.NUMERIC ? "phone-pad" : "default"} autoFocus={key === 0} value={r38[key]} onKeyPress={(event) => {
          if (event.nativeEvent.key !== "Backspace") {
            const r31 = env17100[4].current[c17101_0 + 1];
            if (r31 != null) {
              r31.focus();
            }
          } else {
            const r8 = env17100[2];
            if (r8[c17101_0] === "") {
              const r6 = env17100[3];
              const r17 = c17101_0 - 1;
              const r18 = [...r8];
              r18[r17] = "";
              r6(r18);
              const r22 = env17100[4].current[r17];
              if (r22 != null) {
                r22.focus();
              }
            }
          }
        }} onChangeText={(text) => {
          const r8 = text[0];
          const r5 = env17100[2];
          const r22 = (r8 === r5[c17101_0] ? text.slice(1) : text).replace("-", "").trim().toUpperCase();
          let r24 = r22.split("");
          if (r22 === "") {
            r24 = [""];
          }
          const r25 = [...r5];
          r25.splice.apply(r25, [c17101_0, 1, ...r24]);
          (0, env17100[3])(r25.slice(0, env17100[1]));
        }} selection={{
          start: r38[key].length,
          end: r38[key].length
        }} autoCapitalize="characters" autoCorrect={false} />
      </View>);
      r1 = key + 1;
    } while (r1 < count);
  }
  return <View style={styles.codeContainer}>{r55}</View>;
}