<script>"use strict";
import Icon from "./Icon.svelte";
import {} from "../types/iconTypes";
import { createEventDispatcher } from "svelte";
export let type = "rectangle";
export let size = "sm";
export let color = "base";
export let leadingIcon = void 0;
export let trailingIcon = false;
export let contrast = false;
export let label = "";
const dispatch = createEventDispatcher();
$: iconOnly = label.length == 0 && (leadingIcon || trailingIcon);
$: charOnly = label.length == 1 && !(leadingIcon || trailingIcon);
function handleRemoveClick() {
  dispatch("remove");
}
</script>

<div
	class="inline-flex items-center text-xl border transition-all duration-100 ease-in-out"
	class:p-1={iconOnly || charOnly}
	class:w-6={iconOnly || charOnly}
	class:h-6={iconOnly || charOnly}
	class:justify-center={iconOnly || charOnly}
	class:px-2.5={size === 'sm' && !iconOnly}
	class:px-3={size === 'lg' && !iconOnly}
	class:py-0.5={size === 'sm' && !iconOnly}
	class:py-1={size === 'lg' && !iconOnly}
	class:bg-stone-100={color === 'stone' && !contrast}
	class:bg-stone-800={color === 'stone' && contrast}
	class:bg-rose-50={color === 'rose' && !contrast}
	class:bg-rose-700={color === 'rose' && contrast}
	class:bg-amber-50={color === 'amber' && !contrast}
	class:bg-yellow-700={color === 'amber' && contrast}
	class:bg-emerald-50={color === 'emerald' && !contrast}
	class:bg-emerald-700={color === 'emerald' && contrast}
	class:bg-blue-50={color === 'blue' && !contrast}
	class:bg-blue-600={color === 'blue' && contrast}
	class:bg-sky-50={color === 'sky' && !contrast}
	class:bg-sky-800={color === 'sky' && contrast}
	class:bg-base-200={color === 'base' && !contrast}
	class:bg-base-800={color === 'base' && contrast}
	class:text-gray-50={contrast}
	class:text-stone-50={color === 'stone' && contrast}
	class:text-stone-950={(color === 'stone' && !contrast) || (color === 'base' && !contrast)}
	class:text-rose-900={color === 'rose' && !contrast}
	class:text-amber-900={color === 'amber' && !contrast}
	class:text-emerald-900={color === 'emerald' && !contrast}
	class:text-blue-900={color === 'blue' && !contrast}
	class:text-sky-900={color === 'sky' && !contrast}
	class:border-stone-300={color === 'stone' && !contrast}
	class:border-stone-700={color === 'stone' && contrast}
	class:border-rose-200={color === 'rose' && !contrast}
	class:border-rose-900={color === 'rose' && contrast}
	class:border-yellow-200={color === 'amber' && !contrast}
	class:border-amber-900={color === 'amber' && contrast}
	class:border-emerald-200={color === 'emerald' && !contrast}
	class:border-emerald-900={color === 'emerald' && contrast}
	class:border-blue-200={color === 'blue' && !contrast}
	class:border-blue-900={color === 'blue' && contrast}
	class:border-sky-200={color === 'sky' && !contrast}
	class:border-sky-900={color === 'sky' && contrast}
	class:border-base-300={color === 'base' && !contrast}
	class:border-base-900={color === 'base' && contrast}
	class:rounded-md={type === 'rectangle'}
	class:rounded-full={type === 'circle'}
>
	{#if leadingIcon}
		<Icon
			iconName={leadingIcon}
			className={label.length == 0 ? '' : 'mr-2 pt-0.5'}
			color={contrast ? 'base' : color}
			size={label.length == 0 && leadingIcon ? '2xs' : 'xs'}
		/>
	{/if}

	{label}

	{#if trailingIcon}
		<button class={label.length == 0 ? '' : 'ml-1 pt-0.5'} on:click={handleRemoveClick}>
			<Icon
				iconName="close"
				size={label.length == 0 && trailingIcon ? '2xs' : 'xs'}
				color={contrast ? 'base' : color}
			/>
		</button>
	{/if}
</div>
