import type { FC } from 'react';
import React from 'react';
import { NetworkStatus } from '@apollo/client';
import { useHistory, useLocation } from 'react-router-dom';
import { useReviewQueueFiltersCloudFF } from 'src/utils/features';
import ReviewQueueListMultiSelectFilters from './reviewQueueListMultiSelectFilters';
import ReviewQueueListMultiSelectFiltersV2 from './reviewQueueListMultiSelectFiltersV2';
import ReviewQueueListTable from './reviewQueueListTable';
import type { ReviewQueueSearchResults } from 'src/data/queries/reviewQueueSearch/types';
import type { InfiniteScrollVariables } from 'src/types';

export const CLASS_NAME = 'ReviewQueueList';
export const INTL_PREFIX = 'contentReview.reviewQueueList';

const ReviewQueueList: FC<{
    reviewSearchQueryData: ReviewQueueSearchResults | null;
    networkStatus: number;
    fetchMore: (variables: InfiniteScrollVariables) => void;
}> = ({ reviewSearchQueryData, networkStatus, fetchMore }) => {
    const isFiltersCloudEnabled = useReviewQueueFiltersCloudFF();
    const history = useHistory();
    const location = useLocation();

    const isLoading = [
        NetworkStatus.loading,
        NetworkStatus.setVariables,
        NetworkStatus.refetch,
    ].includes(networkStatus);

    const MultiSelectFilters = isFiltersCloudEnabled
        ? ReviewQueueListMultiSelectFiltersV2
        : ReviewQueueListMultiSelectFilters;

    return (
        <div className={CLASS_NAME}>
            <MultiSelectFilters
                isLoading={isLoading}
                reviewSearchQueryData={reviewSearchQueryData}
            />
            <ReviewQueueListTable
                reviewQueueSearch={reviewSearchQueryData}
                location={location}
                history={history}
                fetchMore={fetchMore}
                networkStatus={networkStatus}
            />
        </div>
    );
};

export default ReviewQueueList;