import React, { type FC } from 'react';
import { Button, Popover } from '@theorchard/suite-components';
import { GlyphIcon } from '@theorchard/suite-icons';
import { recordDownloadReportFromBulkUploads } from 'src/utils/segment/clickEvents';
import type { NrIngestionFile } from 'src/data/queries/getRecentNrIngestions/types';

export interface Props {
    data: NrIngestionFile;
}
export const CLASSNAME = 'UploadCard-report';

const linkStyles = {
    color: 'var(--gray-750)',
    fontSize: '14px',
    margin: '6px 0',
    display: 'flex',
    alignItems: 'center',
    gap: '5px',
};

const DownloadOverlay: FC<Props> = ({
    data: { errorFileUrl, errorRows, id },
}) => {
    if (!errorFileUrl || errorRows === 0) return null;

    const renderPopoverContent = () => (
        <a
            href={errorFileUrl}
            onClick={recordDownloadReportFromBulkUploads}
            style={linkStyles}
        >
            {$t('neighbouringRights.viewBulkUploads.downloadContributions')}
        </a>
    );

    return (
        <Popover
            id={id}
            data-testid={CLASSNAME}
            contentClassName={`${CLASSNAME}-content`}
            content={renderPopoverContent()}
            placement="bottom"
        >
            <Button className={`${CLASSNAME}-button`}>
                <GlyphIcon name="download" size={16} />
            </Button>
        </Popover>
    );
};
export default DownloadOverlay;