<template>
	<NcAppNavigationItem
		menu-placement="top"
		:name="t('repod', 'Filtering episodes')">
		<template #actions>
			<NcActionCheckbox
				:disabled="all"
				:model-value="all"
				@change="
					setFilters({
						listened: true,
						listening: true,
						unlistened: true,
					})
				">
				{{ t('repod', 'Show all') }}
			</NcActionCheckbox>
			<NcActionCheckbox
				:model-value="filters.listened"
				@change="setFilters({ listened: !filters.listened })">
				{{ t('repod', 'Listened') }}
			</NcActionCheckbox>
			<NcActionCheckbox
				:model-value="filters.listening"
				@change="setFilters({ listening: !filters.listening })">
				{{ t('repod', 'Listening') }}
			</NcActionCheckbox>
			<NcActionCheckbox
				:model-value="filters.unlistened"
				@change="setFilters({ unlistened: !filters.unlistened })">
				{{ t('repod', 'Unlistened') }}
			</NcActionCheckbox>
		</template>
		<template #icon>
			<FilterIcon v-if="all" :size="20" />
			<FilterSettingsIcon v-if="!all" :size="20" />
		</template>
	</NcAppNavigationItem>
</template>

<script lang="ts">
import { NcActionCheckbox, NcAppNavigationItem } from '@nextcloud/vue'
import { mapActions, mapState } from 'pinia'
import FilterIcon from 'vue-material-design-icons/Filter.vue'
import FilterSettingsIcon from 'vue-material-design-icons/FilterSettings.vue'
import { t } from '@nextcloud/l10n'
import { useSettings } from '../../store/settings.ts'

export default {
	name: 'Filters',
	components: {
		FilterIcon,
		FilterSettingsIcon,
		NcAppNavigationItem,
		NcActionCheckbox,
	},
	computed: {
		...mapState(useSettings, ['filters']),
		all() {
			return (
				this.filters.listened &&
				this.filters.listening &&
				this.filters.unlistened
			)
		},
	},
	methods: {
		...mapActions(useSettings, ['setFilters']),
		t,
	},
}
</script>
