<script lang="ts">
import { createToaster, KtButton, KtToast, KtToaster } from '@3yourmind/kotti-ui'

const toaster = createToaster<{
	default: Record<string, never>
	'my-error-toast': Record<string, never>
	'my-info-toast': Record<string, never>
	'my-link-toast': {
		href: string,
		label: string,
	},
	'my-minimalistic-toast': Record<string, never>
	'my-success-toast': Record<string, never>,
	'my-warning-toast': Record<string, never>
}>()

const show = toaster.withOptions({ duration: 5000 })

export default defineComponent({
	name: 'Example',
	components: {
		KtButton,
		KtToast,
		KtToaster,
	},
	setup () {
		// you can also try this in your browser console
		globalThis.toaster = toaster

		return {
			defaultToast: () => {
				show({
					header: 'default header',
					text: 'default toast',
				})
			},
			errorToast: () => {
				show({
					text: 'I am an error toast',
					type: 'my-error-toast',
				})
			},
			infoToast: () => {
				show({
					text: 'I am an info toast',
					type: 'my-info-toast',
				})
			},
			linkToast: () => {
				show({
					custom: {
						href: 'https://github.com/3YOURMIND/kotti',
						label: 'See documentation',
					},
					text: 'link toast',
					type: 'my-link-toast',
				})
			},
			minimalisticToast: () => {
				show({
					text: 'minimalistic toast',
					type: 'my-minimalistic-toast',
				})
			},
			permanentToast: () => {
				show({
					duration: null,
					text: 'This is a one-line toast message. This is a one-line toast message. This is a one-line toast message.',
				})
			},
			successToast: () => {
				show({
					text: 'success toast',
					type: 'my-success-toast',
				})
			},
			warningToast: () => {
				show({
					text: 'I am a warning toast',
					type: 'my-warning-toast',
				})
			},
		}
	}
})
</script>

<template>
	<KtToaster :toaster='toaster'>
		<template #my-minimalistic-toast>
			<KtToast
				:type='{
					icon: null,
					backgroundColor: 'black',
					darkColor: 'black',
					lightColor: 'var(--gray-70)'
				}'
			/>
		</template>
		<template #my-link-toast='{ custom, text }'>
			<KtToast>
				<template #text>
					<span v-text='text' />
					<a :href='custom.href'>{{ custom.label }}</a>
				</template>
			</KtToast>
		</template>
		<template #my-error-toast>
			<KtToast type='error' />
		</template>
		<template #my-info-toast>
			<KtToast type='info' />
		</template>
		<template #my-success-toast>
			<KtToast type='success' />
		</template>
		<template #my-warning-toast>
			<KtToast type='warning' />
		</template>
	</KtToaster>

	<div style='display: flex; flex-wrap: wrap; gap: var(--unit-6);'>
		<KtButton @click='defaultToast'>default toast</KtButton>
		<KtButton @click='errorToast'>error toast</KtButton>
		<KtButton @click='infoToast'>info toast</KtButton>
		<KtButton @click='successToast'>success toast</KtButton>
		<KtButton @click='warningToast'>warning toast</KtButton>
		<KtButton @click='permanentToast'>permanent toast</KtButton>
		<KtButton @click='minimalisticToast'>minimalistic toast</KtButton>
		<KtButton @click='linkToast'>link toast</KtButton>
	</div>
</template>

import { success, toaster } from "~/shared/toaster.ts"

export const someAction = async () => {
	// show a toast without waiting for it
	success({ text: "success" })

	// wait for toast to be done showing, or to error when aborted
	await success({ text: "will wait for this toast" }).done

	// abort the toast early
	const toBeAborted = success({ text: "will be aborted" })
	toBeAborted.abort()

	// programmatically push any kind of notification
	toaster.show({ text: "anything", type: "error" })

	// create some custom show handlers with default options
	const customizedShow = toaster.withOptions({ type: "success" })
	const message = customizedShow({ text: "my message" })
	await message.done
}

<script lang="ts">
import { defineComponent } from "vue"

import { success } from "~/shared/toaster.ts"

export default defineComponent({
	setup() {
		return {
			onClick: async () => {
				await success({
					text: "something went well",
				})
			}
		}
	}
})
</script>

<template>
	<KtButton label="Show Toast" @click="onClick">
</template>

<template>
	<KtToaster :toaster="toaster" />
</template>

<script lang="ts">
import { defineComponent } from "vue"

import { toaster } from "~/shared/toaster.ts"

export default defineComponent({
	setup() {
		return {
			// KtToaster needs a reference to your per-app toaster instance
			toaster
		}
	}
})
</script>

import { createToaster } from "@3yourmind/kotti-ui"

// create a toaster instance, usually there should only ever be one per app
export const toaster = createToaster<{
	default: Record<string, never>
	error: Record<string, never>
	success: Record<string, never>
}>()

// show a maximum number of toasts simultaneously, defaults to 3
// export const toaster = createToaster({ numberOfToasts: 6 })

// define custom notification presets with pre-configured options
export const error = toaster.withOptions({ duration: 5_000, type: "error" })
export const success = toaster.withOptions({ duration: 5_000, type: "success" })
export const successPersistent = toaster.withOptions({ type: "success" })

<KtToast type='error' />
<KtToast type='info' />
<KtToast type='success' />
<KtToast type='warning' />
<KtToast
	:type="{
		icon: null,
		backgroundColor: 'var(--gray-10)',
		darkColor: 'var(--gray-70)',
		lightColor: 'var(--gray-20)'
	}"
/>