import type { FC } from 'react';
import React from 'react';
import { Alert, Button } from '@theorchard/suite-components';
import CheckUploadProgress from '../checkUploadProgress/checkUploadProgress';
import IdLookupSidecar from '../idLookupSidecar/idLookupSidecar';
import ShowFileReport from '../showFileReport/showFileReport';
import UploadBox from '../uploadBox/uploadBox';
import UploadErrors from '../uploadErrors/uploadErrors';
import type { CreatePageProps } from '../../types';

export const CLASSNAME = 'CsvUpload';

const CsvUpload: FC<CreatePageProps> = ({
    report,
    toggleRecordIdLookup,
    closeSidecar,
    fileErrors,
    s3UploadComplete,
    handleFileErrors,
    handleS3Uploaded,
    reportGenerationError,
    handleReportGenerationComplete,
    handleReportGenerationError,
}) => (
    <>
        <div className="fragment-box">
            <div className={`${CLASSNAME}-header`}>
                {$t('neighbouringRights.csvUpload.nrProdBuilder')}
            </div>
            <div className={`${CLASSNAME}-id-lookup`}>
                <Button
                    className={`${CLASSNAME}-Link`}
                    variant="link"
                    size="sm"
                    onClick={toggleRecordIdLookup}
                >
                    {$t('neighbouringRights.csvUpload.idLookup')}
                </Button>
                <IdLookupSidecar
                    open={!closeSidecar}
                    closeSidecar={toggleRecordIdLookup}
                />
            </div>
        </div>
        <div className={`${CLASSNAME}-body`}>
            {!fileErrors && !s3UploadComplete && !report && (
                <div className={`${CLASSNAME}-upload-box`}>
                    <UploadBox
                        accept={['.csv', 'text/csv', 'application/csv']}
                        handleFileErrors={handleFileErrors}
                        handleS3Uploaded={handleS3Uploaded}
                    />
                </div>
            )}
            {fileErrors && (
                <div className={`${CLASSNAME}-upload-error`}>
                    <UploadErrors
                        uploadErrors={fileErrors}
                        resetFileErrors={() => handleFileErrors(undefined)}
                    />
                </div>
            )}
            {s3UploadComplete && !report && (
                <div className={`${CLASSNAME}-generating-report`}>
                    {!reportGenerationError && (
                        <Alert
                            variant="information"
                            text={
                                <span>
                                    {$t(
                                        'neighbouringRights.csvUpload.safeToLeave'
                                    )}
                                </span>
                            }
                        />
                    )}
                    <div className={`${CLASSNAME}-poll-progress`}>
                        <CheckUploadProgress
                            filename={s3UploadComplete}
                            handleReportGenerated={completedReport =>
                                handleReportGenerationComplete(completedReport)
                            }
                            setReportGenerationError={
                                handleReportGenerationError
                            }
                        />
                    </div>
                </div>
            )}
            {report && (
                <div className={`${CLASSNAME}-show-report`}>
                    <ShowFileReport report={report} />
                </div>
            )}
        </div>
    </>
);

export default CsvUpload;