<template>
	<aside class="wardrobe-assets__filters">
		<div class="filters-card">
			<div class="filters-card__heading">
				<h2 class="filters-card__title">{{ t('Wardrobe.assets.filters') }}</h2>
				<button class="filters-card__clear" type="button" @click="clearFilters">
					{{ t('Wardrobe.assets.clear') }}
				</button>
			</div>

			<section class="filter-group">
				<h3 class="filter-group__title">{{ t('Wardrobe.assets.categories') }}</h3>
				<div class="filter-group__line"></div>
				<Checked
					:list="categoryOptions"
					:selected="selectedCategories"
					@change="handleCategoryChange"
				/>
			</section>

			<section class="filter-group">
				<h3 class="filter-group__title">{{ t('Wardrobe.assets.gender') }}</h3>
				<div class="filter-group__line"></div>
				<CheckedGender
					:list="genderOptions"
					:selected="selectedGenders"
					@change="handleGenderChange"
				/>
			</section>
		</div>
	</aside>
</template>

<script setup lang="ts">
	import { computed } from 'vue'
	import { useI18n } from 'vue-i18n'
	import type { PropType } from 'vue'
	import Checked from '@/components/checked.vue'
	import CheckedGender from '@/components/checked-gender.vue'

	interface FilterOption {
		label: string
		value: string
	}

	interface FilterState {
		categories: string[]
		genders: string[]
	}

	const props = defineProps({
		categories: {
			type: Array as PropType<FilterOption[]>,
			required: true
		},
		genders: {
			type: Array as PropType<FilterOption[]>,
			required: true
		},
		filters: {
			type: Object as PropType<FilterState>,
			required: true
		}
	})

	const emit = defineEmits<{
		(e: 'update:filters', payload: FilterState): void
	}>()

	const { t } = useI18n({ useScope: 'global' })

	const categoryValues = computed(() =>
		props.categories.filter((option) => option.value !== 'all').map((option) => option.value)
	)

	const genderValues = computed(() =>
		props.genders.filter((option) => option.value !== 'all').map((option) => option.value)
	)

	// 为 Checked 组件准备的选项列表（不包含 'all'）
	const categoryOptions = computed(() =>
		props.categories.filter((option) => option.value !== 'all')
	)

	const genderOptions = computed(() => props.genders.filter((option) => option.value !== 'all'))

	// 转换当前选中状态为组件需要的格式
	const selectedCategories = computed(() => {
		const allSelected =
			props.filters.categories.length === categoryValues.value.length &&
			categoryValues.value.every((value) => props.filters.categories.includes(value))

		return allSelected ? ['all'] : props.filters.categories
	})

	const selectedGenders = computed(() => {
		const allSelected =
			props.filters.genders.length === genderValues.value.length &&
			genderValues.value.every((value) => props.filters.genders.includes(value))

		return allSelected ? ['all'] : props.filters.genders
	})

	const handleCategoryChange = (selected: string[]) => {
		let categories: string[]

		categories = selected

		emit('update:filters', {
			categories,
			genders: props.filters.genders
		})
	}

	const handleGenderChange = (selected: string[]) => {
		let genders: string[]

		if (selected.includes('all') || selected.length === 0) {
			// 如果选择了 'all' 或者没有选择任何项，则选择所有性别
			genders = [...genderValues.value]
		} else {
			genders = selected
		}

		emit('update:filters', {
			categories: props.filters.categories,
			genders
		})
	}

	const clearFilters = () => {
		emit('update:filters', {
			categories: [...categoryValues.value],
			genders: [...genderValues.value]
		})
	}
</script>

<style lang="less" scoped>
	.wardrobe-assets__filters {
		width: 26.4rem;
		border-right: 0.1rem solid var(--wardrobe-border-color);
		overflow-y: auto;

		.filters-card {
			padding: 3rem 2.4rem 4rem;

			.filters-card__heading {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 3.2rem;

				.filters-card__title {
					margin: 0;
					font-family: 'KaiseiOpti-Bold';
					font-size: 2.4rem;
					line-height: 1.2;
					color: var(--wardrobe-text-main);
				}

				.filters-card__clear {
					border: 0;
					padding: 0;
					background: transparent;
					font-family: 'KaiseiOpti-Regular';
					font-size: 1.4rem;
					line-height: 1.3;
					color: #9a9185;
					text-decoration: underline;
					cursor: pointer;
				}
			}

			.filter-group {
				& + .filter-group {
					margin-top: 3.4rem;
				}

				.filter-group__title {
					margin: 0 0 1rem;
					font-family: 'KaiseiOpti-Bold';
					font-size: 1.8rem;
					line-height: 1.3;
					color: #5e5851;
				}

				.filter-group__line {
					width: 100%;
					height: 0.1rem;
					background: var(--wardrobe-border-color);
					margin-bottom: 2rem;
				}
			}
		}
	}
</style>
