<script setup lang="ts">
import type { IconType, ThemeType } from '@bagelink/vue'
import type { SetupContext } from 'vue'
import { Icon, Loading } from '@bagelink/vue'
import { useSlots } from 'vue'
import { RouterLink } from 'vue-router'

const props = withDefaults(
	defineProps<{
		disabled?: boolean
		icon?: IconType
		iconEnd?: IconType
		color?: ThemeType
		theme?: ThemeType
		flat?: boolean
		border?: boolean
		outline?: boolean
		thin?: boolean
		type?: 'button' | 'submit' | 'reset'
		loading?: boolean
		role?: string
		value?: string
		to?: string
		href?: string
		round?: boolean
		is?: string
		ripple?: boolean
		onClick?: (e: MouseEvent) => void
	}>(),
	{
		onClick: () => '',
		loading: false,
		round: false,
		disabled: false,
		type: 'button',
		role: 'button',
		is: 'button',
		border: false,
		outline: false,
		ripple: true,
	},
)

const isComponent = $computed(() => {
	if (props.disabled) return props.is
	if (props.to) return RouterLink
	if (props.href) return 'a'
	return props.is
})

const bind = $computed(() => {
	const obj: { [key: string]: any } = {}
	if (!props.disabled) {
		if (props.to) obj.to = props.to
		else if (props.href) obj.href = props.href
	}
	if (!props.to && !props.href) {
		obj.role = props.role
		obj.type = props.type
	}
	return obj
})
const slots: SetupContext['slots'] = useSlots()
</script>

<template>
	<component
		:is="isComponent"
		v-ripple="ripple" v-bind="bind" :disabled="disabled"
		class="bgl_btn"
		:class="{
			'bgl_btn-icon': icon && !slots.default && !value,
			thin,
			round,
			'bgl_btn_flat': flat,
			'bgl_btn-border': border || outline,
			[`bgl_btn-${color}`]: color,
			[`bgl_btn-${theme}`]: theme,
		}"
		:tabindex="disabled ? -1 : 0"
		@click.stop="onClick"
		@keydown.enter="onClick"
		@keydown.space="onClick"
	>
		<Loading v-if="loading" class="h-100p" size="15" />
		<div v-else class="bgl_btn-flex">
			<Icon v-if="icon" :icon="icon" class="transition-400" />
			<slot />
			<template v-if="!slots.default && value">
				{{ value }}
			</template>
			<Icon v-if="iconEnd" :icon="iconEnd" class="transition-400" />
		</div>
	</component>
</template>

<style scoped>
.bgl_btn {
  --btn-bg: var(--bgl-primary);
  --btn-color: var(--bgl-light-text);
  --btn-flat-color: var(--bgl-text-color);
}

.bgl_btn-green {
  --btn-bg: var(--bgl-green);
  --btn-color: var(--bgl-light-text);
  --btn-flat-color: var(--bgl-green);
}

.bgl_btn-yellow {
  --btn-bg: var(--bgl-yellow);
  --btn-color: var(--bgl-black);
  --btn-flat-color: var(--bgl-yellow);
}

.bgl_btn-blue {
  --btn-bg: var(--bgl-blue);
  --btn-color: var(--bgl-light-text);
  --btn-flat-color: var(--bgl-blue);
}

.bgl_btn-primary {
  --btn-bg: var(--bgl-primary);
  --btn-color: var(--bgl-light-text);
  --btn-flat-color: var(--bgl-primary);
}

.bgl_btn-red {
  --btn-bg: var(--bgl-red);
  --btn-color: var(--bgl-light-text);
  --btn-flat-color: var(--bgl-red);
}

.bgl_btn-white {
  --btn-bg: var(--bgl-white);
  --btn-color: var(--bgl-black);
  --btn-flat-color: var(--bgl-white);
}

.bgl_btn-black {
  --btn-bg: var(--bgl-black);
  --btn-color: var(--bgl-light-text);
  --btn-flat-color: var(--bgl-black);
}

.bgl_btn-gray {
  --btn-bg: var(--bgl-gray-light);
  --btn-color: var(--bgl-black);
  --btn-flat-color: var(--bgl-gray);
}

.bgl_btn-light {
  --btn-bg: var(--bgl-primary-light);
  --btn-color: var(--bgl-primary);
  --btn-flat-color: var(--bgl-primary-light);
}

.bgl_btn-gray-light {
  --btn-bg: var(--bgl-gray-light);
  --btn-color: var(--bgl-gray);
  --btn-flat-color: var(--bgl-gray-light);
}

.bgl_btn {
  padding-left: var(--btn-padding);
  padding-right: var(--btn-padding);
  transition: var(--bgl-transition);
  background: var(--btn-bg);
  color: var(--btn-color);
  text-decoration: none;
}

.bgl_btn.bgl_btn-icon {
  padding-left: 0;
  padding-right: 0;
  height: var(--btn-height);
  width: var(--btn-height);
  border-radius: 100%;
  font-size: 1rem;
  flex-shrink: 0;
}

a {
  text-decoration: none;
}

.bgl_btn-flex {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
  height: 100%;
}

.bgl_btn .bgl_btn-icon{
  font-size: calc(var(--input-font-size) * 1.3);
}

.bgl_btn:hover,
.bgl_btn-icon:hover {
  filter: var(--bgl-hover-filter);
}

.bgl_btn:active:not(:disabled),
.bgl_btn-icon:active:not(:disabled) {
  filter: var(--bgl-active-filter);
}

.bgl_btn.bgl_btn_flat {
  background: transparent;
  color: var(--btn-flat-color);
}

.bgl_btn_flat:hover:not(:disabled),
.bgl_btn-icon.bgl_btn_flat:hover:not(:disabled) {
  background: var(--bgl-gray-20);
}

.bgl_btn.bgl_btn_flat:active:not(:disabled),
.bgl_btn-icon.bgl_btn_flat:active:not(:disabled) {
  background: var(--bgl-gray-40);
}

.bgl_btn.thin {
  padding-inline: calc(var(--btn-padding) / 3);
  border-radius: calc(var(--btn-border-radius) / 1.5);
}

.bgl_btn.round {
  border-radius: 1000px;
}

.bgl_btn-icon.thin {
  height: calc(var(--btn-height) / 1.5);
  width: calc(var(--btn-height) / 1.5);
  line-height: normal;
}
.bgl_btn-icon.thin .bgl_btn-flex {
	height: 100%;
}

[dir="rtl"] .bgl_btn-icon{
  transform: rotateY(180deg);
}
[dir="rtl"] .ltr .bgl_btn-icon{
  transform: rotateY(0deg);
}

.bgl_btn-border, .bgl_btn-icon.bgl_btn_flat.bgl_btn-border {
	  border: 1px solid var(--btn-flat-color);
	  background: transparent;
	  color: var(--btn-flat-color);
}

.bgl_btn-border:hover {
	  color: var(--btn-flat-color);
}

.bgl_btn-border:active:not(:disabled) {
  filter: brightness(80%);
}

.bgl_btn:disabled, .bgl_btn[disabled=true] {
  opacity: 0.7;
  filter: grayscale(0.3);
  cursor: not-allowed;
}
</style>
