<script>"use strict";
import { createEventDispatcher } from "svelte";
import { fade } from "svelte/transition";
import { spring } from "svelte/motion";
import Icon from "./Icon.svelte";
import { slideHandler } from "../slide";
import Badge from "./Badge.svelte";
import { twMerge } from "tailwind-merge";
export let variant = "success";
export let leadingIcon = false;
export let title = "";
export let content = "";
export let dismissible = false;
export let className = "";
let nodeRef;
const alertIcons = {
  success: "check",
  danger: "close",
  info: "alert-outline",
  action: "alert-outline",
  warning: "alert-outline",
  base: "dot"
};
const badgeColors = {
  success: "emerald",
  danger: "rose",
  info: "blue",
  action: "sky",
  warning: "amber",
  base: "stone"
};
const dispatch = createEventDispatcher();
let coords = spring({ x: 0, y: 0 }, { stiffness: 0.05, damping: 0.5 });
let width;
let opacity = spring(1, { stiffness: 0.05, damping: 0.5 });
function handleSlideStart() {
  coords.stiffness = coords.damping = 1;
}
function handleSlideMove(event) {
  coords.update(($coords2) => ({
    x: $coords2.x + event.detail.dx,
    y: $coords2.y + event.detail.dy
  }));
  opacity.set(Math.max(0, 1 - Math.abs($coords.x) / width));
}
function handleSlideEnd() {
  const offsetX = $coords.x;
  if (Math.abs(offsetX) > width / 2) {
    dispatch("dismiss");
  } else {
    coords.set({ x: 0, y: 0 });
    opacity.set(1);
  }
}
</script>

<div
	bind:offsetWidth={width}
	use:slideHandler
	on:slidestart={handleSlideStart}
	on:slidemove={handleSlideMove}
	on:slideend={handleSlideEnd}
	style="transform: translate3d({$coords.x}px, 0, 0); opacity: {$opacity};"
	class={twMerge(
		'p-4',
		'rounded-md',
		'border',
		'md:w-[25rem]',
		'w-[90vw]',
		'shadow-lg',
		'cursor-grab',
		className
	)}
	transition:fade
	bind:this={nodeRef}
	class:bg-emerald-50={variant === 'success'}
	class:bg-rose-50={variant === 'danger'}
	class:bg-blue-50={variant === 'info'}
	class:bg-sky-50={variant === 'action'}
	class:bg-amber-50={variant === 'warning'}
	class:bg-base-100={variant === 'base'}
	class:border-emerald-200={variant === 'success'}
	class:border-rose-200={variant === 'danger'}
	class:border-blue-200={variant === 'info'}
	class:border-sky-200={variant === 'action'}
	class:border-yellow-200={variant === 'warning'}
	class:border-stone-200={variant === 'base'}
>
	<div class="flex items-center w-full gap-2">
		{#if leadingIcon}
			<Badge
				type="circle"
				size="sm"
				color={badgeColors[variant]}
				leadingIcon={alertIcons[variant]}
				contrast
			/>
		{/if}
		<p
			class="w-full md:text-left select-none"
			class:text-center={!title && !leadingIcon}
			class:text-emerald-900={variant === 'success'}
			class:text-rose-900={variant === 'danger'}
			class:text-blue-900={variant === 'info'}
			class:text-sky-900={variant === 'action'}
			class:text-amber-900={variant === 'warning'}
			class:text-stone-950={variant === 'base'}
			class:font-bold={title}
			class:text-4xl={title}
			class:text-3xl={!title}
		>
			{#if title}
				{title}
			{:else}
				{content}
			{/if}
		</p>

		{#if dismissible}
			<button
				class="items-center justify-center rounded-full hidden md:flex"
				on:click={() => dispatch('dismiss')}
			>
				<Icon iconName="close" size="sm" />
			</button>
		{/if}
	</div>

	{#if title && content}
		<p
			class="mt-1.5 text-3xl select-none"
			class:text-emerald-900={variant === 'success'}
			class:text-rose-900={variant === 'danger'}
			class:text-blue-900={variant === 'info'}
			class:text-sky-900={variant === 'action'}
			class:text-amber-900={variant === 'warning'}
			class:text-stone-950={variant === 'base'}
		>
			{content}
		</p>
	{/if}
</div>
