import React, { forwardRef, useMemo } from "react";
import cls from "classnames";
import { extractExtension } from "../Attach/utils";
import { getFileIcon } from "./utils/getFileIcon";
import { base as viewCSS } from "./variations/_view/base";
import { base as sizeCSS } from "./variations/_size/base";
import { base as disabledCSS } from "./variations/_disabled/base";
import { base, FileThumb, ThumbImg } from "./File.styles";
import { classes } from "./File.tokens";
import { CellUI, EmbedIconButtonUI, ProgressBarCircularUI, ProgressUI } from "./ui";
export const fileRoot = (Root)=>/*#__PURE__*/ forwardRef((props, ref)=>{
        const { className, // layout
        filename, description, actionContent, actionPlacement = 'right', fileUrl, thumbUrl, thumbIcon, // loader
        loader, isLoading = false, loaderType = 'circular', loaderValue = 0, loaderMaxValue = 100, // variations
        view, size, disabled = false, // events
        onCancel, onActionClick, ...rest } = props;
        const { extension, filenameWithoutExtension } = useMemo(()=>{
            const ext = filename.match(/\./) ? extractExtension(filename) : '';
            const name = ext ? filename.slice(0, -1 - ext.length) : filename;
            return {
                extension: ext || '',
                filenameWithoutExtension: name
            };
        }, [
            filename
        ]);
        const renderAction = ()=>{
            if (isLoading && loaderType === 'circular') {
                return loader || /*#__PURE__*/ React.createElement(ProgressBarCircularUI, {
                    value: loaderValue,
                    maxValue: loaderMaxValue
                }, /*#__PURE__*/ React.createElement(EmbedIconButtonUI, {
                    onClick: onCancel,
                    type: "button",
                    "aria-label": "Cancel"
                }, actionContent));
            }
            if (actionContent) {
                return /*#__PURE__*/ React.createElement(EmbedIconButtonUI, {
                    onClick: onActionClick
                }, actionContent);
            }
            return null;
        };
        const renderFileThumb = ()=>{
            if (actionPlacement === 'left') {
                return renderAction();
            }
            if (thumbUrl) {
                return /*#__PURE__*/ React.createElement(FileThumb, null, /*#__PURE__*/ React.createElement(ThumbImg, {
                    src: thumbUrl,
                    alt: ""
                }));
            }
            if (thumbIcon) {
                return /*#__PURE__*/ React.createElement(FileThumb, null, thumbIcon);
            }
            if (fileUrl) {
                return /*#__PURE__*/ React.createElement(FileThumb, null, getFileIcon(extension, size));
            }
            return null;
        };
        return /*#__PURE__*/ React.createElement(Root, {
            ref: ref,
            className: cls(className, classes.fileItem, {
                [classes.fileLoaderLinear]: loaderType === 'linear'
            }),
            view: view,
            size: size,
            disabled: disabled,
            ...rest
        }, /*#__PURE__*/ React.createElement(CellUI, {
            className: cls({
                [classes.fileActionLeft]: actionPlacement === 'left'
            }),
            filenameWithoutExtension: filenameWithoutExtension,
            extension: extension ? `.${extension}` : '',
            description: description,
            size: size,
            cellContentLeft: renderFileThumb(),
            cellContentRight: actionPlacement === 'right' ? renderAction() : null
        }), isLoading && loaderType === 'linear' && /*#__PURE__*/ React.createElement(React.Fragment, null, loader || /*#__PURE__*/ React.createElement(ProgressUI, {
            displayValue: false,
            value: loaderValue
        })));
    });
export const fileConfig = {
    name: 'File',
    tag: 'div',
    layout: fileRoot,
    base,
    variations: {
        view: {
            css: viewCSS
        },
        size: {
            css: sizeCSS
        },
        disabled: {
            css: disabledCSS,
            attrs: true
        }
    },
    defaults: {
        view: 'default',
        size: 'm'
    }
};
