import type { FC } from 'react';
import React from 'react';
import { Alert, Button } from '@theorchard/suite-components';
import { GlyphIcon, Illustration } from '@theorchard/suite-icons';
import type { FileError } from '../uploadBox/validator';

export const CLASSNAME = 'UploadErrors';

export interface Props {
    uploadErrors: FileError;
    resetFileErrors?: () => void;
}

const UploadErrors: FC<Props> = props => {
    const { uploadErrors: uploadError, resetFileErrors } = props;

    return (
        <>
            <Alert
                variant="error"
                text={
                    <span>
                        {$t(`ownershipRights.uploadErrors.failed`, {
                            file: uploadError.file.name,
                        })}
                    </span>
                }
            />
            <div className={CLASSNAME} data-testid="validation-errors">
                <Illustration name="error" size={100} />
                <h2 className={`${CLASSNAME}-error-header`}>
                    {$t(`ownershipRights.uploadErrors.uploadFailed`)}
                </h2>
                <Button
                    className={`${CLASSNAME}-reUploadButton`}
                    onClick={resetFileErrors}
                >
                    <GlyphIcon name="upload" size={16} />
                    {$t(`ownershipRights.uploadErrors.reUpload`)}
                </Button>
                <div className={`${CLASSNAME}-validation-error-msg`}>
                    <p>{$t(`ownershipRights.uploadErrors.errorReasons`)}</p>
                    <ul>
                        {uploadError.errors.map(err => (
                            <li key={`${uploadError.file.name}-${err.code}`}>
                                {err.message}
                            </li>
                        ))}
                    </ul>
                </div>
            </div>
        </>
    );
};

export default UploadErrors;