import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef, useMemo, useState } from 'react';
import styled, { css } from 'styled-components';
import Button, { StyledButton } from '../Button';
import Icon from '../Icon';
import MenuButton from '../MenuButton';
import MetaList from '../MetaList';
import SummaryItem, { StyledPrimary, StyledSecondary, StyledSummaryItemActions, StyledVisual } from '../SummaryItem';
import Progress, { StyledProgressRing } from '../Progress';
import Text from '../Text';
import { defaultThemeProp } from '../../theme';
import { useI18n } from '../../hooks';
import FileVisual from './FileVisual';
import { getKindFromMimeType, getMimeTypeFromFile } from './utils';
const StyledFileUploadItem = styled(SummaryItem)(({ hasThumbnail, disabled, theme }) => {
    return css `
    border: 0.0625rem solid ${theme.base.palette['border-line']};
    border-radius: calc(0.5 * ${theme.base['border-radius']});
    background-color: ${theme.base.palette['primary-background']};
    padding: calc(0.5 * ${theme.base.spacing});
    min-height: 3rem;

    ${disabled &&
        css `
      opacity: ${theme.base['disabled-opacity']};

      ${StyledButton}:disabled {
        opacity: unset;
      }
    `}

    ${StyledProgressRing} {
      height: ${theme.components.input.height};
      width: ${theme.components.input.height};
    }

    ${hasThumbnail &&
        css `
      height: calc(6rem + ${theme.base.spacing});
      grid-row: span 2;
      grid-template-columns: auto minmax(0, 1fr) auto;

      ${StyledVisual} {
        align-self: auto;
        width: calc(6rem - 0.125rem);
        height: calc(6rem - 0.125rem);
      }

      ${StyledPrimary} {
        align-self: start;
        margin-block-start: calc(0.5 * ${theme.base.spacing});
      }

      ${StyledSecondary} {
        grid-area: primary;
        align-self: center;
        margin-block-start: calc(3 * ${theme.base.spacing});
      }

      ${StyledSummaryItemActions} {
        align-self: start;
      }
    `}
  `;
});
StyledFileUploadItem.defaultProps = defaultThemeProp;
/**
 *  @deprecated
 *  Deprecating in favour of new file components
 */
const FileUploadItem = forwardRef(function FileUploadItem({ name, meta, error = false, progress, thumbnail, onCancel, onEdit, onPreview, onDownload, onDelete, size, disabled, ...restProps }, ref) {
    const t = useI18n();
    const [thumbnailError, setThumbnailError] = useState(false);
    const definedActions = useMemo(() => [
        { fn: onCancel, text: t('cancel'), icon: 'times' },
        { fn: onEdit, text: t('edit'), icon: 'pencil' },
        { fn: onPreview, text: t('preview'), icon: 'eye' },
        { fn: onDownload, text: t('download'), icon: 'download' },
        { fn: onDelete, text: t('delete'), icon: 'trash' }
    ].filter((action) => !!action.fn), [onCancel, onEdit, onPreview, onDownload, onDelete]);
    let metaContent = meta;
    let actions;
    const type = getKindFromMimeType(getMimeTypeFromFile(name) ?? '');
    if (typeof progress === 'number' && progress < 100) {
        metaContent = `${t('uploading')}…${Math.floor(progress)}%`;
    }
    if (Array.isArray(metaContent)) {
        metaContent = (_jsx(MetaList, { items: metaContent.map((item, i) => (
            // eslint-disable-next-line react/no-array-index-key
            _jsx(Text, { variant: 'secondary', status: error ? 'error' : undefined, children: item }, i))) }));
    }
    else if (typeof metaContent === 'string') {
        metaContent = (_jsx(Text, { variant: 'secondary', status: error ? 'error' : undefined, children: metaContent }));
    }
    if (definedActions.length === 1) {
        const action = definedActions[0];
        actions = (_jsx(Button, { icon: true, variant: 'simple', disabled: disabled, onClick: () => action.fn?.(name), "aria-label": `${action.text} ${name}`, children: _jsx(Icon, { name: action.icon }) }));
    }
    else if (definedActions.length > 1) {
        actions = (_jsx(MenuButton, { text: t('actions'), iconOnly: true, icon: 'more', variant: 'simple', disabled: disabled, menu: {
                items: definedActions.map(action => ({
                    id: action.text,
                    primary: action.text,
                    onClick: () => {
                        action.fn(name);
                    }
                }))
            } }));
    }
    const visual = useMemo(() => {
        if (typeof progress === 'number' && progress !== 100) {
            return _jsx(Progress, { value: progress, placement: 'inline', variant: 'ring' });
        }
        return (_jsx(FileVisual, { type: type, thumbnail: thumbnailError ? undefined : thumbnail, onThumbnailError: () => {
                setThumbnailError(true);
            } }));
    }, [progress, thumbnail, thumbnailError]);
    return (_jsx(StyledFileUploadItem, { ...restProps, forwardedAs: 'li', hasThumbnail: thumbnail && !thumbnailError && (progress === 100 || progress === undefined) && !error, ref: ref, visual: visual, primary: name, secondary: metaContent, actions: actions, overflowStrategy: 'ellipsis', disabled: disabled }));
});
export default FileUploadItem;
//# sourceMappingURL=FileUploadItem.js.map