import type { FC } from 'react';
import React from 'react';
import { Button, Table } from '@theorchard/suite-components';
import type { GetOwnershipIngestionFileProgress as ProgressReport } from 'src/data/queries/getOwnershipNrIngestionFileProgress/__generated__/getOwnershipIngestionFileProgress';

export const CLASSNAME = 'ShowFileReport';

export interface Props {
    report: ProgressReport['ownershipIngestionFileById'];
}

const ShowFileReport: FC<Props> = ({ report }) => (
    <div className={`${CLASSNAME}`}>
        <div className={`${CLASSNAME}-header-text`}>
            <h2 className={`${CLASSNAME}-upload-complete-text`}>
                {$t(`ownershipRights.showFileReport.fileUploadComplete`)}
            </h2>
            <p>
                {report.errorFileUrl
                    ? $t(`ownershipRights.showFileReport.downloadReportMsg`)
                    : $t(`ownershipRights.showFileReport.reportMsg`)}
            </p>
        </div>
        <Table>
            <tbody key="upload-report-stats" data-testid="upload-report-stats">
                <tr>
                    <td>
                        <span className={`${CLASSNAME}-count-success`}>
                            {report.instancesCreatedUpdated || '0'}
                        </span>{' '}
                        <br />
                        {$t(`ownershipRights.showFileReport.instancesCreated`)}
                    </td>
                    <td>
                        <span className={`${CLASSNAME}-count-error`}>
                            {report.failedIsrcCount || '0'}
                        </span>{' '}
                        <br />
                        {$t(`ownershipRights.showFileReport.isrcsFailed`)}
                    </td>
                </tr>
            </tbody>
        </Table>
        {report.errorFileUrl && (
            <div className={`${CLASSNAME}-download-button`}>
                <Button href={report.errorFileUrl}>
                    {$t(`ownershipRights.showFileReport.downloadReport`)}
                </Button>
            </div>
        )}
    </div>
);

export default ShowFileReport;