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

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

const linkStyles = {
    color: '#4A4A4A',
    fontSize: '14px',
    margin: '6px 0',
    display: 'flex',
    alignItems: 'center',
    gap: '5px',
};

const DownloadOverlay: FC<Props> = ({ data: { errorFileUrl, id } }) => {
    if (!errorFileUrl) return null;
    const renderPopoverContent = () => (
        <a
            href={errorFileUrl}
            onClick={recordDownloadReportFromBulkUploads}
            style={linkStyles}
        >
            {$t('ownershipRights.viewBulkUploads.downloadErrorReport')}
        </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;