import React, { forwardRef } from "react";
import { safeUseId } from "../../../utils";
import { base as viewCSS } from "./variations/_view/base";
import { base as sizeCSS } from "./variations/_size/base";
import { base as fileContentViewCSS } from "./variations/_fileContentView/base";
import { base, Bubble, FileContentWrapper, ImageWrapper, TextContent, ActionsWrapper, FileUI, ImageComponent, TextAreaUI } from "./UserMessage.styles";
export const userMessageRoot = (Root)=>/*#__PURE__*/ forwardRef(({ textAreaRef, id, name, value, isEditing = false, maxRows = 4, actions, attachments, size, view, attachmentsView, onEdit, onEditKeyDown, onFocus, onBlur, ...rest }, ref)=>{
        const safeId = safeUseId();
        const innerId = id || safeId;
        const isSingleImage = attachments?.length === 1 && attachments[0]?.type === 'image';
        const renderFileAttachments = ()=>{
            if (!attachments) {
                return null;
            }
            if (isSingleImage) {
                return /*#__PURE__*/ React.createElement(ImageWrapper, null, /*#__PURE__*/ React.createElement(ImageComponent, {
                    src: attachments[0]?.thumbUrl,
                    alt: attachments[0]?.label,
                    ratio: "1/1"
                }));
            }
            return /*#__PURE__*/ React.createElement(FileContentWrapper, null, attachments.map(({ id, label, size: fileSize, thumbUrl })=>/*#__PURE__*/ React.createElement(FileUI, {
                    key: id,
                    filename: label || '',
                    description: fileSize,
                    view: attachmentsView,
                    size: size,
                    ...thumbUrl ? {
                        thumbUrl
                    } : {
                        fileUrl: label
                    }
                })));
        };
        return /*#__PURE__*/ React.createElement(Root, {
            ref: ref,
            view: view,
            size: size,
            attachmentsView: attachmentsView,
            ...rest
        }, renderFileAttachments(), (Boolean(value) || isEditing) && /*#__PURE__*/ React.createElement(Bubble, {
            isEditing: isEditing
        }, isEditing ? /*#__PURE__*/ React.createElement(TextAreaUI, {
            ref: textAreaRef,
            id: innerId,
            name: name,
            value: value ?? '',
            autoResize: true,
            minAuto: 1,
            maxAuto: maxRows,
            onChange: onEdit,
            onKeyDown: onEditKeyDown,
            onFocus: onFocus,
            onBlur: onBlur
        }) : value && /*#__PURE__*/ React.createElement(TextContent, null, value), actions && isEditing && /*#__PURE__*/ React.createElement(ActionsWrapper, {
            isEditing: true
        }, actions)), actions && !isEditing && /*#__PURE__*/ React.createElement(ActionsWrapper, null, actions));
    });
export const userMessageConfig = {
    name: 'UserMessage',
    tag: 'div',
    layout: userMessageRoot,
    base,
    variations: {
        view: {
            css: viewCSS
        },
        size: {
            css: sizeCSS
        },
        attachmentsView: {
            css: fileContentViewCSS
        }
    },
    defaults: {
        view: 'default',
        size: 'm',
        attachmentsView: 'default'
    }
};
