import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
import { forwardRef } from 'react';
import styled, { css } from 'styled-components';
import Icon from '../Icon';
import { defaultThemeProp } from '../../theme';
import Flex from '../Flex';
import Image, { StyledImage } from '../Image';
import { useTheme } from '../../hooks';
const mapping = {
    generic: {
        iconName: 'paper-clip',
        backgroundColor: 'slate.dark'
    },
    video: {
        iconName: 'play-solid',
        backgroundColor: 'slate.dark'
    },
    audio: {
        iconName: 'speaker-on-solid',
        backgroundColor: 'slate.dark'
    },
    document: {
        iconName: 'filetype-text',
        backgroundColor: 'blue.medium'
    },
    message: {
        iconName: 'mail-solid',
        backgroundColor: 'blue.dark'
    },
    pdf: {
        text: 'PDF',
        backgroundColor: 'red.medium'
    },
    spreadsheet: {
        iconName: 'grid-solid',
        backgroundColor: 'green.medium'
    },
    presentation: {
        iconName: 'slideshow-solid',
        backgroundColor: 'orange.medium'
    },
    link: {
        iconName: 'chain',
        backgroundColor: 'purple.dark'
    },
    archive: {
        iconName: 'archive-solid',
        backgroundColor: 'slate.dark'
    },
    database: {
        iconName: 'disc-stack-solid',
        backgroundColor: 'slate.dark'
    },
    image: {
        iconName: 'picture-solid',
        backgroundColor: 'slate.dark'
    },
    text: {
        iconName: 'filetype-text',
        backgroundColor: 'slate.dark'
    }
};
export const StyledFileVisual = styled.div ``;
export const StyledTextFrame = styled(StyledFileVisual)(({ theme }) => {
    const { base: { palette: { light }, 'border-radius': baseBorderRadius, 'font-size': baseFontSize, 'font-weight': { 'semi-bold': semiBoldWeight } }, components: { icon: { size: { m: iconSize }, 'border-radius-multiplier': borderRadiusMultiplier } } } = theme;
    return css `
    background-color: var(--bg);
    color: ${light};
    height: ${iconSize};
    width: ${iconSize};
    border-radius: calc(${borderRadiusMultiplier} * ${baseBorderRadius});
    font-size: calc(0.7 * ${baseFontSize});
    font-weight: ${semiBoldWeight};
    user-select: none;
    -webkit-user-select: none;
  `;
});
StyledTextFrame.defaultProps = defaultThemeProp;
const StyledThumbnailFrame = styled(StyledFileVisual)(({ theme }) => {
    return css `
    background-color: ${theme.base.palette['app-background']};
    height: 100%;
    width: 100%;

    ${StyledImage} {
      margin: auto;
      height: unset;
      width: unset;
      max-height: 100%;
      max-width: 100%;
    }
  `;
});
StyledThumbnailFrame.defaultProps = defaultThemeProp;
const FileVisual = forwardRef(function FileVisual({ type, thumbnail, onThumbnailError, ...restProps }, ref) {
    const visualConfig = mapping[type];
    const [color, lightness] = visualConfig.backgroundColor.split('.', 2);
    const { base: { colors: { [color]: { [lightness]: backgroundColor } }, palette: { light: foregroundColor } } } = useTheme();
    if (thumbnail) {
        return (_jsx(Flex, { ...restProps, as: StyledThumbnailFrame, container: true, children: _jsx(Image, { src: thumbnail, onError: onThumbnailError, alt: '' }) }));
    }
    return (_jsx(_Fragment, { children: visualConfig.iconName ? (_jsx(Icon, { ...restProps, ref: ref, name: visualConfig.iconName, background: backgroundColor, foreground: foregroundColor })) : (_jsx(Flex, { ...restProps, as: StyledTextFrame, ref: ref, container: { justify: 'center', alignItems: 'center' }, style: { '--bg': backgroundColor }, children: visualConfig.text })) }));
});
export default FileVisual;
//# sourceMappingURL=FileVisual.js.map