import React from 'react'
import { gameDashboardState } from '../../stateManagement/gameState'
import { useHookstate } from "@hookstate/core";
import { loadingState, searchCompletedState, showFiltersModuleState } from "../../stateManagement/loadingState";
import getWithFilters from "../../componentUtils/getWithFilters";
import { adminMode } from "../../stateManagement/userState";
import { Button } from '@chakra-ui/react';
import { ratingState, steamRatingState } from "../../stateManagement/ratingState";

interface Props {
    text?: string
    size?: string
    variant?: string
    colorScheme?: string
}

const ResetFilterButton = ({ text = "Reset Search and Filters", size = 'md', variant = 'solid', colorScheme = 'gray' }: Props) => {
    const gameState = useHookstate(gameDashboardState)
    const games = gameState.get()
    const admin = useHookstate(adminMode).get()
    const loadedState = useHookstate(loadingState)
    const useRatingState = useHookstate(ratingState).get()
    const useSteamRatingState = useHookstate(steamRatingState).get()
    const searchComplete = useHookstate(searchCompletedState)
    const setShowFiltersModuleState = useHookstate(showFiltersModuleState)

    const resetFilters = async () => {
        const searchParams = ''
        const finalFilter = {
            controller: "",
            developer: "",
            genre: "",
            intel: "",
            os: "",
            playStatus: "",
            publisher: "",
            series: "",
            soundtrack: "",
            store: "",
            wine: "",
            rating: "",
            steamRating: "",
        }
        searchComplete.set(false)
        setShowFiltersModuleState.set(false)

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

    return (
        <Button onMouseDown={resetFilters} size={size} variant={variant} colorScheme={colorScheme}>
            {text}
        </Button>
    )
}

export default ResetFilterButton;
