<script>import { BEM } from '../../models/BEM';
import { createEventDispatcher } from 'svelte';
export let label = '';
export let icon = '';
export let image = '';
export let removable = false;
export let removeIcon = '';
export let imageAlt = '';
export let theme = '';
export let size = 'md';
const dispatch = createEventDispatcher();
const onRemovable = (e) => dispatch('delete', e);
const parent = new BEM('UI-Chip', {
    [theme]: !!theme,
    [size]: !!size
});
</script>

<div class={parent.toString()} on:click>
	{#if icon && !image}
		<span class="icon">
			<slot name="icon">
				<i class={icon} />
			</slot>
		</span>
	{:else if image}
		<img src={image} class="image" alt={imageAlt} title={imageAlt} />
	{/if}
	<span class="label">
		<slot>
			{label}
		</slot>
	</span>
	{#if removable}
		<span class="iconRight" on:click|stopPropagation={onRemovable}>
			<slot name="iconRight">
				<i class={removeIcon ? removeIcon : 'fa fa-times'} />
			</slot>
		</span>
	{/if}
</div>

<style>div {
  display: inline-flex;
  align-items: center;
  background-color: #dee2e6;
  color: #495057;
  border-radius: 16px;
  padding: 0 0.75rem;
}

.iconRight {
  border-radius: 6px;
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
  margin-left: 0.5rem;
  cursor: pointer;
}

.icon,
.image {
  margin-right: 0.5rem;
}

.image {
  width: 2.25rem;
  height: 2.25rem;
  margin-left: -0.75rem;
  margin-right: 0.5rem;
  border-radius: 50%;
}

.label {
  line-height: 1.5;
  margin-top: 0.375rem;
  margin-bottom: 0.375rem;
}

.primary {
  background-color: var(--ui-primary);
  color: var(--ui-theme-primary);
}
.primary:hover {
  opacity: 0.9;
}

.secondary {
  background-color: var(--ui-secondary);
  color: var(--ui-theme-primary);
}
.secondary:hover {
  opacity: 0.9;
}

.danger {
  background-color: var(--ui-danger);
  color: var(--ui-theme-primary);
}
.danger:hover {
  opacity: 0.9;
}

.info {
  background-color: var(--ui-info);
  color: var(--ui-theme-primary);
}
.info:hover {
  opacity: 0.9;
}

.success {
  background-color: var(--ui-success);
  color: var(--ui-theme-primary);
}
.success:hover {
  opacity: 0.9;
}

.warning {
  background-color: var(--ui-warning);
  color: var(--ui-theme-primary);
}
.warning:hover {
  opacity: 0.9;
}

.default {
  background-color: var(--ui-default);
  color: var(--ui-theme-primary);
}
.default:hover {
  opacity: 0.9;
}

.dark {
  background-color: var(--ui-dark);
  color: var(--ui-theme-primary);
}
.dark:hover {
  opacity: 0.9;
}

.white {
  background-color: var(--ui-white);
  color: var(--ui-theme-primary);
}
.white:hover {
  opacity: 0.9;
}</style>
