// Metro module 13768 (f13769).
import { useState, useLayoutEffect } from "react";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import { useNavigation } from "../../../../design/components/Navigator/native/useNavigation.native";
import { getHeaderBackButton } from "../../../../design/components/Navigator/native/NavigatorHeader.native";
import { Form, FormInput, FormDivider } from "../../../../design/void/Form/native/index";
import { intl, t } from "../../../../intl/index.native";
import { ClearButtonVisibility } from "../../../../design/void/native";
import { Button } from "../../../../design/components/Button/native/Button.native";
import { editWebAuthnCredential } from "../../WebAuthnActionCreators";
import ToastActionCreators from "../../../toast/native/ToastActionCreators";
import Module9690 from "../../../../_bundle/Module9690";
import { CircleCheckIcon } from "../../../../design/components/Icon/native/redesign/generated/CircleCheckIcon";
const useStyles = createStyles({
  inputField: {
    marginBottom: Module712.space.PX_16
  },
  form: {
    paddingHorizontal: Module712.space.PX_16
  }
});
export default function EditCredentialModal(props) {
  const credential = props.credential;
  const styles = useStyles();
  const navigation = useNavigation();
  const [disabled, setState] = useState(false);
  const [state, onChange] = useState("");
  const [error, setState2] = useState(null);
  useLayoutEffect(() => {
    navigation.setOptions({
      headerLeft: getHeaderBackButton(() => {
        navigation.pop();
      })
    });
  }, [navigation]);
  return <Form style={styles.form}>
    <FormInput showTopContainer={false} value={state} onChange={onChange} style={styles.inputField} error={error} title={intl.string(t["Jzd+z/"])} placeholder={credential.name} disabled={disabled} clearButtonVisibility={ClearButtonVisibility.WITH_CONTENT} autoFocus showBorder required large />
    <FormDivider />
    <Button onPress={function onPress() {
      setState(true);
      setState2(null);
      editWebAuthnCredential(credential.id, state).then(() => {
        ToastActionCreators.open({
          key: "WEBAUTHN_CREDENTIAL_EDIT_SUCCESS_TOAST_KEY",
          content: intl.string(t.IV13mH),
          icon: Module9690,
          IconComponent: CircleCheckIcon,
          iconColor: "status-positive"
        });
        navigation.popToTop();
      }).catch((error) => {
        setState2(error.body.message);
      }).finally(() => {
        setState(false);
      });
    }} disabled={disabled || state === ""} loading={disabled} size="lg" text={intl.string(t["7asiR3"])} grow />
  </Form>;
};