import type { FC } from 'react';
import React from 'react';
import { LoadingSpinner } from '@theorchard/suite-components';
import { formatDate } from '@theorchard/suite-frontend';
import { DATE_TIME_FORMAT } from 'src/constants';
import DownloadOverlay from './overlay';
import type { NrIngestionFile } from 'src/data/queries/getRecentNrIngestions/types';

export interface Props {
    item: NrIngestionFile;
    uploadType: 'historic' | 'active';
}

export const CLASSNAME = 'UploadCard';
const CLASSNAME_CONTENT = `${CLASSNAME}-content`;
const CLASSNAME_FOOTER = `${CLASSNAME}-footer`;
export const CLASSNAME_COUNTS = `${CLASSNAME}-counts`;

const renderHistoricTypeBody = (item: NrIngestionFile) => (
    <div className={CLASSNAME_COUNTS}>
        <div data-testid={`${CLASSNAME_COUNTS}-success`}>
            <span className={`${CLASSNAME_COUNTS}-success`}>
                {item.successRows || '0'}
            </span>
            <span>
                {$t('neighbouringRights.viewBulkUploads.contributionsCreated')}
            </span>
        </div>
        <div data-testid={`${CLASSNAME_COUNTS}-error`}>
            <span className={`${CLASSNAME_COUNTS}-error`}>
                {item.errorRows || '0'}
            </span>
            <span>
                {$t('neighbouringRights.viewBulkUploads.contributionsFailed')}
            </span>
            <DownloadOverlay data={item} />
        </div>
    </div>
);

export const UploadCard: FC<Props> = ({ item, uploadType }) => (
    <div className={CLASSNAME} data-testid={item.id}>
        <div className={CLASSNAME_CONTENT}>
            <div className={`${CLASSNAME}-filename`}>
                <span>{item.originalFilename}</span>
                <p className={`${CLASSNAME}-filename-id`}>
                    {item.id.slice(0, -4)}
                </p>
            </div>
            {uploadType === 'active' && <LoadingSpinner show />}
            {uploadType === 'historic' && renderHistoricTypeBody(item)}
        </div>
        <div className={CLASSNAME_FOOTER}>
            <span>
                {$t('neighbouringRights.viewBulkUploads.user', {
                    name: `${item.identity?.firstName} ${item.identity?.lastName}`,
                })}
            </span>
            <span>{formatDate(item.lastModified, DATE_TIME_FORMAT)}</span>
        </div>
    </div>
);