import React from 'react';
import { Alert, Status } from '@theorchard/suite-components';
import { BulkEditEntryBase } from 'src/components/contract-bulk-edit/common/edit-schema/common-bulk-edit-schema';

interface EntityBulkEditProcessingStatusPropTypes {
    success: BulkEditEntryBase[] | [];
    failed:
        | {
              entry: BulkEditEntryBase;
              error: any;
              message: string | null;
          }[]
        | [];
    all: BulkEditEntryBase[] | [];
}

const EntityBulkEditProcessingStatus: React.FC<
    EntityBulkEditProcessingStatusPropTypes
> = ({ success, failed, all }) => {
    const processingStarted = success.length > 0 || failed.length > 0;
    if (!processingStarted) {
        return <></>;
    }

    const isProcessingInProgress =
        processingStarted && success.length + failed.length < all.length;
    const isProcessingComplete = success.length + failed.length === all.length;

    return (
        <>
            <div className="EntityBulkEditProcessingStatus-wrapper">
                {isProcessingInProgress && (
                    <div className="EntityBulkEditProcessingStatus-loading">
                        <Status
                            variant={'loading'}
                            text={`Processing ${success.length + failed.length}/${all.length}, success: ${success.length}, failed: ${failed.length}`}
                        />
                    </div>
                )}
                {isProcessingComplete && (
                    <>
                        <Alert
                            title={`Success import of ${success.length} out of ${all.length} entities.`}
                            variant="information"
                            expandable
                            defaultExpanded={false}
                            text={
                                <div className="EntityBulkEditProcessingStatus-list">
                                    {success.map((entry, index) => (
                                        <div key={index}>
                                            <strong>ID {entry.id}</strong>
                                        </div>
                                    ))}
                                </div>
                            }
                        />
                        {failed.length > 0 && (
                            <Alert
                                title={`Failed import of ${failed.length} out of ${all.length} entities.`}
                                variant="error"
                                expandable
                                defaultExpanded={false}
                                text={
                                    <div
                                        className={
                                            'EntityBulkEditProcessingStatus-list'
                                        }
                                    >
                                        {failed.map((f, index) => (
                                            <div key={index}>
                                                <strong>
                                                    ID {f.entry.id}:
                                                </strong>{' '}
                                                {f.message || 'Unknown error'}
                                            </div>
                                        ))}
                                    </div>
                                }
                            />
                        )}
                    </>
                )}
            </div>
        </>
    );
};

export default EntityBulkEditProcessingStatus;