<script lang="ts">
	import { itemActions, highlightSearch, CloseButton } from 'svelecte/item';
	import chroma from 'chroma-js';
	// these properties can be used
	//export let inputValue;
	export let index = -1;
	export let item: { label: string; id_code: string; color: string };
	export let isSelected = false;
	export let isDisabled = false;
	//export let isMultiple = false;
	
	const color = chroma("rgb(255,0,0)");

</script>

<!-- you need to use itemActions and pass given events -->
<div
	class="sv-item"
	use:itemActions={{ item, index }}
	class:is-selected={isSelected}
	on:select
	on:deselect
	on:hover
>
	<div
		class={`sv-item-content`}
		style={`--item-color:${chroma(item.color).rgb().join(',')};`}
		class:disabled={isDisabled}
	>
		{#if !isSelected}
			{item.label}
		{:else}
			<div class="selected">
				<div class="label">{item.label}</div>
				<div class="unselect" data-action="deselect">
					<svg
						height="14"
						width="14"
						viewBox="0 0 20 20"
						aria-hidden="true"
						focusable="false"
						class="css-8mmkcg"
						><path
							d="M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z"
						/></svg
					>
				</div>
			</div>
		{/if}
	</div>
</div>

<style lang="scss">
	@import '../../variables';
	.unselect {
		color: rgb(var(--item-color));
		-moz-box-align: center;
		align-items: center;
		border-radius: 2px;
		display: flex;
		padding-left: 4px;
		padding-right: 4px;
		box-sizing: border-box;
		cursor: pointer;

		svg {
			fill: currentColor;
		}
		&:hover {
			background-color: currentColor;
			svg {
				fill: white;
			}
		}
	}

	.selected {
		background-color: rgba(var(--item-color), 0.1);
		border-radius: 2px;
		display: flex;
		margin: 2px;
		min-width: 0px;
		box-sizing: border-box;
	}
	.label {
		color: rgb(var(--item-color));
		border-radius: 2px;
		font-size: 85%;
		overflow: hidden;
		padding: 3px 3px 3px 6px;
		text-overflow: ellipsis;
		white-space: nowrap;
		box-sizing: border-box;
	}
	/** some style override */
	.sv-item {
		background-color: $background!important;
		padding: 0;
	}
	.sv-item-content {
		color: rgb(var(--item-color));
	}
	:global(.sv-dropdown-content) .sv-item-content {
		padding: 13px;
	}
	:global(.sv-dropdown-content) .sv-item {
		padding: 0;
	}
	:global(.sv-dd-item-active) .sv-item-content:not(.disabled) {
		background-color: rgba(var(--item-color), 0.1);
		color: rgb(var(--item-color)) !important;
	}
	:global(.sv-dd-item-active) .sv-dd-item{
		background-color: var(--sv-bg);
	}

	:global(.sv-content) .sv-item-content {
		padding: 0 !important;
		background-color: transparent;
	}
	:global(.sv-content) .sv-item {
		background-color: transparent;
	}
	.disabled,
	:global(.sv-dd-item-active) .sv-item-content.disabled {
		cursor: not-allowed;
		color: grey;
		background-color: var(--sv-bg);
	}

	:global(.creatable-row-wrap){
		background-color: red;
	}
</style>
