import type { FC } from 'react';
import React, { useEffect } from 'react';
import { LoadingSpinner } from '@theorchard/suite-components';
import { GlyphIcon } from '@theorchard/suite-icons';
import { useGetOwnershipNrIngestionFileProgress } from 'src/data/queries/getOwnershipNrIngestionFileProgress';
import type { GetOwnershipIngestionFileProgress as ProgressReport } from 'src/data/queries/getOwnershipNrIngestionFileProgress/__generated__/getOwnershipIngestionFileProgress';

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

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

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

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

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

    const UploadStatusBox = () => {
        if (!error)
            return (
                <span>
                    <GlyphIcon name="check" size={12} inverse />
                    {$t(`ownershipRights.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(
                            `ownershipRights.checkUploadProgress.generatingReport`
                        )}
                    </h2>
                    {!error && (
                        <p>
                            {$t(
                                `ownershipRights.checkUploadProgress.creatingReport`
                            )}
                        </p>
                    )}
                    {error && (
                        <div className={`${CLASSNAME}-progress-error`}>
                            <GlyphIcon name="warning" size={24} />
                            <p>
                                {$t(
                                    `ownershipRights.checkUploadProgress.someError`
                                )}
                            </p>
                        </div>
                    )}
                    {!error && <LoadingSpinner show />}
                </div>
            </div>
            <div className={`${CLASSNAME}-status-box`}>
                <UploadStatusBox />
            </div>
        </div>
    );
};

export default CheckUploadProgress;