import styled, { css } from "styled-components";
import { StyledHiddenTextArea } from "../../TextArea/TextArea.styles";
import { component, mergeConfig } from "../../../engines";
import { fileConfig, fileTokens } from "../../File";
import { imageConfig } from "../../Image";
import { textAreaConfig, textAreaTokens } from "../../TextArea";
import { tokens } from "./UserMessage.tokens";
const mergedFileConfig = mergeConfig(fileConfig);
export const FileComponent = component(mergedFileConfig);
const mergedImageConfig = mergeConfig(imageConfig);
export const ImageComponent = component(mergedImageConfig);
const mergedTextAreaConfig = mergeConfig(textAreaConfig);
export const TextAreaComponent = component(mergedTextAreaConfig);
export const base = css([
    `position:relative;display:inline-flex;flex-direction:column;align-items:flex-end;box-sizing:border-box;margin-left:auto;width:100%;max-width:calc(100% - var(`,
    `));`
], tokens.bubblePadding);
export const FileContentWrapper = styled.div.withConfig({
    displayName: "UserMessage.styles__FileContentWrapper",
    componentId: "sc-b9c77117-0"
})([
    `display:flex;flex-direction:column;box-sizing:border-box;overflow:hidden;width:100%;background:var(`,
    `);padding:var(`,
    `);border-radius:var(`,
    `);gap:var(`,
    `);margin-bottom:var(`,
    `);max-width:var(`,
    `);`
], tokens.fileContentBackgroundColor, tokens.fileContentPadding, tokens.fileContentBorderRadius, tokens.fileContentGap, tokens.fileContentMarginBottom, tokens.attachmentMaxWidth);
export const FileUI = styled(FileComponent).withConfig({
    displayName: "UserMessage.styles__FileUI",
    componentId: "sc-b9c77117-1"
})([
    ``,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`
], fileTokens.cellHeight, tokens.fileItemHeight, fileTokens.cellGap, tokens.fileItemGap, fileTokens.cellTextboxGap, tokens.fileItemTextboxGap, fileTokens.cellTitleColor, tokens.fileItemTitleColor, fileTokens.cellSubtitleColor, tokens.fileItemSubtitleColor, fileTokens.cellTitleFontFamily, tokens.fileItemTitleFontFamily, fileTokens.cellTitleFontSize, tokens.fileItemTitleFontSize, fileTokens.cellTitleFontStyle, tokens.fileItemTitleFontStyle, fileTokens.cellTitleFontWeight, tokens.fileItemTitleFontWeight, fileTokens.cellTitleLetterSpacing, tokens.fileItemTitleLetterSpacing, fileTokens.cellTitleLineHeight, tokens.fileItemTitleLineHeight, fileTokens.cellSubtitleFontFamily, tokens.fileItemSubtitleFontFamily, fileTokens.cellSubtitleFontSize, tokens.fileItemSubtitleFontSize, fileTokens.cellSubtitleFontStyle, tokens.fileItemSubtitleFontStyle, fileTokens.cellSubtitleFontWeight, tokens.fileItemSubtitleFontWeight, fileTokens.cellSubtitleLetterSpacing, tokens.fileItemSubtitleLetterSpacing, fileTokens.cellSubtitleLineHeight, tokens.fileItemSubtitleLineHeight, fileTokens.fileThumbSize, tokens.fileThumbSize, fileTokens.fileThumbRadius, tokens.fileThumbRadius);
export const ImageWrapper = styled.div.withConfig({
    displayName: "UserMessage.styles__ImageWrapper",
    componentId: "sc-b9c77117-2"
})([
    `display:block;overflow:hidden;width:100%;border:0.125rem solid var(`,
    `);border-radius:var(`,
    `);margin-bottom:var(`,
    `);max-width:var(`,
    `);`
], tokens.imageBorderColor, tokens.imageContentBorderRadius, tokens.fileContentMarginBottom, tokens.attachmentMaxWidth);
export const Bubble = styled.div.withConfig({
    displayName: "UserMessage.styles__Bubble",
    componentId: "sc-b9c77117-3"
})([
    `display:flex;flex-direction:column;box-sizing:border-box;width:`,
    `;max-width:100%;min-width:`,
    `;color:var(`,
    `);background:`,
    `;padding:var(`,
    `);border-radius:var(`,
    `);gap:var(`,
    `);`
], ({ isEditing })=>isEditing ? '100%' : 'fit-content', ({ isEditing })=>isEditing ? `var(${tokens.attachmentMaxWidth})` : 'unset', tokens.textColor, ({ isEditing })=>isEditing ? `var(${tokens.backgroundColorEditing})` : `var(${tokens.backgroundColor})`, tokens.bubblePadding, tokens.bubbleBorderRadius, tokens.bubbleGap);
export const TextContent = styled.div.withConfig({
    displayName: "UserMessage.styles__TextContent",
    componentId: "sc-b9c77117-4"
})([
    `box-sizing:border-box;overflow-wrap:break-word;white-space:pre-wrap;font-family:var(`,
    `);font-size:var(`,
    `);font-style:var(`,
    `);font-weight:var(`,
    `);letter-spacing:var(`,
    `);line-height:var(`,
    `);`
], tokens.textFontFamily, tokens.textFontSize, tokens.textFontStyle, tokens.textFontWeight, tokens.textLetterSpacing, tokens.textLineHeight);
export const TextAreaUI = styled(TextAreaComponent).withConfig({
    displayName: "UserMessage.styles__TextAreaUI",
    componentId: "sc-b9c77117-5"
})([
    ``,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:100%;`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `{width:100%;}`
], textAreaTokens.inputColor, tokens.textColor, textAreaTokens.inputCaretColor, tokens.caretColor, textAreaTokens.inputWidth, textAreaTokens.inputHeight, tokens.textAreaHeight, textAreaTokens.inputMinHeight, tokens.textAreaMinHeight, textAreaTokens.inputFontFamily, tokens.textFontFamily, textAreaTokens.inputFontSize, tokens.textFontSize, textAreaTokens.inputFontStyle, tokens.textFontStyle, textAreaTokens.inputFontWeight, tokens.textFontWeight, textAreaTokens.inputLetterSpacing, tokens.textLetterSpacing, textAreaTokens.inputLineHeight, tokens.textLineHeight, textAreaTokens.scrollbarThumbBackgroundColor, tokens.scrollbarThumbBackgroundColor, textAreaTokens.scrollbarThumbBackgroundColorHover, tokens.scrollbarThumbBackgroundColorHover, textAreaTokens.scrollbarThumbBackgroundColorActive, tokens.scrollbarThumbBackgroundColorActive, textAreaTokens.scrollbarTrackBackgroundColor, tokens.scrollbarTrackBackgroundColor, textAreaTokens.scrollbarTrackBackgroundColorActive, tokens.scrollbarTrackBackgroundColorActive, textAreaTokens.scrollbarTrackBackgroundColorHover, tokens.scrollbarTrackBackgroundColorHover, textAreaTokens.scrollbarWidth, tokens.scrollbarWidth, textAreaTokens.scrollbarBorderWidth, tokens.scrollbarBorderWidth, StyledHiddenTextArea);
export const ActionsWrapper = styled.div.withConfig({
    displayName: "UserMessage.styles__ActionsWrapper",
    componentId: "sc-b9c77117-6"
})([
    `display:flex;flex-direction:row;align-items:center;align-self:flex-end;margin-top:`,
    `;gap:`,
    `;`
], ({ isEditing })=>isEditing ? 0 : `var(${tokens.actionsMarginTop})`, ({ isEditing })=>isEditing ? `var(${tokens.actionsEditingGap})` : `var(${tokens.actionsGap})`);
