import React from 'react';
import { GlyphButton } from '../glyphButton';
import { Popover } from '../popover';
import { Status } from '../status';
import { GridTable } from '../table';
import type { UploadAreaStatusProps, UploadAreaFileStatus } from './types';

const CLASSNAME = 'UploadArea-status';

const StatusCell: React.FC<{ data: UploadAreaFileStatus }> = ({ data }) => (
    <Status filled variant={data.statusVariant} text={data.status} />
);

export const UploadAreaStatus: React.FC<UploadAreaStatusProps> = ({
    status,
    statusVariant,
    header,
    files,
}) => {
    return (
        <div className={CLASSNAME}>
            <Status variant={statusVariant} text={status} />

            <Popover
                id="UploadAreaStatus"
                contentClassName={`${CLASSNAME}-popover`}
                variant="list"
                placement="left"
                content={
                    <GridTable
                        data={files}
                        columnDefs={[
                            {
                                name: 'name',
                                HeaderText: () => header,
                            },
                            {
                                name: 'status',
                                maxWidth: '150px',
                                Cell: StatusCell,
                                HeaderText: () => null,
                            },
                        ]}
                        hideColumnSeparators
                    />
                }
            >
                <GlyphButton name="preview" size="sm" variant="tertiary" />
            </Popover>
        </div>
    );
};