"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const formik_1 = require("formik");
const react_core_1 = require("@patternfly/react-core");
const utils_1 = require("./utils");
const use_translation_wrapper_1 = require("../../../hooks/use-translation-wrapper");
const exclamation_circle_icon_1 = require("@patternfly/react-icons/dist/js/icons/exclamation-circle-icon");
const MAX_FILE_SIZE = 2048;
const ACCEPTED_FILES = { 'application/x-ssh-key': ['.pub'] };
const UploadField = ({ label, labelIcon, helperText, getErrorText, isRequired, children, idPostfix, isDisabled, name, onBlur, allowEdittingUploadedText = true, }) => {
    const { t } = (0, use_translation_wrapper_1.useTranslation)();
    const [filename, setFilename] = React.useState();
    const [isFileUploading, setIsFileUploading] = React.useState(false);
    const [field, { touched, error }, { setValue, setTouched }] = (0, formik_1.useField)(name);
    const fieldId = (0, utils_1.getFieldId)(name, 'input', idPostfix);
    const isValid = !((touched || filename) && error);
    const getErrorMessage = () => {
        if (!isValid && error) {
            return getErrorText ? getErrorText(error) : error;
        }
        return '';
    };
    const errorMessage = getErrorMessage();
    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' }, validated: isValid ? 'default' : 'error', isRequired: isRequired, "aria-describedby": `${fieldId}-helper`, type: "text", value: field.value, filename: filename, "data-testid": `upload-field-${fieldId}`, onDataChange: (_event, file) => {
                setValue(file);
                setTouched(true);
            }, onTextChange: (_event, file) => {
                setValue(file);
                setTouched(true);
            }, onFileInputChange: (_event, file) => {
                setFilename(file.name);
                setTouched(true);
            }, onBlur: (e) => {
                const file = field.value;
                if (file instanceof File) {
                    const reader = new FileReader();
                    reader.onload = (event) => {
                        if (event.target) {
                            const contentAsString = event.target.result;
                            onBlur && onBlur(e, contentAsString);
                        }
                    };
                    // Read the file content as text
                    reader.readAsText(file);
                }
                else {
                    onBlur && onBlur(e, file);
                }
            }, onReadStarted: () => setIsFileUploading(true), onReadFinished: () => setIsFileUploading(false), isLoading: isFileUploading, disabled: isDisabled, allowEditingUploadedText: allowEdittingUploadedText, dropzoneProps: {
                accept: ACCEPTED_FILES,
                maxSize: MAX_FILE_SIZE,
            }, onClearClick: () => {
                setFilename('');
                setValue('');
            } }),
        (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.ExclamationCircleIcon, null), variant: errorMessage ? 'error' : 'default', id: errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper`, "data-testid": `input-uploadfield-${fieldId}-helper-text` }, errorMessage ? errorMessage : helperText))))));
};
exports.default = UploadField;
//# sourceMappingURL=UploadField.js.map