'use strict';

var React = require('react');
var getHumanReadableFileSize = require('filesize');
var classnames = require('classnames');
var Thumbnail = require('./Thumbnail-cjs.js');
var Text = require('./Text-cjs.js');
var ProgressBar = require('./ProgressBar-cjs.js');
var Button = require('./Button-cjs.js');
var ConfirmationModal = require('./ConfirmationModal-cjs.js');

var styles = {"formatFile":"y9T1gWK9SHY-","expanded":"_6qcLC0nLki0-","compact":"cSm0ukEQcOU-","wrapper":"TEarBLxe1QY-","large":"rha7bX0NCtI-","base":"_7kv4ujgaxNk-","thumbnail":"Km0E9H-xb-M-","deleteButton":"d2l80-AKBiU-","customDeleteButton":"qDKY-J4vHJA-","clickable":"f7xR4ZcqlLo-","hoverable":"LxLX5kFFkfI-","progress":"_121nzRvOA-0-","contentBlock":"cyiC2EalTkQ-","deleteable":"qwQuqw4uODY-","spinning":"dR8gWEecWxc-"};

const useFormatFile = ({ file }) => {
    const isComplete = file.progress >= 1;
    const fileSize = getHumanReadableFileSize(file.size);
    return {
        isComplete,
        fileSize,
    };
};

const useFormatFileStyles = ({ display = "expanded", displaySize = "base", onClick, onDelete, isComplete, }) => {
    const wrapperClassNames = classnames(styles[display], styles.formatFile, {
        [styles[displaySize]]: display === "compact",
    });
    const detailsClassNames = classnames(styles.wrapper, {
        [styles[displaySize]]: display === "compact",
        [styles.hoverable]: isHoverable({ display, isComplete, onClick, onDelete }),
        [styles.clickable]: onClick,
        [styles.deleteable]: display === "compact",
    });
    const thumbnailContainerClassNames = classnames(styles.thumbnail, styles[displaySize]);
    return {
        deleteButtonContainerClassNames: styles.deleteButton,
        detailsClassNames,
        progressClassNames: styles.progress,
        thumbnailContainerClassNames,
        wrapperClassNames,
    };
};
function isHoverable({ display, isComplete, onClick, onDelete, }) {
    if (display === "compact") {
        return Boolean(isComplete && (onClick || onDelete));
    }
    else if (display === "expanded") {
        return Boolean(isComplete && onClick);
    }
    return false;
}

function FormatFile({ file, display = "expanded", displaySize = "base", onDelete, onClick, }) {
    const [deleteConfirmationOpen, setDeleteConfirmationOpen] = React.useState(false);
    const { isComplete, fileSize } = useFormatFile({
        file,
        display,
        displaySize,
        onClick,
        onDelete,
    });
    const { wrapperClassNames, detailsClassNames, progressClassNames, thumbnailContainerClassNames, deleteButtonContainerClassNames, } = useFormatFileStyles({
        display,
        displaySize,
        isComplete,
        onClick,
        onDelete,
    });
    return (React.createElement(FormatFile.Wrapper, { className: wrapperClassNames },
        React.createElement(FormatFile.Body, { type: "button", className: detailsClassNames, onClick: isComplete ? onClick : undefined, tabIndex: 0, ariaBusy: !isComplete, isComplete: isComplete },
            React.createElement(FormatFile.ThumbnailContainer, { className: thumbnailContainerClassNames },
                React.createElement(Thumbnail.Thumbnail, { key: file.key, compact: display === "compact", file: file, size: displaySize }),
                React.createElement(FormatFile.ProgressContainer, { isHidden: isComplete, className: progressClassNames },
                    React.createElement(ProgressBar.ProgressBar, { size: "small", currentStep: file.progress * 100, totalSteps: 100 }))),
            React.createElement(FormatFile.Expanded, { isVisible: display === "expanded", file: file, fileSize: fileSize })),
        React.createElement(FormatFile.DeleteButtonContainer, { className: deleteButtonContainerClassNames, isHidden: !isComplete || onDelete === undefined },
            React.createElement(FormatFile.DeleteButton, { onDelete: () => {
                    setDeleteConfirmationOpen(true);
                } },
                React.createElement(ConfirmationModal.ConfirmationModal, { title: "Confirm Deletion", message: `Are you sure you want to delete this file?`, confirmLabel: "Delete", variation: "destructive", open: deleteConfirmationOpen, onConfirm: () => onDelete === null || onDelete === void 0 ? void 0 : onDelete(), onRequestClose: () => setDeleteConfirmationOpen(false) })))));
}
FormatFile.DeleteButtonContainer = function FormatFileDeleteButtonContainer({ children, className, isHidden, }) {
    if (isHidden)
        return null;
    return React.createElement("div", { className: className }, children);
};
FormatFile.ProgressContainer = function FormatFileProgressContainer({ isHidden, children, className, }) {
    if (isHidden)
        return null;
    return React.createElement("div", { className: className }, children);
};
FormatFile.ThumbnailContainer = function FormatFileThumbnailContainer({ children, className, }) {
    return React.createElement("div", { className: className }, children);
};
FormatFile.Body = function FormatFileBody({ children, className, type, onClick, tabIndex, ariaBusy, isComplete, }) {
    const FormatFileBodyTag = isComplete && onClick ? "button" : "div";
    return (React.createElement(FormatFileBodyTag, { type: type, className: className, onClick: onClick, tabIndex: tabIndex, "aria-busy": ariaBusy }, children));
};
FormatFile.Expanded = function FormatFileExpanded({ file, fileSize, isVisible, }) {
    if (!isVisible)
        return null;
    return (React.createElement("div", { className: styles.contentBlock },
        React.createElement(Text.Text, { size: "base" }, file.name),
        React.createElement(Text.Text, { size: "small" }, fileSize)));
};
FormatFile.Wrapper = function FormatFileWrapper({ children, className, }) {
    return React.createElement("div", { className: className }, children);
};
FormatFile.DeleteButton = function FormatFileDeleteButton({ onDelete, children, }) {
    return (React.createElement(React.Fragment, null,
        React.createElement(Button.Button, { UNSAFE_className: {
                container: styles.customDeleteButton,
            }, onClick: onDelete, variation: "destructive", type: "tertiary", icon: "trash", ariaLabel: "Delete File", size: "small" }),
        children));
};

exports.FormatFile = FormatFile;
exports.useFormatFile = useFormatFile;
exports.useFormatFileStyles = useFormatFileStyles;
