<script setup lang="ts">
import type { IconType } from '@bagelink/vue'
import { Icon } from '@bagelink/vue'
import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import { useTabs } from './tabsManager'

interface TabType {
	id?: string
	label?: string
	icon?: IconType
}

const props = defineProps<{
	title?: string
	tabs: (TabType | string)[]
	modelValue?: string
	sideTabs?: boolean
	group: string
	flat?: boolean
	vertical?: boolean
}>()

const emit = defineEmits(['update:modelValue'])
const { currentTab } = useTabs(props.group)
currentTab.value
  = props.modelValue || typeof props.tabs[0] === 'string'
		? props.tabs[0]
		: props.tabs[0].id

const tabsWrap = ref<HTMLElement | undefined>(undefined)
const tabs = ref<HTMLElement[]>([])

function updateIndicator() {
	nextTick(() => {
		if (!tabsWrap.value) return
		const activeTab = tabs.value.find(tab => tab.classList.contains('active'))
		if (activeTab) {
			const { offsetLeft, offsetWidth } = activeTab
			tabsWrap.value.style.setProperty('--indicator-left', `${offsetLeft}px`)
			tabsWrap.value.style.setProperty('--indicator-width', `${offsetWidth}px`)
		}
	})
}

function selectTab(tab: TabType | string) {
	currentTab.value = typeof tab === 'string' ? tab : tab.id
	emit('update:modelValue', currentTab.value)
	nextTick(() => { updateIndicator() })
}

function isActive(tab: TabType | string) {
	if (typeof tab === 'string') return currentTab.value === tab
	return currentTab.value === tab.id
}

function tabLabel(tab: TabType | string) {
	if (typeof tab === 'string') return tab
	return tab.label
}

watch(
	() => props.modelValue,
	(value) => {
		if (value && !isActive(value)) currentTab.value = value
		nextTick(() => { updateIndicator() })
	},
	{ immediate: true }
)

onMounted(() => {
	tabs.value = Array.from(tabsWrap.value?.querySelectorAll('.bgl_tab') || [])
	updateIndicator()
	window.addEventListener('resize', updateIndicator)
})

watch(
	() => tabs.value,
	() => {
		nextTick(() => { updateIndicator() })
	},
	{ deep: true }
)
onBeforeUnmount(() => {
	window.removeEventListener('resize', updateIndicator)
})
</script>

<template>
	<div
		ref="tabsWrap" class="grid auto-flow-columns relative fit-content bgl_tabs_wrap overflow-hidden"
		:class="{ 'bgl_flat-tabs': flat, 'bgl_vertical-tabs': vertical }"
	>
		<slot name="tabs" v-bind="{ selectTab, isActive, tabLabel, tabs }">
			<button
				v-for="(tab, i) in props.tabs"
				:key="i"
				type="button"
				:class="{ active: isActive(tab) }"
				class="bgl_tab relative z-1"
				@click="selectTab(tab)"
			>
				<Icon v-if="typeof tab !== 'string' && tab.icon" :icon="tab.icon" />
				{{ tabLabel(tab) }}
			</button>
		</slot>
	</div>
</template>

<style scoped>
.bgl_tabs_wrap {
	background: var(--input-bg);
	border-radius: calc(var(--input-border-radius) * 1.4);
	padding-inline: calc(var(--btn-padding) / 8);
	padding-block: calc(var(--btn-padding) / 8);
	box-shadow: inset 0 0 10px #00000012;
	gap: 0.25rem;
}

.bgl_tab {
	border: none;
	background: transparent;
	cursor: pointer;
	font-size: var(--input-font-size);
	font-family: inherit;
	padding-inline: calc(var(--btn-padding) / 2);
	padding-block: calc(var(--btn-padding) / 8);
	border-radius: var(--input-border-radius);
	transition: var(--bgl-transition);
	color: inherit

}

.bgl_tab:hover {
	background: rgba(255, 255, 255, .4);
}

.bgl_tabs_wrap::before {
	content: '';
	position: absolute;
	top: calc(var(--btn-padding) / 8);
	bottom: calc(var(--btn-padding) / 8);
	left: var(--indicator-left, 0);
	width: var(--indicator-width, 0);
	background: var(--bgl-popup-bg);
	border-radius: var(--input-border-radius);
	transition: var(--bgl-transition);
	z-index: 0;
}
.bgl_flat-tabs.bgl_tabs_wrap {
	background: transparent;
	box-shadow: none;
}
.bgl_flat-tabs.bgl_tabs_wrap::before{
	background: transparent;
	border-bottom: 1px solid var(--bgl-primary);
	border-radius: 0;
	top: calc(var(--btn-padding) * 1.25);
	bottom: unset;

}
.bgl_flat-tabs .active.bgl_tab{
	color: var(--bgl-primary)
}
.bgl_flat-tabs .bgl_tab:hover {
	background: rgba(255, 255, 255, .1);
}
.bgl_vertical-tabs{
	grid-auto-flow: row;
	align-items: start;
	justify-items: start;
	gap: 1rem
}
.bgl_vertical-tabs .bgl_tab{
	padding-inline: 0;
	border-radius: 0;
	border-bottom: 1px solid transparent;
}
.bgl_vertical-tabs .bgl_tab:hover{
	background: transparent;
	border-bottom: 1px solid var(--bgl-primary);

}
.bgl_vertical-tabs .bgl_tab.active{
	border-bottom: 1px solid var(--bgl-primary);
}
.bgl_vertical-tabs.bgl_tabs_wrap::before{
	border: none;
}
@media screen and (max-width: 910px) {
	.bgl_vertical-tabs{
	grid-auto-flow: column;
	overflow: auto;
	max-width: 100vw;
	padding-inline-end: 1rem;
	width: 100%;
	gap: 1rem;
	position: relative;
}
.bgl_vertical-tabs::-webkit-scrollbar {
	display: none;
}
.bgl_vertical-tabs .bgl_tab{
	white-space: nowrap;
}
}
</style>
