'use strict';

var tslib_es6 = require('./tslib.es6-cjs.js');
var React = require('react');
var Avatar = require('./Avatar-cjs.js');
var InputFile = require('./InputFile-cjs.js');
var ProgressBar = require('./ProgressBar-cjs.js');
var Button = require('./Button-cjs.js');
require('classnames');

var styles = {"inputAvatar":"CMahTsC0SPE-","preview":"VOVr4KEFeVk-","centered":"HzGL7-Sfok4-","overlay":"Cflv-yL6aVQ-","spinning":"aeMMyPDHQho-"};

function InputAvatar(_a) {
    var { getUploadParams, onUploadComplete, onChange } = _a, avatarProps = tslib_es6.__rest(_a, ["getUploadParams", "onUploadComplete", "onChange"]);
    const [progress, setProgress] = React.useState(1);
    return (React.createElement("div", { className: styles.inputAvatar },
        React.createElement("div", { className: styles.preview },
            React.createElement(Avatar.Avatar, Object.assign({ size: "large" }, avatarProps)),
            progress < 1 && (React.createElement(Overlay, null,
                React.createElement(Centered, null,
                    React.createElement(ProgressBar.ProgressBar, { size: "small", currentStep: progress * 100, totalSteps: 100 }))))),
        React.createElement(InputFile.InputFile, { variation: "button", buttonLabel: avatarProps.imageUrl ? "Change Image" : undefined, size: "small", allowedTypes: "images", getUploadParams: getUploadParams, onUploadStart: handleChange, onUploadProgress: handleUpload, onUploadComplete: handleUploadComplete }),
        avatarProps.imageUrl != undefined && progress === 1 && (React.createElement(Button.Button, { label: "Remove", size: "small", type: "secondary", variation: "destructive", onClick: clearAvatar }))));
    function handleChange(newFile) {
        onChange && onChange(newFile);
        handleUpload(newFile);
    }
    function handleUploadComplete(newFile) {
        onUploadComplete && onUploadComplete(newFile);
        handleUpload(newFile);
    }
    function handleUpload(newFile) {
        return tslib_es6.__awaiter(this, void 0, void 0, function* () {
            setProgress(newFile.progress);
        });
    }
    function clearAvatar() {
        onChange && onChange(undefined);
        setProgress(1);
    }
}
function Overlay({ children }) {
    return React.createElement("div", { className: styles.overlay }, children);
}
function Centered({ children }) {
    // Note: this HIGHLY experimental Centered component is applying margin.
    return React.createElement("div", { className: styles.centered }, children);
}

exports.InputAvatar = InputAvatar;
