import React__default, { useState, useEffect } from 'react';
import { useUniqueId } from '../../../utils/uniqueId.mjs';
import { DEFAULT_GRID_COLUMN_WIDTH, DEFAULT_MAX_ITEM_WIDTH } from './constants.mjs';
import OutlinedInput from '../../../../../../node_modules/@mui/material/OutlinedInput/OutlinedInput.mjs';
import styled from '../../../../../../node_modules/@mui/material/styles/styled.mjs';

const InputContainer = styled('div')(({ isMultiline, isReadOnly, fullWidth, theme })=>[
        {
            [theme.breakpoints.down('md')]: {
                width: '100%',
                minWidth: 'unset',
                flex: 1
            },
            width: DEFAULT_GRID_COLUMN_WIDTH,
            minWidth: DEFAULT_GRID_COLUMN_WIDTH,
            display: 'flex',
            flexDirection: 'column',
            gap: theme.spacing(0.5)
        },
        isMultiline && {
            width: '100%',
            maxWidth: DEFAULT_MAX_ITEM_WIDTH
        },
        isReadOnly && {
            // Need this to wrap text and ellipsis after two lines
            display: '-webkit-box',
            '-webkit-line-clamp': '2',
            '-webkit-box-orient': 'vertical',
            overflow: 'hidden',
            overflowWrap: 'break-word'
        },
        fullWidth && {
            width: '100%'
        }
    ]);
const FileUploadContainer = styled('label')(({ theme })=>({
        alignItems: 'center',
        display: 'flex',
        marginBottom: theme.spacing(0.5),
        gap: theme.spacing(0.5)
    }));
const FileUploadHidden = styled('input')({
    display: 'none'
});
const FILE_UPLOAD_ID = 'file-upload';
const FileUpload = ({ onChange, readOnly, filename, setFilename, ButtonComponent: Button, TypographyComponent: Typography })=>{
    const [fileReader] = useState(new FileReader());
    // Need random id to map between multiple fileInputs with potentially the same value.
    const fileInputKey = Math.floor(Math.random() * 10000);
    useEffect(()=>{
        const onLoad = ()=>{
            if (typeof fileReader.result === 'string') {
                onChange?.(fileReader.result);
            }
        };
        fileReader.addEventListener('load', onLoad);
        return ()=>fileReader.removeEventListener('load', onLoad);
    }, [
        fileReader,
        onChange
    ]);
    useEffect(()=>{
        setFilename(null);
    }, [
        readOnly,
        setFilename
    ]);
    const onFileUpload = (event)=>{
        const file = event.target.files ? event.target.files[0] : null;
        const filename = file?.name ? file.name.replace('C:\\fakepath\\', '') : null;
        setFilename(filename);
        if (file) {
            fileReader.readAsText(file);
        }
    };
    // The file input onChange handler won't get called if the user tries to upload the same file again.
    // This method resets the file value to be empty so that the same file can be read again.
    const resetFileUpload = ()=>{
        const inputElement = document.querySelector('input[type=file]');
        if (inputElement) {
            inputElement.value = '';
        }
    };
    // The input value always starts with C:\\fakepath\\, so remove it from filename
    const uploadedFilename = filename ?? 'No file chosen';
    const fileInputId = `${FILE_UPLOAD_ID}-${fileInputKey}`;
    return /*#__PURE__*/ React__default.createElement(FileUploadContainer, {
        htmlFor: fileInputId
    }, /*#__PURE__*/ React__default.createElement(FileUploadHidden, {
        id: fileInputId,
        onChange: onFileUpload,
        onClick: resetFileUpload,
        type: "file"
    }), /*#__PURE__*/ React__default.createElement(Button, {
        compact: true,
        component: "span",
        variant: "ghost"
    }, "Choose file"), /*#__PURE__*/ React__default.createElement(Typography, null, uploadedFilename));
};
const InputCore = ({ caption, copyable, disabled, error, fileUpload, fullWidth, id, inputProps, inputRef, label, multiline, onBlur, onChange, onFocus, onKeyDown, placeholder, readOnly, readOnlyConcealed, required, type, value, inputSx, ButtonComponent, CopyableTextComponent: CopyableText, LabelComponent: Label, TypographyComponent: Typography })=>{
    const inputId = useUniqueId(id);
    const [filename, setFilename] = useState(null);
    const handleOnChange = (e)=>{
        onChange?.(e.target.value);
        if (fileUpload && filename) {
            setFilename(null);
        }
    };
    const showCaption = !!caption && !error;
    const concealedValue = value?.length ? '•'.repeat(Math.min(25, value.length)) : '';
    const visibleValue = readOnlyConcealed ? concealedValue : value;
    const shouldDisable = disabled && !readOnly;
    const showCopyableText = readOnly && copyable && !!visibleValue;
    const showPlainText = readOnly && (!copyable || !visibleValue);
    return /*#__PURE__*/ React__default.createElement(InputContainer, {
        fullWidth: fullWidth,
        isMultiline: multiline,
        isReadOnly: readOnly
    }, label && /*#__PURE__*/ React__default.createElement(Label, {
        variant: "caption",
        disabled: shouldDisable,
        htmlFor: inputId,
        required: required
    }, label), showPlainText && /*#__PURE__*/ React__default.createElement(Typography, null, visibleValue || '–'), showCopyableText && /*#__PURE__*/ React__default.createElement(CopyableText, {
        textToCopy: value
    }, visibleValue), !readOnly && /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, fileUpload && /*#__PURE__*/ React__default.createElement(FileUpload, {
        ButtonComponent: ButtonComponent,
        TypographyComponent: Typography,
        filename: filename,
        onChange: onChange,
        readOnly: shouldDisable,
        setFilename: setFilename
    }), /*#__PURE__*/ React__default.createElement(OutlinedInput, {
        sx: inputSx,
        disabled: shouldDisable,
        error: !!error,
        fullWidth: true,
        id: inputId,
        inputProps: inputProps,
        inputRef: inputRef,
        multiline: multiline,
        onBlur: onBlur,
        onChange: handleOnChange,
        onFocus: onFocus,
        onKeyDown: onKeyDown,
        placeholder: placeholder,
        required: required,
        rows: 3,
        type: type,
        value: value
    }), showCaption && /*#__PURE__*/ React__default.createElement(Typography, {
        disabled: shouldDisable,
        variant: "caption",
        color: "secondary"
    }, caption), error && /*#__PURE__*/ React__default.createElement(Typography, {
        variant: "caption",
        color: "error"
    }, error)));
};

export { InputCore };
//# sourceMappingURL=Input.mjs.map
