<script>
  import { boundElements } from 'svelte-preprocess-delegate-events/runtime';
  import { registerDelegatedEvents } from 'svelte-preprocess-delegate-events/runtime';
  import { get_current_component } from 'svelte/internal';"use strict";
import { twMerge } from "tailwind-merge";
import Icon, {} from "./Icon.svelte";
import { afterUpdate } from "svelte";
import processingBase from "../assets/gifs/processing-base.gif";
import processingStone from "../assets/gifs/processing-stone.gif";
import processingEmerald from "../assets/gifs/processing-emerald.gif";
import processingBlue from "../assets/gifs/processing-blue.gif";
import processingRose from "../assets/gifs/processing-rose.gif";
import processingSky from "../assets/gifs/processing-sky.gif";
import processingAmber from "../assets/gifs/processing-amber.gif";
import processingTerracotta from "../assets/gifs/processing-terracotta.gif";
export let variant = "primary";
export let size = "md";
export let appearance = "bevel";
export let color = "emerald";
export let leadingIcon = null;
export let trailingIcon = null;
export let className = "";
export let text = "";
export let disabled = false;
export let processing = false;
const processingSpinners = {
  primary: {
    stone: processingBase,
    base: processingStone,
    emerald: processingBase,
    blue: processingBase,
    rose: processingBase,
    sky: processingBase,
    amber: processingBase,
    terracota: processingBase
  },
  secondary: {
    stone: processingStone,
    base: processingStone,
    emerald: processingEmerald,
    blue: processingBlue,
    rose: processingRose,
    sky: processingSky,
    amber: processingAmber,
    terracota: processingTerracotta
  },
  tertiary: processingStone,
  text: null
};
function getSpinnerPath() {
  const variantSpinners = processingSpinners[variant];
  if (typeof variantSpinners === "string" || variantSpinners === null) {
    return variantSpinners;
  }
  return variantSpinners[color] ?? variantSpinners["stone"];
}
let spinnerPath;
afterUpdate(() => {
  spinnerPath = getSpinnerPath();
});

  const button0 = boundElements();
  const component0 = get_current_component();
  $: registerDelegatedEvents(button0.bounds, component0, (handler) => handler, {});
</script>

<button
	bind:this={button0.bounds}
	class={twMerge(
		'focus:ring-2',
		'focus:ring-offset-2',
		'focus:ring-sky-500',
		'disabled:opacity-30',
		'flex',
		'items-center',
		'gap-1.5',
		'transition-all duration-100 ease-in-out',
		className
	)}
	{disabled}
	class:hover:border-stone-800={variant === 'primary' && appearance === 'flat' && color === 'stone'}
	class:focus:border-stone-800={variant === 'primary' && appearance === 'flat' && color === 'stone'}
	class:focus:border-base-400={variant === 'primary' && appearance === 'flat' && color === 'base'}
	class:hover:border-emerald-800={variant === 'primary' &&
		appearance === 'flat' &&
		color === 'emerald'}
	class:focus:border-emerald-800={variant === 'primary' &&
		appearance === 'flat' &&
		color === 'emerald'}
	class:hover:border-blue-700={variant === 'primary' && appearance === 'flat' && color === 'blue'}
	class:focus:border-blue-700={variant === 'primary' && appearance === 'flat' && color === 'blue'}
	class:hover:border-rose-700={variant === 'primary' && appearance === 'flat' && color === 'rose'}
	class:focus:border-rose-700={variant === 'primary' && appearance === 'flat' && color === 'rose'}
	class:hover:border-sky-800={variant === 'primary' && appearance === 'flat' && color === 'sky'}
	class:focus:border-sky-800={variant === 'primary' && appearance === 'flat' && color === 'sky'}
	class:hover:border-amber-800={variant === 'primary' && appearance === 'flat' && color === 'amber'}
	class:focus:border-amber-800={variant === 'primary' && appearance === 'flat' && color === 'amber'}
	class:pb-1.5={size === 'sm' && variant !== 'text'}
	class:pt-[5px]={size === 'sm' && variant !== 'text'}
	class:px-4={size === 'sm' && variant !== 'text'}
	class:py-2={size === 'md' && variant !== 'text'}
	class:px-5={size === 'md' && variant !== 'text'}
	class:py-3={size === 'lg' && variant !== 'text'}
	class:px-7={size === 'lg' && variant !== 'text'}
	class:py-0.5={variant === 'text'}
	class:px-2={variant === 'text'}
	class:rounded-[6.25rem]={variant === 'primary' || variant === 'secondary'}
	class:rounded-md={(variant === 'tertiary' || variant === 'text') && size === 'sm'}
	class:rounded-lg={(variant === 'tertiary' || variant === 'text') && size === 'md'}
	class:rounded-[10px]={(variant === 'tertiary' || variant === 'text') && size === 'lg'}
	class:bg-stone-700={color === 'stone' && variant === 'primary'}
	class:border-stone-600={color === 'stone' && variant === 'primary'}
	class:hover:bg-stone-800={color === 'stone' && variant === 'primary' && !disabled}
	class:bg-base-200={color === 'base' && variant === 'primary'}
	class:border-base-300={color === 'base' && variant === 'primary'}
	class:hover:bg-base-400={color === 'base' && variant === 'primary' && !disabled}
	class:bg-emerald-700={color === 'emerald' && variant === 'primary'}
	class:border-emerald-600={color === 'emerald' && variant === 'primary'}
	class:hover:bg-emerald-800={color === 'emerald' && variant === 'primary' && !disabled}
	class:bg-blue-600={color === 'blue' && variant === 'primary'}
	class:border-blue-500={color === 'blue' && (variant === 'primary' || variant === 'secondary')}
	class:hover:bg-blue-700={color === 'blue' && variant === 'primary' && !disabled}
	class:bg-rose-600={color === 'rose' && variant === 'primary'}
	class:border-rose-500={color === 'rose' && (variant === 'primary' || variant === 'secondary')}
	class:hover:bg-rose-700={color === 'rose' && variant === 'primary' && !disabled}
	class:bg-sky-700={color === 'sky' && variant === 'primary'}
	class:border-sky-600={color === 'sky' && variant === 'primary'}
	class:hover:bg-sky-800={color === 'sky' && variant === 'primary' && !disabled}
	class:bg-amber-700={color === 'amber' && variant === 'primary'}
	class:border-amber-600={color === 'amber' && variant === 'primary'}
	class:hover:bg-amber-800={color === 'amber' && variant === 'primary' && !disabled}
	class:bg-terracota-600={color === 'terracota' && variant === 'primary'}
	class:hover:bg-terracota-700={color === 'terracota' && variant === 'primary'}
	class:text-base-50={(color === 'emerald' ||
		color === 'blue' ||
		color === 'rose' ||
		color === 'amber' ||
		color === 'sky' ||
		color === 'stone' ||
		color === 'terracota') &&
		variant === 'primary'}
	class:text-stone-950={color === 'base' ||
		(color === 'stone' && (variant === 'secondary' || variant === 'text')) ||
		variant === 'tertiary'}
	class:text-emerald-700={color === 'emerald' && (variant === 'secondary' || variant === 'text')}
	class:hover:text-emerald-900={color === 'emerald' && variant === 'text' && !disabled}
	class:hover:decoration-emerald-900={color === 'emerald' && variant === 'text' && !disabled}
	class:text-blue-600={color === 'blue' && (variant === 'secondary' || variant === 'text')}
	class:hover:text-blue-900={color === 'blue' && variant === 'text' && !disabled}
	class:hover:decoration-blue-900={color === 'blue' && variant === 'text' && !disabled}
	class:text-rose-600={color === 'rose' && (variant === 'secondary' || variant === 'text')}
	class:hover:text-rose-900={color === 'rose' && variant === 'text' && !disabled}
	class:hover:decoration-rose-900={color === 'rose' && variant === 'text' && !disabled}
	class:text-sky-600={color === 'sky' && (variant === 'secondary' || variant === 'text')}
	class:hover:text-sky-900={color === 'sky' && variant === 'text' && !disabled}
	class:hover:decoration-sky-900={color === 'sky' && variant === 'text' && !disabled}
	class:text-amber-700={color === 'amber' && (variant === 'secondary' || variant === 'text')}
	class:hover:text-amber-900={color === 'amber' && variant === 'text' && !disabled}
	class:text-terracota-600={color === 'terracota' &&
		(variant === 'secondary' || variant === 'text')}
	class:hover:text-terracota-900={color === 'terracota' && variant === 'text' && !disabled}
	class:hover:decoration-amber-900={color === 'amber' && variant === 'text' && !disabled}
	class:hover:underline={variant === 'text' && !disabled}
	class:shadow-bevel-amber={variant === 'primary' && appearance === 'bevel' && color === 'amber'}
	class:shadow-bevel-stone={variant === 'primary' && appearance === 'bevel' && color === 'stone'}
	class:shadow-bevel-base={variant === 'primary' && appearance === 'bevel' && color === 'base'}
	class:shadow-bevel-emerald={variant === 'primary' &&
		appearance === 'bevel' &&
		color === 'emerald'}
	class:shadow-bevel-blue={variant === 'primary' && appearance === 'bevel' && color === 'blue'}
	class:shadow-bevel-rose={variant === 'primary' && appearance === 'bevel' && color === 'rose'}
	class:shadow-bevel-sky={variant === 'primary' && appearance === 'bevel' && color === 'sky'}
	class:shadow-bevel-terracota={variant === 'primary' &&
		appearance === 'bevel' &&
		color === 'terracota'}
	class:shadow={variant === 'tertiary'}
	class:border={variant === 'secondary' ||
		variant === 'tertiary' ||
		(variant === 'primary' && appearance === 'flat')}
	class:border-stone-700={color === 'stone' && variant === 'secondary'}
	class:hover:bg-base-50={(color === 'stone' || color === 'base') &&
		variant === 'secondary' &&
		!disabled}
	class:border-stone-300={color === 'base' && variant === 'secondary'}
	class:hover:border-stone-400={color === 'base' && variant === 'secondary' && !disabled}
	class:border-emerald-700={color === 'emerald' && variant === 'secondary'}
	class:hover:border-emerald-900={color === 'emerald' && variant === 'secondary'}
	class:hover:bg-emerald-50={color === 'emerald' && variant === 'secondary' && !disabled}
	class:hover:border-blue-900={color === 'blue' && variant === 'secondary'}
	class:hover:bg-blue-50={color === 'blue' && variant === 'secondary' && !disabled}
	class:hover:border-rose-900={color === 'rose' && variant === 'secondary'}
	class:hover:bg-rose-50={color === 'rose' && variant === 'secondary' && !disabled}
	class:border-sky-700={color === 'sky' && variant === 'secondary'}
	class:hover:border-sky-900={color === 'sky' && variant === 'secondary'}
	class:hover:bg-sky-50={color === 'sky' && variant === 'secondary' && !disabled}
	class:border-amber-700={color === 'amber' && variant === 'secondary'}
	class:hover:border-amber-900={color === 'amber' && variant === 'secondary'}
	class:hover:bg-amber-50={color === 'amber' && variant === 'secondary' && !disabled}
	class:border-terracota-800={color === 'terracota' && variant === 'secondary'}
	class:hover:bg-terracota-50={color === 'terracota' && variant === 'secondary' && !disabled}
	class:focus:bg-base-400={color === 'base' && variant === 'primary' && !disabled}
	class:focus:bg-blue-700={color === 'blue' && variant === 'primary' && !disabled}
	class:focus:bg-rose-700={color === 'rose' && variant === 'primary' && !disabled}
	class:focus:bg-sky-800={color === 'sky' && variant === 'primary' && !disabled}
	class:focus:bg-amber-800={color === 'amber' && variant === 'primary' && !disabled}
	class:focus:bg-stone-800={color === 'stone' && variant === 'primary' && !disabled}
	class:focus:bg-emerald-800={color === 'emerald' && variant === 'primary' && !disabled}
	class:focus:bg-blue-50={color === 'blue' && variant === 'secondary' && !disabled}
	class:focus:bg-rose-50={color === 'rose' && variant === 'secondary' && !disabled}
	class:focus:bg-sky-50={color === 'sky' && variant === 'secondary' && !disabled}
	class:focus:bg-amber-50={color === 'amber' && variant === 'secondary' && !disabled}
	class:focus:bg-emerald-50={color === 'emerald' && variant === 'secondary' && !disabled}
	class:focus:bg-base-50={(color === 'stone' || color === 'base') &&
		variant === 'secondary' &&
		!disabled}
	class:border-base-100={variant === 'tertiary'}
	class:hover:border-base-400={(variant === 'tertiary' && !disabled) ||
		(variant === 'primary' && appearance === 'flat')}
	{...$$restProps}
>
	{#if variant !== 'text' && processing}
		<img src={spinnerPath} alt={spinnerPath ?? 'processing'} class="w-5 h-5" />
	{:else}
		{#if leadingIcon}
			<Icon
				iconName={leadingIcon.iconName}
				size={leadingIcon?.size || 'md'}
				color={leadingIcon?.color || 'stone'}
			/>
		{/if}
		{#if !text}
			<slot />
		{:else}
			<span>{text}</span>
		{/if}
		{#if trailingIcon}
			<Icon
				iconName={trailingIcon.iconName}
				size={trailingIcon?.size || 'md'}
				color={trailingIcon?.color || 'stone'}
			/>
		{/if}
	{/if}
</button>
