import type { FC } from 'react';
import React, { useEffect } from 'react';
import { LoadingSpinner } from '@theorchard/suite-components';
import { GlyphIcon } from '@theorchard/suite-icons';
import { useGetNrIngestionFileProgress } from 'src/data/queries/getNrIngestionFileProgress';
import type { ProgressReport } from 'src/data/queries/getNrIngestionFileProgress/types';

export const CLASSNAME = 'CheckUploadProgress';
const pollingInterval = 2000;

export interface Props {
    filename: string;
    handleReportGenerated: (filename: ProgressReport | null) => void;
    setReportGenerationError: (error: boolean) => void;
}

const CheckUploadProgress: FC<Props> = ({
    filename,
    handleReportGenerated,
    setReportGenerationError,
}) => {
    const basename = filename.split('/').pop() || '';
    const {
        data: getNrIngestionFileProgress,
        error,
        startPolling,
        stopPolling,
    } = useGetNrIngestionFileProgress(basename);

    if (error) {
        setReportGenerationError(true);
        stopPolling();
    }

    useEffect(() => {
        if (
            getNrIngestionFileProgress &&
            getNrIngestionFileProgress.ingestionCompleted
        ) {
            stopPolling();
            handleReportGenerated(getNrIngestionFileProgress);
        } else startPolling(pollingInterval);
    }, [
        startPolling,
        getNrIngestionFileProgress,
        stopPolling,
        handleReportGenerated,
    ]);

    const UploadStatusBox = () => {
        if (!error)
            return (
                <span>
                    <GlyphIcon name="check" size={12} inverse />
                    {$t(
                        `neighbouringRights.checkUploadProgress.uploadComplete`
                    )}
                </span>
            );
        return null;
    };

    return (
        <div className={`${CLASSNAME}`}>
            <div
                className={`${CLASSNAME}-generating-report`}
                data-testid="generating-reportfile"
            >
                <div className={`${CLASSNAME}-generating-report-message`}>
                    <h2 className={`${CLASSNAME}-header-text`}>
                        {$t(
                            `neighbouringRights.checkUploadProgress.generatingReport`
                        )}
                    </h2>
                    {!error && (
                        <p>
                            {$t(
                                `neighbouringRights.checkUploadProgress.creatingReport`
                            )}
                        </p>
                    )}
                    {error && (
                        <div className={`${CLASSNAME}-progress-error`}>
                            <GlyphIcon name="warning" size={24} />
                            <p>
                                {$t(
                                    `neighbouringRights.checkUploadProgress.someError`
                                )}
                            </p>
                        </div>
                    )}
                    {!error && <LoadingSpinner show />}
                </div>
            </div>
            <div className={`${CLASSNAME}-status-box`}>
                <UploadStatusBox />
            </div>
        </div>
    );
};

export default CheckUploadProgress;