/* eslint-disable */
import React, { FunctionComponent } from 'react';
import { ActionIcon, Box, useMantineTheme, useComputedColorScheme } from '@mantine/core';
import { IconRefresh } from '@tabler/icons-react';

interface Props {
    newestItemsQuery: any,
    firstPageQuery: any,
    infinityQuery?: any,
    refresh?: () => void,
}

const RefreshActionIcon: FunctionComponent<Props> = ({ newestItemsQuery, firstPageQuery, infinityQuery, refresh }) => {
    const theme = useMantineTheme();
    const colorScheme = useComputedColorScheme();
    const newestItems = newestItemsQuery?.data?.results.length > 50 ? '50+' : newestItemsQuery?.data?.results.length;
    const pluralCharset = newestItems > 1 ? 's' : '';
    return (
        <>
            <ActionIcon
                title="Refresh"
                aria-label="Refresh"
                color={colorScheme === 'dark' ? 'green.8' : 'green.6'}
                data-test="table-refresh-icon"
                variant="subtle"
                style={{ overflow: 'visible', position: 'relative' }}
                onClick={() => {
                    if (refresh) {
                        refresh();
                        return;
                    }
                    firstPageQuery.refetch();
                }}
            >
                <IconRefresh size={24} stroke={1} />

                {
                    newestItemsQuery?.data?.results?.length !== undefined && newestItemsQuery?.data?.results?.length > 0
                    && (
                        <Box
                            title={` You have ${newestItems} new item${pluralCharset}, refresh the page to see them`}
                            data-test="table-refresh-icon-badge"
                            style={{
                                position: 'absolute',
                                bottom: 11,
                                left: 14,
                                minWidth: 18,
                                height: 22,
                                padding: '0 6px',
                                display: 'inline-flex',
                                alignItems: 'center',
                                justifyContent: 'center',
                                backgroundColor: theme.colors.red[6],
                                color: theme.white,
                                borderRadius: 999,
                                lineHeight: 1,
                                fontWeight: 400,
                                fontSize: '12px',
                                fontFamily: '"Roboto","Arial",sans-serif',
                                boxSizing: 'border-box',
                                overflow: 'visible',
                                zIndex: 2,
                                border: '2px solid',
                                borderColor: colorScheme === 'dark' ? theme.colors.dark[7] : 'white',
                            }}
                        >
                            {
                                newestItems
                            }
                        </Box>
                    )
                }
            </ActionIcon>
        </>
    );
};

export default RefreshActionIcon;