<script setup lang="ts">
import type { IconType, ThemeType } from '@bagelink/vue'
import type { SetupContext } from 'vue'
import { Btn, Icon } from '@bagelink/vue'
import { computed, useSlots } from 'vue'
import '../styles/base-colors.css'

interface BtnProp {
	icon?: IconType
	onClick: () => void
	value?: string
}

const props = defineProps<{
	disabled?: boolean
	icon?: IconType
	iconEnd?: IconType
	color?: ThemeType
	theme?: ThemeType
	flat?: boolean
	border?: boolean
	outline?: boolean
	loading?: boolean
	value?: string
	modelValue?: string
	round?: boolean
	btn?: BtnProp
	btnEnd?: BtnProp
	large?: boolean
	small?: boolean
	uppercase?: boolean
}>()

const slots: SetupContext['slots'] = useSlots()

const computedTheme = computed(
	() => {
		if (props.disabled) { return 'gray-light' }
		return (props.color || props.theme) as ThemeType
	},
)

const computedPairClass = computed(() => {
	const theme = computedTheme.value
	if (!theme) return 'pair-primary'
	return `pair-${theme}`
})

const computedClasses = computed(() => {
	const classes: Record<string, boolean> = {
		'bgl_pill': !props.icon || !!slots.default || !!props.value,
		'round': props.round,
		'bgl_flatPill': props.flat,
		'bgl_pill-border': props.border || props.outline,
		'pillLarge': props.large,
		'pillSmall': props.small,
	}

	// Add the pair class
	classes[computedPairClass.value] = true

	return classes
})
</script>

<template>
	<div
		class="bgl_pill"
		style="height: var(--pill-height);"
		:disabled="disabled"
		:class="computedClasses"
	>
		<div class="flex h-100 justify-content-center relative ">
			<div v-if="loading" class="loading absolute inset-0 mx-auto" />
			<div class="px-025 flex gap-025 justify-content-center" :class="{ 'opacity-0': loading }">
				<Btn v-if="btn" class="bgl_pill-btn -ms-025" icon-size="0.8" round v-bind="btn" />
				<Icon v-if="icon" class="line-height-0" :icon="icon" style="font-size: var(--pill-font-size)" />
				<slot :class="{ uppercase }" />
				<template v-if="!slots.default">
					<p class="pillText inline" :class="{ uppercase }">
						{{ slots.default ? slots.default : value || modelValue }}
					</p>
				</template>
				<Icon v-if="iconEnd" class="line-height-0" :icon="iconEnd" style="font-size: var(--pill-font-size)" />
				<Btn v-if="btnEnd" class="bgl_pill-btn -me-025" icon-size="0.8" round v-bind="btnEnd" />
			</div>
		</div>
	</div>
</template>

<style scoped>
.pillLarge{
	--pill-font-size: var(--bgl-font-size);
	--pill-height:auto;
}
.pillSmall{
	--pill-font-size: 9px;
	--pill-height:15px;
}
.pillText{
	font-size: var(--pill-font-size);
}
.bgl_pill-btn{
	color: var(--pill-btn-color);
	background: var(--pill-btn-bg);
	width: calc(var(--pill-height) / 1.25)!important;
	height: calc(var(--pill-height) / 1.25)!important;
}
.loading {
  border: 1px solid var(--bgl-light-text);
  border-bottom: 2px solid var(--bgl-light-text);
  animation: spin 1s linear infinite;
  border-radius: 100px;
  width: 1rem;
  height: 1rem;
  margin: auto;
}
.bgl_flatPill .loading {
	border-bottom: 2px solid var(--bgl-text-color);
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.bgl_pill {
  padding-inline: calc(var(--pill-font-size) / 6);
  padding-block: calc(var(--pill-font-size) / 24);
transition: var(--bgl-transition);
  display: inline-block;
  margin-inline-end: 0.25rem;
  border-radius: var(--pill-border-radius);
  min-height: var(--pill-height);
vertical-align: middle;
}

.bgl_pill[disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}
.bgl_pill.round {
	border-radius: 1000px;
}
</style>
