// noinspection SpellCheckingInspection

import React, { useEffect } from 'react'
import { gameDashboardState } from '../stateManagement/gameState'
import { loadingState } from '../stateManagement/loadingState'
import { useHookstate } from '@hookstate/core'
import { Box, Center, Container, Divider, Heading, SimpleGrid, VStack } from '@chakra-ui/react'
import Pagination from './Pagination'
import { NavLink } from 'react-router-dom'
import { adminMode } from '../stateManagement/userState'
import ActiveFilters from './ActiveFilters'
import getWithFilters from "../componentUtils/getWithFilters";
import { ratingState, steamRatingState } from "../stateManagement/ratingState";
import GameThumbnailContextMenu from "./dashboardComponents/GameThumbnailContextMenu";
import DashboardLoadingModal from "./dashboardComponents/DashboardLoadingModal";
import ResetFilterButton from './helperComponents/ResetFilterButton'


const GameDashboard = () => {
    const loadedState = useHookstate(loadingState)
    const loaded = loadedState.get()
    const gamesState = useHookstate(gameDashboardState)
    const games = gamesState.get()
    const admin = useHookstate(adminMode).get()
    const useRatingState = useHookstate(ratingState).get()
    const useSteamRatingState = useHookstate(steamRatingState).get()


    useEffect(() => {
        getWithFilters(gamesState, loadedState, admin, games.count.currentPage, games.count.limit, games.searchParams, games.filters, useRatingState, useSteamRatingState)
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [games.success, admin])

    return (
        <>
            <Container maxW="container.xl" mt="7">
                <Pagination />
                <ActiveFilters />
                <Divider />
                {!loaded ? <DashboardLoadingModal /> : games.count.totalGames === 0 ?
                    <Center h={'80vh'}>
                        <VStack spacing={10}>
                            <Heading as={'h1'} size={'3xl'}>No Results Found...</Heading>
                            <Divider />
                            {games.searchParams !== '' ?
                                <Box mt='10'>
                                    <ResetFilterButton text='Clear Search and Filters' size='lg' variant='outline' colorScheme='blue' />
                                </Box>
                                :
                                <Box
                                    rounded={'md'}
                                    as={NavLink}
                                    border={'1px'}
                                    p={'3'}
                                    fontSize={'2xl'}
                                    to="/games/create">
                                    Create a Game
                                </Box>
                            }
                        </VStack>
                    </Center>
                    :
                    <SimpleGrid columns={{ base: 1, sm: 2, md: 3 }} spacing={10} style={{ marginTop: '3rem' }}>
                        {games.data.map((game) => (
                            <GameThumbnailContextMenu
                                key={game._id}
                                //@ts-ignore
                                game={game} />
                        ))}
                    </SimpleGrid>}
                <Divider my={'1rem'} />
                <Pagination />
            </Container>
        </>
    )
}

export default GameDashboard
