// Metro module 13019 (f13020).
import { useState } from "react";
import { View } from "react-native";
import { OAuthConstants } from "../../../_bundle/Module13020";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import { useUserCodeSubmit } from "../useUserCodeSubmit";
import ActivateDeviceSharedStyles from "./ActivateDeviceSharedStyles";
import { Text } from "../../../design/components/Text/native/Text";
import { intl, t } from "../../../intl/index.native";
import { TextInput } from "../../../design/components/TextInput/native/TextInput.native";
import { Button } from "../../../design/components/Button/native/Button.native";
const useStyles = createStyles({
  text: {
    textAlign: "center"
  }
});
export function UserCodeInput(props) {
  const { onClose, onUserCodeAccepted } = props;
  let prefilledUserCode = props.prefilledUserCode;
  const styles = useStyles();
  if (prefilledUserCode == null) {
    prefilledUserCode = "";
  }
  const [value, setState] = useState(prefilledUserCode);
  const userCodeSubmit = useUserCodeSubmit(value, onUserCodeAccepted, onClose);
  const { manualSubmit, error, submitting } = userCodeSubmit;
  return <>
    <View style={ActivateDeviceSharedStyles.innerContent}>
      <Text variant="heading-lg/bold" color="mobile-text-heading-primary" style={styles.text}>
        {intl.string(t.KYPNUv)}
      </Text>
      <Text variant="text-md/medium" color="text-default" style={styles.text}>
        {intl.string(t.xRHk7f)}
      </Text>
    </View>
    <TextInput onChange={(event) => setState(event)} maxLength={OAuthConstants.USER_CODE_LENGTH} value={value} autoFocus autoComplete="off" placeholder={intl.formatToPlainString(t["0tbz6x"], {
      number: OAuthConstants.USER_CODE_LENGTH
    })} errorMessage={error} />
    <Button size="lg" text={intl.string(t["3PatSz"])} onPress={manualSubmit} loading={submitting} disabled={value.length !== OAuthConstants.USER_CODE_LENGTH} grow />
  </>;
}