<template>
	<NcAppNavigationItem :allow-collapse="true"
		menu-placement="top"
		:name="t('repod', 'Filtering episodes')">
		<template #actions>
			<NcActionCheckbox :checked="all"
				:disabled="all"
				@update:checked="(checked) => $store.commit('settings/filters', { listened: checked, listening: checked, unlistened: checked })">
				{{ t('repod', 'Show all') }}
			</NcActionCheckbox>
			<NcActionCheckbox :checked="filters.listened"
				@update:checked="(checked) => $store.commit('settings/filters', { listened: checked })">
				{{ t('repod', 'Listened') }}
			</NcActionCheckbox>
			<NcActionCheckbox :checked="filters.listening"
				@update:checked="(checked) => $store.commit('settings/filters', { listening: checked })">
				{{ t('repod', 'Listening') }}
			</NcActionCheckbox>
			<NcActionCheckbox :checked="filters.unlistened"
				@update:checked="(checked) => $store.commit('settings/filters', { unlistened: checked })">
				{{ t('repod', 'Unlistened') }}
			</NcActionCheckbox>
		</template>
		<template #icon>
			<FilterIcon v-if="all" :size="20" />
			<FilterSettingsIcon v-if="!all" :size="20" />
		</template>
	</NcAppNavigationItem>
</template>

<script>
import { NcActionCheckbox, NcAppNavigationItem } from '@nextcloud/vue'
import FilterIcon from 'vue-material-design-icons/Filter.vue'
import FilterSettingsIcon from 'vue-material-design-icons/FilterSettings.vue'

export default {
	name: 'Filters',
	components: {
		FilterIcon,
		FilterSettingsIcon,
		NcAppNavigationItem,
		NcActionCheckbox,
	},
	computed: {
		all() {
			return this.filters.listened && this.filters.listening && this.filters.unlistened
		},
		filters() {
			return this.$store.state.settings.filters
		},
	},
	mounted() {
		this.$store.dispatch('settings/fetch')
	},
}
</script>
