import { useAgent } from '@aries-framework/react-hooks';
import { useNavigation } from '@react-navigation/core';
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { StyleSheet, Text, View } from 'react-native';
import ButtonLoading from '../components/animated/ButtonLoading';
import Button, { ButtonType } from '../components/buttons/Button';
import LimitedTextInput from '../components/inputs/LimitedTextInput';
import { InfoBoxType } from '../components/misc/InfoBox';
import PopupModal from '../components/modals/PopupModal';
import KeyboardView from '../components/views/KeyboardView';
import { DispatchAction } from '../contexts/reducers/store';
import { useStore } from '../contexts/store';
import { useTheme } from '../contexts/theme';
import { Screens } from '../types/navigators';
import { generateRandomWalletName } from '../utils/helpers';
import { testIdWithKey } from '../utils/testable';
const NameWallet = () => {
  const {
    t
  } = useTranslation();
  const {
    ColorPallet,
    TextTheme,
    Assets
  } = useTheme();
  const navigation = useNavigation();
  const [store, dispatch] = useStore();
  const {
    agent
  } = useAgent();
  const [walletName, setWalletName] = useState(store.preferences.walletName ?? generateRandomWalletName());
  const [loading, setLoading] = useState(false);
  const onBoardingComplete = store.onboarding.didCompleteTutorial && store.onboarding.didAgreeToTerms && store.onboarding.didCreatePIN && store.onboarding.didConsiderBiometry;
  const [errorState, setErrorState] = useState({
    visible: false,
    title: '',
    description: ''
  });
  const styles = StyleSheet.create({
    screenContainer: {
      height: '100%',
      backgroundColor: ColorPallet.brand.primaryBackground,
      padding: 20,
      justifyContent: 'space-between'
    },
    contentContainer: {
      justifyContent: 'center',
      alignItems: 'center',
      width: '100%'
    },
    // below used as helpful label for view, no properties needed atp
    controlsContainer: {},
    buttonContainer: {
      width: '100%'
    }
  });
  const handleChangeText = text => {
    setWalletName(text);
  };
  const handleCancelPressed = () => {
    navigation.goBack();
  };
  const handleContinuePressed = () => {
    if (walletName.length < 1) {
      setErrorState({
        title: t('NameWallet.EmptyNameTitle'),
        description: t('NameWallet.EmptyNameDescription'),
        visible: true
      });
    } else if (walletName.length > 50) {
      setErrorState({
        title: t('NameWallet.CharCountTitle'),
        description: t('NameWallet.CharCountDescription'),
        visible: true
      });
    } else {
      setLoading(true);
      dispatch({
        type: DispatchAction.UPDATE_WALLET_NAME,
        payload: [walletName]
      });
      if (agent) {
        agent.config.label = walletName;
      }
      dispatch({
        type: DispatchAction.DID_NAME_WALLET
      });
      if (onBoardingComplete) {
        navigation.goBack();
      } else {
        navigation.navigate({
          name: Screens.UseBiometry
        });
      }
    }
  };
  const handleDismissError = () => {
    setErrorState(prev => ({
      ...prev,
      visible: false
    }));
  };
  return /*#__PURE__*/React.createElement(KeyboardView, null, /*#__PURE__*/React.createElement(View, {
    style: styles.screenContainer
  }, /*#__PURE__*/React.createElement(View, {
    style: styles.contentContainer
  }, /*#__PURE__*/React.createElement(Assets.svg.contactBook, {
    height: 100,
    style: {
      marginVertical: 20
    }
  }), /*#__PURE__*/React.createElement(Text, {
    style: [TextTheme.normal, {
      width: '100%',
      marginBottom: 16
    }]
  }, t('NameWallet.ThisIsTheName')), /*#__PURE__*/React.createElement(View, {
    style: {
      width: '100%'
    }
  }, /*#__PURE__*/React.createElement(LimitedTextInput, {
    defaultValue: walletName,
    label: t('NameWallet.NameYourWallet'),
    limit: 50,
    handleChangeText: handleChangeText,
    accessibilityLabel: t('NameWallet.NameYourWallet'),
    testID: testIdWithKey('NameInput')
  }))), /*#__PURE__*/React.createElement(View, {
    style: styles.controlsContainer
  }, /*#__PURE__*/React.createElement(View, {
    style: styles.buttonContainer
  }, /*#__PURE__*/React.createElement(Button, {
    title: onBoardingComplete ? t('Global.Save') : t('Global.Continue'),
    buttonType: ButtonType.Primary,
    testID: onBoardingComplete ? testIdWithKey('Save') : testIdWithKey('Continue'),
    accessibilityLabel: onBoardingComplete ? t('Global.Save') : t('Global.Continue'),
    onPress: handleContinuePressed,
    disabled: loading
  }, loading && /*#__PURE__*/React.createElement(ButtonLoading, null)), onBoardingComplete && /*#__PURE__*/React.createElement(View, {
    style: {
      marginTop: 15
    }
  }, /*#__PURE__*/React.createElement(Button, {
    title: t('Global.Cancel'),
    buttonType: ButtonType.Secondary,
    testID: testIdWithKey('Cancel'),
    accessibilityLabel: t('Global.Cancel'),
    onPress: handleCancelPressed
  }))))), errorState.visible && /*#__PURE__*/React.createElement(PopupModal, {
    notificationType: InfoBoxType.Info,
    onCallToActionLabel: t('Global.Okay'),
    onCallToActionPressed: handleDismissError,
    title: errorState.title,
    description: errorState.description
  }));
};
export default NameWallet;
//# sourceMappingURL=NameWallet.js.map