games-frontend-js/src/components/ActiveFilters.tsx

import React from 'react'
import { useHookstate } from '@hookstate/core'
import { gameDashboardState } from '../stateManagement/gameState'
import { Flex, Stack, HStack, Link, Spacer } from '@chakra-ui/react'
import {Tag} from './ui/tag'
import getWithFilters from '../componentUtils/getWithFilters'
import {
    loadingState,
    openAndCloseSearchDialogue,
    searchCompletedState,
    showFiltersModuleState
} from '../stateManagement/loadingState'
import { adminMode } from '../stateManagement/userState'
import ResetFilterButton from './helperComponents/ResetFilterButton'
import { ChangeActiveFilterHeader } from "../componentUtils/changeActiveFilterHeader";
import { ratingState, steamRatingState } from "../stateManagement/ratingState";

const ActiveFilters = () => {
    const setShowFiltersModuleState = useHookstate(showFiltersModuleState)
    const showFiltersModule = setShowFiltersModuleState.get()
    const gamesState = useHookstate(gameDashboardState)
    const games = gamesState.get()
    const { filters, searchParams } = games
    const loadedState = useHookstate(loadingState)
    const admin = useHookstate(adminMode).get()
    const setSearchModalOpen = useHookstate(openAndCloseSearchDialogue)
    const useRatingState = useHookstate(ratingState).get()
    const useSteamRatingState = useHookstate(steamRatingState).get()
    const searchComplete = useHookstate(searchCompletedState)

    const removeFilters = async (filterHeader: string, filter: string) => {
        const newFilter = filters[filterHeader as keyof typeof filters].replace(filter, '')
        const finalFilter = { ...filters, [filterHeader]: newFilter }

        await ChangeActiveFilterHeader(finalFilter, searchParams, setShowFiltersModuleState)

        return await getWithFilters(
            gamesState,
            loadedState,
            admin,
            games.count.currentPage,
            games.count.limit,
            searchParams,
            finalFilter,
            useRatingState,
            useSteamRatingState,
        )
    }

    return showFiltersModule ? (
        <Stack my={5} alignItems={{
            base: 'start',
            md: 'center'
        }} direction={{
            base: 'column',
            md: 'row'
        }} gap={4}>
            {searchParams.length >= 1 && (
                <>
                    <h2>Search: </h2>
                    <Tag
                        size={'md'}
                        borderRadius="full"
                        variant="solid"
                        colorPalette="blue"
                        onClose={async () => {
                            const newSearchParams = ""
                            ChangeActiveFilterHeader(filters, newSearchParams, setShowFiltersModuleState)
                            searchComplete.set(false)
                            return await getWithFilters(
                                gamesState,
                                loadedState,
                                admin,
                                games.count.currentPage,
                                games.count.limit,
                                newSearchParams,
                                filters,
                                useRatingState,
                                useSteamRatingState,
                            )
                        }}
                    ><Link
                            onMouseDown={() => setSearchModalOpen.set(true)}>{searchParams}</Link>
                    </Tag>
                </>
            )}
            <Stack alignItems={{
                base: 'start',
                md: 'center'
            }} direction={{
                base: 'column',
                md: 'row'
            }} >
                <h2>Active Filters: </h2>
                {Object.keys(filters).map((filter: string, num: number) => {
                    const filterValues: string = filters[filter as keyof typeof filters]
                    const filterValuesLength: number = filterValues.length
                    return filterValuesLength >= 1 && (
                        <>
                            <HStack key={num}>
                                <h3 style={{ textTransform: 'capitalize' }}>{filter}</h3>
                                <HStack gap={4}>
                                    {filters[filter as keyof typeof filters].split(',').map((item: string, index) => (
                                        <Tag
                                            size={'md'}
                                            key={index}
                                            borderRadius="full"
                                            variant="solid"
                                            colorPalette="blue"
                                            onClose={() => removeFilters(filter, item)}
                                        >{
                                                item.includes('lte')
                                                    ? item.replace('lte', '<= ')
                                                    : item.includes('gte') ? item.replace('gte', '>= ')
                                                        : item}
                                        </Tag>
                                    ))}
                                </HStack>
                            </HStack>
                        </>
                    )
                })}
            </Stack>
            <Spacer />
            <ResetFilterButton />
        </Stack>
    ) : <></>
}

export default ActiveFilters