<script lang="ts">
	import { page } from '$app/stores';
	import { namespaceList } from '$gql/Queries';
	import { TagFilterContext, getFilterContext } from '$lib/Filter';
	import { getContextClient } from '@urql/svelte';
	import FilterForm from './components/FilterForm.svelte';
	import TagFilterGroup from './components/TagFilterGroup.svelte';

	const client = getContextClient();

	$: namespaceQuery = namespaceList(client);
	$: namespaces = $namespaceQuery.data?.namespaces.edges;

	const filter = getFilterContext<TagFilterContext>();
	const apply = () => $filter.apply($page.url.searchParams);
</script>

<FilterForm on:submit={apply}>
	<TagFilterGroup
		slot="include"
		type="include"
		bind:controls={$filter.include.controls}
		{namespaces}
	/>
	<TagFilterGroup
		slot="exclude"
		type="exclude"
		bind:controls={$filter.exclude.controls}
		{namespaces}
	/>
</FilterForm>
