import PropTypes from 'prop-types';
import React, { useState } from 'react';
import { useSelector } from 'react-redux';
import FileInput from 'react-simple-file-input';
import {
ButtonLink,
FormTextField,
Text,
TEXT_FIELD_SIZES,
TEXT_FIELD_TYPES,
} from '../../../components/component-library';
import {
Size,
TextVariant,
TextAlign,
} from '../../../helpers/constants/design-system';
import ZENDESK_URLS from '../../../helpers/constants/zendesk-url';
import { useI18nContext } from '../../../hooks/useI18nContext';
import { displayWarning } from '../../../store/actions';
import BottomButtons from './bottom-buttons';
JsonImportSubview.propTypes = {
importAccountFunc: PropTypes.func.isRequired,
};
export default function JsonImportSubview({ importAccountFunc }) {
const t = useI18nContext();
const warning = useSelector((state) => state.appState.warning);
const [password, setPassword] = useState('');
const [fileContents, setFileContents] = useState('');
const isPrimaryDisabled = fileContents === '';
function handleKeyPress(event) {
if (!isPrimaryDisabled && event.key === 'Enter') {
event.preventDefault();
_importAccountFunc();
}
}
function _importAccountFunc() {
if (isPrimaryDisabled) {
displayWarning(t('needImportFile'));
} else {
importAccountFunc('JSON File', [fileContents, password]);
}
}
return (
<>
{t('usedByClients')}
{t('fileImportFail')}
setFileContents(event.target.result)}
style={{
padding: '20px 0px 12px 15%',
fontSize: '16px',
display: 'flex',
justifyContent: 'center',
width: '100%',
}}
/>
{
setPassword(event.target.value);
}}
inputProps={{
onKeyPress: handleKeyPress,
}}
marginBottom={4}
/>
>
);
}