import { _ as __rest, a as __awaiter } from './tslib.es6-es.js';
import React__default, { useState } from 'react';
import { A as Avatar } from './Avatar-es.js';
import { I as InputFile } from './InputFile-es.js';
import { P as ProgressBar } from './ProgressBar-es.js';
import { B as Button } from './Button-es.js';
import 'classnames';

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

function InputAvatar(_a) {
    var { getUploadParams, onUploadComplete, onChange } = _a, avatarProps = __rest(_a, ["getUploadParams", "onUploadComplete", "onChange"]);
    const [progress, setProgress] = useState(1);
    return (React__default.createElement("div", { className: styles.inputAvatar },
        React__default.createElement("div", { className: styles.preview },
            React__default.createElement(Avatar, Object.assign({ size: "large" }, avatarProps)),
            progress < 1 && (React__default.createElement(Overlay, null,
                React__default.createElement(Centered, null,
                    React__default.createElement(ProgressBar, { size: "small", currentStep: progress * 100, totalSteps: 100 }))))),
        React__default.createElement(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__default.createElement(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 __awaiter(this, void 0, void 0, function* () {
            setProgress(newFile.progress);
        });
    }
    function clearAvatar() {
        onChange && onChange(undefined);
        setProgress(1);
    }
}
function Overlay({ children }) {
    return React__default.createElement("div", { className: styles.overlay }, children);
}
function Centered({ children }) {
    // Note: this HIGHLY experimental Centered component is applying margin.
    return React__default.createElement("div", { className: styles.centered }, children);
}

export { InputAvatar as I };
