<template>
	<li
		:key="`filter-actor-${actor.id}`"
		class="filter-item"
		:class="{ selected: filters.actors.some((filterActor) => filterActor.id === actor.id), first: type === 'available' && index === 0 && filters.actors.length > 0 }"
		@click="emit('actor', actor)"
	>
		<div
			class="filter-include"
			@click.stop="toggleActor(actor)"
		>
			<Icon
				icon="checkmark"
				class="filter-add"
			/>

			<Icon
				icon="cross2"
				class="filter-remove"
			/>
		</div>

		<span class="filter-name actor-name">
			<span
				class="filter-text"
				:title="actor.name"
			>{{ actor.name }}</span>

			<span class="filter-details">
				<div class="actor-gender">
					<Gender
						:gender="actor.gender"
						class="gender"
					/>
				</div>

				<span
					v-if="actor.count"
					:title="actor.count"
					class="filter-count"
				>{{ abbreviateNumber(actor.count) }}</span>
			</span>
		</span>
	</li>
</template>

<script setup>
import abbreviateNumber from '#/src/utils/abbreviate-number.js';

import Gender from '#/components/actors/gender.vue';

defineProps({
	actor: {
		type: Object,
		default: null,
	},
	index: {
		type: Number,
		default: null,
	},
	filters: {
		type: Object,
		default: null,
	},
	type: {
		type: String,
		default: 'available',
	},
	toggleActor: {
		type: Function,
		default: null,
	},
});

const emit = defineEmits(['actor']);
</script>

<style scoped>
.filter-name {
	align-items: stretch;
}

.actor-name {
	display: flex;
	align-items: stretch;
}

.actor-gender {
	width: 1rem;
	display: flex;
	align-items: center;

	.gender {
		display: flex;
	}
}
</style>
