import React, { useState } from 'react';
import { recordIdLookupClick } from 'src/utils/segment/segment';
import CsvUpload from './components/csvUpload/csvUpload';
import type { FileError } from './components/uploadBox/validator';
import type { ProgressReport } from 'src/data/queries/getNrIngestionFileProgress/types';

export const CLASSNAME = 'CreatePage';
export const CLASSNAME_HEADER = `${CLASSNAME}-mainHeader`;

const CreatePage = () => {
    const [fileErrors, setFileErrors] = useState<FileError>();
    const [s3UploadComplete, setS3UploadComplete] = useState<string | null>(
        null
    );
    const [reportGenerationComplete, setReportGenerationComplete] =
        useState<ProgressReport | null>(null);
    const [reportGenerationError, setReportGenerationError] =
        useState<boolean>(false);
    const [closeSidecar, setCloseSidecar] = useState<boolean>(true);

    const toggleRecordIdLookup = () => {
        if (closeSidecar) recordIdLookupClick();
        setCloseSidecar(prevValue => !prevValue);
    };

    return (
        <CsvUpload
            report={reportGenerationComplete}
            toggleRecordIdLookup={toggleRecordIdLookup}
            closeSidecar={closeSidecar}
            fileErrors={fileErrors}
            s3UploadComplete={s3UploadComplete}
            handleFileErrors={setFileErrors}
            handleS3Uploaded={setS3UploadComplete}
            reportGenerationError={reportGenerationError}
            handleReportGenerationComplete={setReportGenerationComplete}
            handleReportGenerationError={setReportGenerationError}
        />
    );
};

export default CreatePage;