import { DataSource, Entity, EntityCollection, useDataSource, useTranslation } from "@firecms/core";
import { Button, CenteredView, CircularProgress, Typography, } from "@firecms/ui";
import { useEffect, useRef, useState } from "react";
import { ImportConfig } from "../types";

export function ImportSaveInProgress<C extends EntityCollection>
({
     path,
     pathSegments,
     importConfig,
     collection,
     onImportSuccess
 }:
 {
     path: string,
     /** `path` split at its real segment boundaries, when known. Never derived from `path`. */
     pathSegments?: string[],
     importConfig: ImportConfig,
     collection: C,
     onImportSuccess: (collection: C) => void
 }) {
    const { t } = useTranslation();
    const [errorSaving, setErrorSaving] = useState<Error | undefined>(undefined);
    const dataSource = useDataSource();

    const savingRef = useRef<boolean>(false);

    const [processedEntities, setProcessedEntities] = useState<number>(0);

    function save() {

        if (savingRef.current)
            return;

        savingRef.current = true;

        saveDataBatch(
            dataSource,
            collection,
            path,
            pathSegments,
            importConfig.entities,
            0,
            25,
            setProcessedEntities
        ).then(() => {
            onImportSuccess(collection);
            savingRef.current = false;
        }).catch((e) => {
            setErrorSaving(e);
            savingRef.current = false;
        });
    }

    useEffect(() => {
        save();
    }, []);

    if (errorSaving) {
        return (
            <CenteredView className={"flex flex-col gap-4 items-center"}>
                <Typography variant={"h6"}>
                    {t("error_saving_data")}
                </Typography>

                <Typography variant={"body2"} color={"error"}>
                    {errorSaving.message}
                </Typography>
                <Button
                    onClick={save}
                    >
                    {t("retry")}
                </Button>
            </CenteredView>
        );
    }

    return (
        <div className={"flex flex-col gap-4 items-center my-auto"}>
            <CircularProgress/>

            <Typography variant={"h6"}>
                {t("saving_data")}
            </Typography>

            <Typography variant={"body2"}>
                {processedEntities}/{importConfig.entities.length} {t("entities_saved")}
            </Typography>

            <Typography variant={"caption"}>
                {t("do_not_close_tab")}
            </Typography>

        </div>
    );

}

function saveDataBatch(dataSource: DataSource,
                       collection: EntityCollection,
                       path: string,
                       pathSegments: string[] | undefined,
                       data: Partial<Entity<any>>[],
                       offset = 0,
                       batchSize = 25,
                       onProgressUpdate: (progress: number) => void): Promise<void> {

    console.debug("Saving imported data", offset, batchSize);

    const batch = data.slice(offset, offset + batchSize);
    return Promise.all(batch.map(d =>
        dataSource.saveEntity({
            path,
            pathSegments,
            values: d.values,
            entityId: d.id,
            collection,
            status: "new"
        })))
        .then(() => {
            if (offset + batchSize < data.length) {
                onProgressUpdate(offset + batchSize);
                return saveDataBatch(dataSource, collection, path, pathSegments, data, offset + batchSize, batchSize, onProgressUpdate);
            }
            onProgressUpdate(data.length);
            return Promise.resolve();
        });
}