import React, { Component, } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { SoftButtonEmpty } from '../../ButtonEmpty';
import { SoftIcon } from '../../Icon';
import { SoftI18n } from '../../I18n';
export class SoftFilePicker extends Component {
    constructor(props) {
        super(props);
        this.state = {
            promptText: this.props.initialPromptText,
            isHoveringDrop: false,
        };
        this.handleChange = (filesSelected) => {
            if (this.fileInput.files && this.fileInput.files.length > 1) {
                this.setState({ promptText: `${this.fileInput.files.length} ${filesSelected}` });
            }
            else if (this.fileInput.files.length === 0) {
                this.setState({ promptText: this.props.initialPromptText });
            }
            else {
                this.setState({ promptText: this.fileInput.value.split('\\').pop() });
            }
            const { onChange } = this.props;
            if (onChange) {
                onChange(this.fileInput.files);
            }
        };
        this.removeFiles = e => {
            e.stopPropagation();
            e.preventDefault();
            this.fileInput.value = null;
            // @ts-ignore
            this.handleChange();
        };
        this.showDrop = () => {
            if (!this.props.disabled) {
                this.setState({ isHoveringDrop: true });
            }
        };
        this.hideDrop = () => {
            this.setState({ isHoveringDrop: false });
        };
    }
    render() {
        return (React.createElement(SoftI18n, { tokens: ['softFilePicker.clearSelectedFiles', 'softFilePicker.filesSelected'], defaults: ['Clear selected files', 'files selected'] }, ([clearSelectedFiles, filesSelected]) => {
            const { id, name, initialPromptText, className, disabled, compressed, onChange, // eslint-disable-line no-unused-vars
            ...rest } = this.props;
            const classes = classNames('softFilePicker', {
                'softFilePicker__showDrop': this.state.isHoveringDrop,
                'softFilePicker--compressed': compressed,
                'softFilePicker-hasFiles': this.state.promptText !== initialPromptText,
            }, className);
            let clearButton;
            if (this.state.promptText !== initialPromptText) {
                if (compressed) {
                    clearButton = (React.createElement("button", { type: "button", "aria-label": clearSelectedFiles, className: "softFilePicker__clearButton", onClick: this.removeFiles },
                        React.createElement(SoftIcon, { className: "softFilePicker__clearIcon", type: "cross" })));
                }
                else {
                    clearButton = (React.createElement(SoftButtonEmpty, { "aria-label": clearSelectedFiles, className: "softFilePicker__clearButton", size: "xs", onClick: this.removeFiles }, "Remove"));
                }
            }
            else {
                clearButton = null;
            }
            return (React.createElement("div", { className: classes },
                React.createElement("div", { className: "softFilePicker__wrap" },
                    React.createElement("input", Object.assign({ type: "file", id: id, name: name, className: "softFilePicker__input", onChange: () => this.handleChange(filesSelected), ref: (input) => {
                            this.fileInput = input;
                        }, onDragOver: this.showDrop, onDragLeave: this.hideDrop, onDrop: this.hideDrop, disabled: disabled }, rest)),
                    React.createElement("div", { className: "softFilePicker__prompt" },
                        React.createElement(SoftIcon, { className: "softFilePicker__icon", type: "importAction", size: compressed ? 'm' : 'l', "aria-hidden": "true" }),
                        React.createElement("div", { className: "softFilePicker__promptText" }, this.state.promptText),
                        clearButton))));
        }));
    }
}
SoftFilePicker.propTypes = {
    id: PropTypes.string,
    name: PropTypes.string,
    className: PropTypes.string,
    /**
     * The content that appears in the dropzone if no file is attached
     */
    initialPromptText: PropTypes.node,
    /**
     * Use as a callback to access the HTML FileList API
     */
    onChange: PropTypes.func,
    /**
     * Reduces the size to a typical (compressed) input
     */
    compressed: PropTypes.bool,
};
SoftFilePicker.defaultProps = {
    initialPromptText: 'Select or drag and drop a file',
    compressed: false,
};
//# sourceMappingURL=SoftFilePicker.js.map