"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_core_1 = require("@patternfly/react-core");
const utils_1 = require("./utils");
const use_translation_wrapper_1 = require("../../../hooks/use-translation-wrapper");
const formik_1 = require("formik");
const exclamation_circle_icon_1 = tslib_1.__importDefault(require("@patternfly/react-icons/dist/js/icons/exclamation-circle-icon"));
const CertificatesUploadField = ({ label, labelIcon, helperText, isRequired, children, idPostfix, isDisabled, name, }) => {
    const { t } = (0, use_translation_wrapper_1.useTranslation)();
    const maxFileSize = 100000; //100 kb
    const maxFileSizeKb = 100;
    const acceptedFiles = {
        'application/x-pem-file': ['.pem', '.crt', '.ca', '.cert'],
        'application/x-x509-ca-cert': ['.pem', '.crt', '.ca', '.cert'],
        'text/plain': ['.pem', '.crt', '.ca', '.cert'],
    };
    const fieldId = (0, utils_1.getFieldId)(name, 'input', idPostfix);
    const [field, , { setValue }] = (0, formik_1.useField)(name);
    const [filename, setFilename] = React.useState('');
    const [isLoading, setIsLoading] = React.useState(false);
    const [isRejected, setIsRejected] = React.useState(false);
    const [errorMessage, setErrorMessage] = React.useState('');
    const handleFileInputChange = (_event, file) => {
        setFilename(file.name);
    };
    const handleTextOrDataChange = (value) => {
        const contentFile = new Blob([value], { type: 'text/plain;charset=utf-8' });
        if (contentFile.size > maxFileSize) {
            setIsRejected(true);
            setErrorMessage(t('ai:File size is too big. Upload a new {{maxFileSizeKb}} Kb or less.', { maxFileSizeKb }));
            setValue(value);
        }
        else {
            setIsRejected(false);
            setErrorMessage('');
            setValue(value);
        }
    };
    const handleClear = () => {
        setFilename('');
        setValue('');
        setIsRejected(false);
        setErrorMessage('');
    };
    const handleFileRejected = (_rejectedFiles) => {
        if (_rejectedFiles[0].file.size > maxFileSize) {
            setIsRejected(true);
            setErrorMessage(t('ai:File size is too big. Upload a new {{maxFileSizeKb}} Kb or less.', { maxFileSizeKb }));
        }
        else {
            setIsRejected(true);
            setErrorMessage(t('ai:File type is not supported. File type must be {{acceptedFiles}}.', { acceptedFiles }));
        }
    };
    const handleFileReadStarted = () => {
        setIsLoading(true);
    };
    const handleFileReadFinished = () => {
        setIsLoading(false);
    };
    return (React.createElement(react_core_1.FormGroup, { fieldId: fieldId, label: label, isRequired: isRequired, labelHelp: labelIcon },
        children,
        React.createElement(react_core_1.FileUpload, { filenamePlaceholder: t('ai:Drag a file here or browse to upload'), browseButtonText: t('ai:Browse...'), clearButtonText: t('ai:Clear'), id: field.name, style: { resize: 'vertical' }, isRequired: isRequired, "aria-describedby": `${fieldId}-helper`, type: "text", value: field.value, filename: filename, onFileInputChange: handleFileInputChange, onDataChange: (_event, value) => handleTextOrDataChange(value), onTextChange: (_event, value) => handleTextOrDataChange(value), onReadStarted: handleFileReadStarted, onReadFinished: handleFileReadFinished, onClearClick: handleClear, isLoading: isLoading, dropzoneProps: {
                accept: acceptedFiles,
                maxSize: maxFileSize,
                onDropRejected: handleFileRejected,
            }, validated: isRejected ? 'error' : 'default', disabled: isDisabled, allowEditingUploadedText: true }),
        (errorMessage || helperText) && (React.createElement(react_core_1.FormHelperText, null,
            React.createElement(react_core_1.HelperText, null,
                React.createElement(react_core_1.HelperTextItem, { icon: errorMessage && React.createElement(exclamation_circle_icon_1.default, null), variant: errorMessage ? 'error' : 'default', id: errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper`, "data-testid": "certificates-upload-field-helper-text" }, errorMessage ? errorMessage : helperText))))));
};
exports.default = CertificatesUploadField;
//# sourceMappingURL=CertificatesUploadField.js.map