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

defineOptions({ name: 'BglToast' })

type ToastType = 'success' | 'error' | 'warning' | 'info'

interface Props {
	message: string
	type?: ToastType
	/** Boolean shorthands: <Toast error message="..." /> */
	info?: boolean
	success?: boolean
	warning?: boolean
	error?: boolean
	showIcon?: boolean
	showCloseButton?: boolean
	closeToast?: () => void
}

const props = withDefaults(defineProps<Props>(), {
	showIcon: true,
	showCloseButton: true,
})

const computedType = computed<ToastType>(() => {
	if (props.type) { return props.type }
	if (props.error) { return 'error' }
	if (props.warning) { return 'warning' }
	if (props.success) { return 'success' }
	return 'info'
})
</script>

<template>
	<div class="custom-toast" :class="`custom-toast--${computedType}`">
		<div v-if="showIcon" class="custom-toast__icon">
			<Icon v-if="computedType === 'success'" icon="check_circle" />
			<Icon v-if="computedType === 'error'" icon="dangerous" />
			<Icon v-if="computedType === 'warning'" icon="report" />
			<Icon v-if="computedType === 'info'" icon="info" />
		</div>
		<div class="custom-toast__content">
			{{ message }}
		</div>
		<button v-if="showCloseButton" class="custom-toast__close" @click="closeToast">
			<Icon icon="close" />
		</button>
	</div>
</template>

<style>

.custom-toast {
  --toast-border-radius: var(--bgl-btn-border-radius);
  --toast-success: var(--bgl-green);
  --toast-error: var(--bgl-red);
  --toast-warning: var(--bgl-yellow);
  --toast-info: var(--bgl-blue);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  padding-inline-start: 1.25rem;
  border-radius: var(--toast-border-radius);
  background: var(--bgl-box-bg);
  box-shadow: 0 4px 12px var(--bgl-shadow);
  min-width: 300px;
  font-family: var(--bgl-font);
  position: relative;
  overflow: hidden;
  outline: 1px solid var(--bgl-border-color);
  outline-offset: -1px;
}

.custom-toast::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  border-radius: var(--toast-border-radius) 0 0 var(--toast-border-radius);
}

.custom-toast--success::before {
  background: var(--toast-success);
}

.custom-toast--success .custom-toast__icon {
  color: var(--toast-success);
}

.custom-toast--error::before {
  background: var(--toast-error);
}

.custom-toast--error .custom-toast__icon {
  color: var(--toast-error);
}

.custom-toast--warning::before {
  background: var(--toast-warning);
}

.custom-toast--warning .custom-toast__icon {
  color: var(--toast-warning);
}

.custom-toast--info::before {
  background: var(--toast-info);
}

.custom-toast--info .custom-toast__icon {
  color: var(--toast-info);
}

.custom-toast__icon {
  font-size: 1.25rem;
  font-weight: bold;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
}

.custom-toast__content {
  flex: 1;
  font-size: var(--bgl-input-font-size);
  color: var(--bgl-text-color);
  line-height: 1.5;
}

.custom-toast__close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.125rem;
  color: var(--bgl-gray);
  padding: 0.25rem;
  line-height: 1;
  transition: var(--bgl-transition);
}

.custom-toast__close:hover {
  color: var(--bgl-text-color);
}

</style>
