<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed, toRefs } from "vue";
import { useI18n } from 'vue-i18n'
import { useClothesCategories } from '@/utils/ClothesCategory'
//const props = defineProps({
//})
const emit = defineEmits([
	'change'
])

const { t } = useI18n()

const categoriesList = useClothesCategories();

const genderList = computed(() => [
  { label: t('Wardrobe.assets.genders.male'), value: 'male' },
  { label: t('Wardrobe.assets.genders.female'), value: 'female' }
])
const categories = ref(['all'])
const gender = ref(['all'])

const clearFilters = () => {
	categories.value = ['all']
	gender.value = ['all']
	handleChange()
}
const handleChange = () => {	
	emit('change', {categories:categories.value, gender:gender.value})
}
onMounted(()=>{
})
onUnmounted(()=>{
})
defineExpose({})
</script>
<template>
	<div class="filters">
		<div class="title">
			<div class="left">Filters</div>
			<div class="right" @click="clearFilters">Clear</div>
		</div>
		<div class="categories">Categories</div>
		<div class="line"></div>
		<div class="multiple">
			<checked :list="categoriesList" @change="handleChange" v-model:selected="categories" />
		</div>
		<div class="categories">Gender</div>
		<div class="line"></div>
		<div class="multiple">
			<checked :list="genderList" @change="handleChange" v-model:selected="gender" />
		</div>
	</div>
</template>
<style lang="less" scoped>
	.filters{
		width: 100%;
		height: auto;
		position: relative;
		padding-top: 4rem;
		padding-bottom: 4rem;
		.title{
			margin-bottom: 3rem;
			display: flex;
			padding: 0 1.2rem;
			.left{
				margin-right: 12.2rem;
				font-family: "KaiseiOpti-Bold";
				font-weight: 700;
				font-size: 2.4rem;
				line-height: 3.5rem;
				color: #232323;
			}
			.right{
				text-decoration: underline;
				font-family: "KaiseiOpti-Regular";
				font-weight: 400;
				font-size: 1.6rem;
				line-height: 2.4rem;
				letter-spacing: -0.48px;
				text-align: right;
				color: #979797;
				cursor: pointer;
			}
		}
		.categories{
			font-family: "KaiseiOpti-Bold";
			font-weight: 700;
			font-size: 1.8rem;
			line-height: 2.3rem;
			color: #585858;
			margin-bottom: 1.1rem;
			padding: 0 1.2rem;
		}
		.line{
			border-top: 0.5px solid #C4C4C4;
			width: 27.1rem;
			margin-bottom: 2.2rem;
		}
		.multiple{
			padding: 0 2.3rem;
			margin-bottom: 2.9rem;
		}
	}
</style>