import type { FC } from 'react';
import React from 'react';
import { Table } from '@theorchard/suite-components';
import { recordDownloadReportFromCreateClick } from 'src/utils/segment/segment';
import type { ProgressReport } from 'src/data/queries/getNrIngestionFileProgress/types';

export const CLASSNAME = 'ShowFileReport';

export interface Props {
    report: ProgressReport;
}

const ShowFileReport: FC<Props> = ({ report }) => (
    <div className={`${CLASSNAME}`}>
        <div className={`${CLASSNAME}-header-text`}>
            <h2 className={`${CLASSNAME}-upload-complete-text`}>
                {$t(`neighbouringRights.showFileReport.fileUploadComplete`)}
            </h2>
            <p>{$t(`neighbouringRights.showFileReport.downloadReportMsg`)}</p>
        </div>
        <Table>
            <tbody key="upload-report-stats" data-testid="upload-report-stats">
                <tr>
                    <td>
                        <span className={`${CLASSNAME}-count-success`}>
                            {report.successRows || '0'}
                        </span>{' '}
                        <br />
                        {$t(
                            `neighbouringRights.showFileReport.contributionsCreated`
                        )}
                    </td>
                    <td>
                        <span className={`${CLASSNAME}-count-error`}>
                            {report.errorRows || '0'}
                        </span>{' '}
                        <br />
                        {$t(
                            `neighbouringRights.showFileReport.contributionsFailed`
                        )}
                    </td>
                </tr>
            </tbody>
        </Table>
        {!!report.errorRows && report.errorFileUrl && (
            <div className={`${CLASSNAME}-download-button`}>
                <a
                    href={report.errorFileUrl}
                    onClick={recordDownloadReportFromCreateClick}
                    target="_blank"
                    rel="noreferrer"
                    className="btn btn-default"
                >
                    {$t(`neighbouringRights.showFileReport.downloadReport`)}
                </a>
            </div>
        )}
    </div>
);

export default ShowFileReport;