<script lang="ts" setup>
import type { IconType } from '@bagelink/vue'
import { Avatar, Icon } from '@bagelink/vue'
import { computed } from 'vue'

const props = withDefaults(
	defineProps<{
		src?: string
		showAvatar?: boolean
		to?: string
		href?: string
		icon?: IconType
		title?: string
		subtitle?: string
		flat?: boolean
		disabled?: boolean
		lead?: string
		end?: string
		iconEnd?: IconType
		target?: '_blank' | '_self'
		thin?: boolean
		fullWidth?: boolean
		ellipsis?: boolean
		ripple?: boolean
		tiny?: boolean
		onClick?: () => void
	}>(),
	{
		ellipsis: true,
		ripple: true
	}
)

const isComponent = computed(() => {
	if (props.to !== undefined && props.to !== '') { return 'router-link' }
	if (props.href !== undefined && props.href !== '') { return 'a' }
	if (props.onClick !== undefined) { return 'button' }
	return 'div'
})

const isClickable = computed(() => {
	return (props.to !== undefined && props.to !== '') || (props.href !== undefined && props.href !== '') || (props.onClick !== undefined)
})

const bind = computed(() => {
	const obj: { [key: string]: any } = {}
	if (props.to !== undefined && props.to !== '') { obj.to = props.to }
	else if (props.href !== undefined && props.href !== '') { obj.href = props.href }
	if (props.target !== undefined && props.target !== undefined && ((props.to !== undefined && props.to !== '') || (props.href !== undefined && props.href !== ''))) { obj.target = props.target }

	obj.class = {
		'notClickable': !((props.to !== undefined && props.to !== '') || (props.onClick !== undefined)),
		'no-border-list': props.flat,
	}
	if (props.disabled) { obj.disabled = true }
	return obj
})
</script>

<template>
	<div class="flex space-between">
		<component
			:is="isComponent" v-bind="bind" v-ripple="ripple && isClickable"
			class="flex flex-grow-1 gap-05 list-item" :class="{
				'py-1': !props.thin && !props.tiny,
				'py-05': props.thin,
				'py-0': props.tiny,
				'px-1': !props.fullWidth,
				'px-0': props.fullWidth,
			}" @click="onClick"
		>
			<Avatar v-if="src || showAvatar" style="flex-basis: 1;" :name="title" :src="src" :size="40" />
			<Icon v-if="icon" size="1.2" class="color-primary" :icon="icon" />

			<div class="txt-start">
				<p v-if="lead" class="txt10 m-0 p-0 txt-gray" :class="{ ellipsis }">
					{{ lead }}
					<slot name="lead" />
				</p>
				<p class="m-0 p-0 line-height-14 pb-025" :class="{ 'ellipsis-1': ellipsis }">
					{{ title }}
					<slot />
				</p>
				<p
					v-if="subtitle" class="txt12 m-0 m-0 py-0 ps-0 pe-1-5 opacity-7 me-2"
					:class="{ 'ellipsis-1': ellipsis }"
				>
					{{ subtitle }}
					<slot name="subtitle" />
				</p>
			</div>
			<div class="flex-grow-1" />
		</component>
		<slot name="end">
			<Icon v-if="iconEnd" :icon="iconEnd" class="transition-400" />
			<p
				v-if="end" class="txt12 m-0 py-0 ps-0 pe-1-5 opacity-7 " :class="{ 'ellipsis-1': ellipsis }"
				v-text="end"
			/>
		</slot>
	</div>
</template>

<style>
button.list-item {
	cursor: pointer;
	display: flex;
	gap: 0.5rem;
	border: none;
	background-color: unset;
	width: 100%;

}

.list-item:disabled {
	opacity: 0.5;
	pointer-events: none;
}

.list-item {
	min-height: -webkit-fit-content;
	min-height: -moz-fit-content;
	min-height: fit-content;
	margin: 0rem 0;
	cursor: pointer;
	transition: var(--bgl-transition);
	color: var(--bgl-text-color);
	text-decoration: none;
	position: relative;
}

.list-item>* {
	margin-bottom: 0;
}

.list-item::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	border-bottom: 1px solid var(--border-color);
}

.list-item:last-child::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	border-bottom: none;
}

.list-item:hover,
.list-item.router-link-exact-active {
	background-color: var(--bgl-primary-tint);
}

.notClickable:hover {
	background-color: unset;
	cursor: default;
}

.list-item:active {
	-webkit-filter: var(--bgl-hover-filter);
	filter: var(--bgl-hover-filter);
}

.no-border-list.list-item::after {
	border-bottom: none;
}

@media screen and (max-width: 910px) {
	.list-item {
		padding: 0.5rem;
	}
}
</style>
