import React from 'react';
import { Add } from '@wix/wix-ui-icons-common';
import uniqueId from 'lodash/uniqueId';
import { classes } from './FilePicker.st.css.js';
import FormField from '../FormField';
import TextButton from '../TextButton';
import Text from '../Text';
import FileUpload from '../FileUpload';
import { IconThemeContext } from '../WixDesignSystemIconThemeProvider/IconThemeContext';
/**
 * # `<FilePicker/>`
 *
 * Component that opens system browser dialog for choosing files to upload
 */
class FilePicker extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            selectedFileName: props.subLabel,
        };
        this.id = props.id || uniqueId('file_picker_input_');
    }
    /** A callback which is invoked every time a file is chosen */
    onChooseFile(file) {
        const { maxSize, onChange } = this.props;
        if (file) {
            onChange(file);
            if (file.size <= maxSize) {
                this.setState({ selectedFileName: file.name });
            }
        }
    }
    render() {
        const { header, mainLabel, supportedFormats, error, errorMessage, name, dataHook, } = this.props;
        return (React.createElement(IconThemeContext.Consumer, null, ({ icons = {} }) => {
            const AddIcon = icons.FilePicker?.Add || Add;
            return (React.createElement(FileUpload, { accept: supportedFormats, onChange: files => this.onChooseFile(files[0]), name: name }, ({ openFileUploadDialog }) => (React.createElement(FormField, { label: header, dataHook: dataHook },
                React.createElement("label", { className: classes.label, onClick: openFileUploadDialog },
                    React.createElement("div", { className: classes.icon },
                        React.createElement(AddIcon, null)),
                    React.createElement("div", { className: classes.content },
                        React.createElement(TextButton, { dataHook: "main-label" }, mainLabel),
                        React.createElement(Text, { className: classes.info, size: "small", secondary: true, dataHook: "sub-label" }, this.state.selectedFileName),
                        error && (React.createElement(Text, { skin: "error", size: "small", dataHook: "filePicker-error" }, errorMessage))))))));
        }));
    }
}
FilePicker.displayName = 'FilePicker';
FilePicker.defaultProps = {
    mainLabel: 'Choose File',
    subLabel: 'No file chosen (Max size 5 MB)',
    onChange: () => { },
    supportedFormats: '*',
    errorMessage: '',
    maxSize: 5000000, // 5MB
};
export default FilePicker;
//# sourceMappingURL=FilePicker.js.map