import React from 'react';
import { Button, Card } from '@theorchard/suite-components';
import { formatJsxMessage } from '@theorchard/suite-frontend';
import { GlyphIcon } from '@theorchard/suite-icons';

const Step1Invalid = ({
    onDownloadReport,
    showRetryButton,
    isMetadataRetry,
    onRetry,
    originalFilename,
    hasOutdatedTemplate,
    hasGenericColumnErrors,
    templateDownloadLink,
    classicalTemplateDownloadLink,
}: {
    onDownloadReport?: () => void;
    showRetryButton?: boolean;
    isMetadataRetry?: boolean;
    onRetry?: () => void;
    originalFilename?: string | undefined;
    hasOutdatedTemplate?: boolean;
    hasGenericColumnErrors?: boolean;
    templateDownloadLink?: string | null;
    classicalTemplateDownloadLink?: string | null;
}) => (
    <div className="bulk-upload-sidebar-step-body">
        <div className="highlight failure">
            {$t('bulkDigitalAudio.step1Invalid.fail')}
        </div>
        {onDownloadReport && !hasGenericColumnErrors && (
            <div className="bulk-upload-sidebar-buttons">
                <Button
                    size="sm"
                    variant="tertiary"
                    onClick={onDownloadReport}
                    className="download-report-button"
                >
                    <GlyphIcon name="download" size={12} />
                    <span>
                        {$t('bulkDigitalAudio.bulkUploadSidebar.report')}
                    </span>
                </Button>
                {!hasOutdatedTemplate && showRetryButton && (
                    <Button
                        variant={isMetadataRetry ? 'link' : 'secondary'}
                        size="sm"
                        onClick={onRetry}
                    >
                        {isMetadataRetry
                            ? $t('bulkDigitalAudio.step1Invalid.back')
                            : $t('bulkDigitalAudio.step1Invalid.retry')}
                    </Button>
                )}
            </div>
        )}
        {hasOutdatedTemplate ? (
            <Card.Text className="bulk-upload-sidebar-step-column-error-text">
                {$t('bulkDigitalAudio.step1Invalid.outdatedText')}
            </Card.Text>
        ) : hasGenericColumnErrors ? (
            <>
                <Card.Text className="bulk-upload-sidebar-step-column-error-text">
                    {$t('bulkDigitalAudio.step1Invalid.columnErrorText')}
                </Card.Text>
                {templateDownloadLink && classicalTemplateDownloadLink && (
                    <ul>
                        <li>
                            {formatJsxMessage(
                                'bulkDigitalAudio.step1Invalid.nonClassicalTemplateLink',
                                {
                                    link: ({ children }) => (
                                        <a href={templateDownloadLink}>
                                            {children}
                                        </a>
                                    ),
                                }
                            )}
                        </li>
                        <li>
                            {formatJsxMessage(
                                'bulkDigitalAudio.step1Invalid.classicalTemplateLink',
                                {
                                    link: ({ children }) => (
                                        <a href={classicalTemplateDownloadLink}>
                                            {children}
                                        </a>
                                    ),
                                }
                            )}
                        </li>
                    </ul>
                )}
            </>
        ) : (
            <>
                <Card.Text>
                    {formatJsxMessage(
                        'bulkDigitalAudio.step1Invalid.metadataErrorsParagraph1',
                        {
                            span: () => <span>{originalFilename}</span>,
                        }
                    )}
                </Card.Text>
                <Card.Text>
                    {formatJsxMessage(
                        'bulkDigitalAudio.step1Invalid.metadataErrorsParagraph2',
                        {
                            b: ({ children }) => <b>{children}</b>,
                        }
                    )}
                </Card.Text>
                <Card.Text className="bulk-upload-sidebar-step-failure-end">
                    {$t(
                        'bulkDigitalAudio.step1Invalid.metadataErrorsParagraph3'
                    )}
                </Card.Text>
            </>
        )}
    </div>
);

export default Step1Invalid;