import type { FC } from 'react';
import React, { useEffect, useState } from 'react';
import { Button, Sidecar } from '@theorchard/suite-components';
import { filterData, useIdentity } from '@theorchard/suite-frontend';
import { orderBy } from 'lodash';
import { PERMISSIONS_ACTIONS, PERMISSIONS_RESOURCE_TYPES } from 'src/constants';
import { useCanPerformAction } from 'src/data/queries/canPerform/canPerform';
import { useGetRecentIngestionsFileProgress } from 'src/data/queries/getRecentNrIngestions';
import { EmptyCard } from 'src/pages/catalogPage/components/viewBulkUploads/emptyCard';
import { usePPEnabledFF } from 'src/utils/features';
import {
    recordClickViewBulkUploads,
    recordCloseBulkUploads,
} from 'src/utils/segment/clickEvents';
import { CLASSNAME, NUMBER_OF_RECORDS } from './constants';
import { UploadCard } from './uploadCard';
import type { NrIngestionFile } from 'src/data/queries/getRecentNrIngestions/types';

const pollingInterval = 2000;

const ViewBulkUploads: FC = () => {
    const [open, setOpen] = useState<boolean>(false);

    const {
        data: getNrIngestionFileProgress,
        error,
        startPolling,
        stopPolling,
    } = useGetRecentIngestionsFileProgress({ limit: NUMBER_OF_RECORDS });

    const ingestionStatuses = getNrIngestionFileProgress?.map(
        f => f.ingestionCompleted
    );

    const sortedIngestions = filterData(
        orderBy(getNrIngestionFileProgress, ['lastModified'], 'desc')
    );
    const activeUploads = sortedIngestions.filter(f => !f.ingestionCompleted);
    const completedFiles = sortedIngestions.filter(i => i.ingestionCompleted);

    useEffect(() => {
        if (error) stopPolling();
    }, [error, stopPolling]);

    useEffect(() => {
        if (!!getNrIngestionFileProgress && ingestionStatuses?.every(s => !!s))
            stopPolling();
        else startPolling(pollingInterval);
    }, [
        startPolling,
        getNrIngestionFileProgress,
        ingestionStatuses,
        stopPolling,
    ]);

    useEffect(() => {
        if (!open) stopPolling();
    }, [open, stopPolling]);

    const onModalOpen = () => {
        startPolling(pollingInterval);
        recordClickViewBulkUploads();
        setOpen(true);
    };

    const { id } = useIdentity();
    const {
        data: canCreateData,
        loading,
        error: permissionsError,
    } = useCanPerformAction(
        id,
        PERMISSIONS_ACTIONS.CREATE,
        PERMISSIONS_RESOURCE_TYPES.CONTRIBUTION
    );

    const canCreate = !loading && !permissionsError ? canCreateData : false;
    const canCreatePerformance = usePPEnabledFF() ? canCreate : true;

    return canCreatePerformance ? (
        <div className={CLASSNAME}>
            <Button className={`${CLASSNAME}-Link`} onClick={onModalOpen}>
                {$t('neighbouringRights.viewBulkUploads.bulkUploads')}
            </Button>
            <Sidecar
                isOpen={open}
                onRequestClose={() => {
                    setOpen(false);
                    recordCloseBulkUploads();
                }}
                title={
                    <h3
                        className={`${CLASSNAME}-header ReactModal-header-text`}
                    >
                        {$t('neighbouringRights.viewBulkUploads.bulkUploads')}
                    </h3>
                }
                data-testid={`${CLASSNAME}-Body`}
                className={`${CLASSNAME}-modal`}
            >
                <div className={`${CLASSNAME}-modal-wrapper`}>
                    <div className={`${CLASSNAME}-history`}>
                        <div className={`${CLASSNAME}-history-header`}>
                            {$t(
                                'neighbouringRights.viewBulkUploads.activeUploads'
                            )}
                        </div>
                        {!activeUploads?.length && <EmptyCard />}
                        {activeUploads?.map((item: NrIngestionFile) => (
                            <UploadCard
                                item={item}
                                key={item.id}
                                uploadType="active"
                            />
                        ))}
                    </div>
                    <div className={`${CLASSNAME}-history`}>
                        <div className={`${CLASSNAME}-history-header`}>
                            {$t(
                                'neighbouringRights.viewBulkUploads.uploadHistory'
                            )}
                        </div>
                        {completedFiles.map((item: NrIngestionFile) => (
                            <UploadCard
                                item={item}
                                key={item.id}
                                uploadType="historic"
                            />
                        ))}
                    </div>
                </div>
            </Sidecar>
        </div>
    ) : null;
};

export default ViewBulkUploads;