import { useConnectionById } from '@credo-ts/react-hooks';
import { useNavigation } from '@react-navigation/native';
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { StyleSheet, 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 ScreenWrapper from '../components/views/ScreenWrapper';
import { DispatchAction } from '../contexts/reducers/store';
import { useStore } from '../contexts/store';
import { useTheme } from '../contexts/theme';
import { getConnectionName } from '../utils/helpers';
import { testIdWithKey } from '../utils/testable';
import { ThemedText } from '../components/texts/ThemedText';
const RenameContact = ({
  route
}) => {
  const {
    connectionId
  } = route.params;
  const connection = useConnectionById(connectionId);
  const {
    t
  } = useTranslation();
  const {
    ColorPalette
  } = useTheme();
  const navigation = useNavigation();
  const [store, dispatch] = useStore();
  const [contactName, setContactName] = useState(getConnectionName(connection, store.preferences.alternateContactNames));
  const [loading, setLoading] = useState(false);
  const [errorState, setErrorState] = useState({
    visible: false,
    title: '',
    description: ''
  });
  const styles = StyleSheet.create({
    screenContainer: {
      height: '100%',
      backgroundColor: ColorPalette.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 => {
    setContactName(text);
  };
  const handleCancelPressed = () => {
    navigation.goBack();
  };
  const handleContinuePressed = () => {
    if (contactName.length < 1) {
      setErrorState({
        title: t('RenameContact.EmptyNameTitle'),
        description: t('RenameContact.EmptyNameDescription'),
        visible: true
      });
    } else if (contactName.length > 50) {
      setErrorState({
        title: t('RenameContact.CharCountTitle'),
        description: t('RenameContact.CharCountDescription'),
        visible: true
      });
    } else {
      setLoading(true);
      dispatch({
        type: DispatchAction.UPDATE_ALTERNATE_CONTACT_NAMES,
        payload: [{
          [connectionId]: contactName
        }]
      });
      setLoading(false);
      navigation.goBack();
    }
  };
  const handleDismissError = () => {
    setErrorState(prev => ({
      ...prev,
      visible: false
    }));
  };
  return /*#__PURE__*/React.createElement(ScreenWrapper, {
    keyboardActive: true
  }, /*#__PURE__*/React.createElement(View, {
    style: styles.screenContainer
  }, /*#__PURE__*/React.createElement(View, {
    style: styles.contentContainer
  }, /*#__PURE__*/React.createElement(ThemedText, {
    style: {
      width: '100%',
      marginBottom: 16
    }
  }, t('RenameContact.ThisContactName')), /*#__PURE__*/React.createElement(View, {
    style: {
      width: '100%'
    }
  }, /*#__PURE__*/React.createElement(LimitedTextInput, {
    defaultValue: contactName,
    label: t('RenameContact.ContactName'),
    limit: 50,
    handleChangeText: handleChangeText,
    accessibilityLabel: t('RenameContact.ContactName'),
    testID: testIdWithKey('NameInput')
  }))), /*#__PURE__*/React.createElement(View, {
    style: styles.controlsContainer
  }, /*#__PURE__*/React.createElement(View, {
    style: styles.buttonContainer
  }, /*#__PURE__*/React.createElement(Button, {
    title: t('Global.Save'),
    buttonType: ButtonType.Primary,
    testID: testIdWithKey('Save'),
    accessibilityLabel: t('Global.Save'),
    onPress: handleContinuePressed,
    disabled: loading
  }, loading && /*#__PURE__*/React.createElement(ButtonLoading, null)), /*#__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 RenameContact;
//# sourceMappingURL=RenameContact.js.map