import type { FC } from 'react';
import React from 'react';
import { Alert, Button } from '@theorchard/suite-components';
import cx from 'classnames';
import UploadBox from 'src/pages/createPage/components/uploadBox';
import CheckUploadProgress from '../checkUploadProgress';
import IdLookupSidecar from '../idLookupSidecar/idLookupSidecar';
import ShowFileReport from '../showFileReport';
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('ownershipRights.csvUpload.srProdBuilder')}
            </div>
            <div className={`${CLASSNAME}-id-lookup`}>
                <Button
                    className={`${CLASSNAME}-Link`}
                    variant="link"
                    size="sm"
                    onClick={toggleRecordIdLookup}
                >
                    {$t('ownershipRights.csvUpload.idLookup')}
                </Button>
                <IdLookupSidecar
                    open={!closeSidecar}
                    closeSidecar={toggleRecordIdLookup}
                />
            </div>
        </div>
        <div className={`${CLASSNAME}-body`}>
            {!fileErrors && !s3UploadComplete && (
                <div
                    className={cx(
                        `${CLASSNAME}-upload-box`,
                        `${CLASSNAME}-ownership-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(
                                        'ownershipRights.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;