<script>"use strict";
import { createEventDispatcher } from "svelte";
const dispatch = createEventDispatcher();
let value = 50;
export let type = "value";
export let tooltip = void 0;
export let tooltipMode = "hover";
export let color = "blue";
export let rangeStart = 30;
export let rangeEnd = 75;
export let minValue = 0;
export let maxValue = 100;
let rangeColor = "#2f6ae1";
$: {
  rangeColor = color === "black" ? "#44403C" : "#2f6ae1";
}
$: value = Math.max(minValue, Math.min(value, maxValue));
$: rangeStart = Math.max(minValue, Math.min(rangeStart, maxValue));
$: rangeEnd = Math.max(minValue, Math.min(rangeEnd, maxValue));
function handleRangeStartInput(e) {
  const val = +e.target.value;
  if (val > rangeEnd) {
    rangeEnd = val;
  }
  rangeStart = val;
}
function handleRangeEndInput(e) {
  const val = +e.target.value;
  if (val < rangeStart) {
    rangeStart = val;
  }
  rangeEnd = val;
}
$: dispatch("change", { value, rangeStart, rangeEnd });
const percent = (val) => (val - minValue) / (maxValue - minValue) * 100;
</script>

{#if type === 'value'}
	<div class="flex flex-col items-center">
		<div class="relative w-full slider-hover-wrapper">
			<input
				id="range"
				type="range"
				min={minValue}
				max={maxValue}
				bind:value
				class="w-full appearance-none bg-gray-300 rounded-full h-2 focus:outline-none focus:ring-2 focus:ring-blue-500 my-4"
				style="background: linear-gradient(to right, {rangeColor} {percent(
					value
				)}%, #F0EDE4 {percent(value)}%);"
			/>

			<div
				class="absolute"
				style="left: {percent(value)}%; transform: translateX(-50%); top: 40px;"
			>
				<span>{value}</span>
			</div>

			{#if tooltip && tooltipMode !== null}
				<div
					class="absolute tooltip-hoverable bg-stone-700 font-medium text-white text-base py-2 px-3 rounded-lg shadow transition-opacity duration-150"
					class:opacity-0={tooltipMode === 'hover'}
					style="left: {percent(value)}%; transform: translateX(-50%); top: -35px;"
				>
					{tooltip}
				</div>
			{/if}
		</div>
	</div>
{:else if type === 'range'}
	{#if color !== 'multicolor'}
		<div class="flex flex-col items-center">
			<div class="relative w-full h-10 slider-hover-wrapper">
				<div
					class="absolute w-full h-2 bg-gray-300 rounded-full top-4"
					style="background: linear-gradient(to right, 
						#F0EDE4 0%, 
						#F0EDE4 {percent(rangeStart)}%, 
						{rangeColor} {percent(rangeStart)}%, 
						{rangeColor} {percent(rangeEnd)}%, 
						#F0EDE4 {percent(rangeEnd)}%, 
						#F0EDE4 100%
					);"
				></div>

				<input
					type="range"
					min={minValue}
					max={maxValue}
					value={rangeStart}
					on:input={handleRangeStartInput}
					class="range-input range-input-left absolute w-full appearance-none bg-transparent h-2 focus:outline-none focus:ring-2 focus:ring-blue-500 top-4"
				/>
				<input
					type="range"
					min={minValue}
					max={maxValue}
					value={rangeEnd}
					on:input={handleRangeEndInput}
					class="range-input range-input-right absolute w-full appearance-none bg-transparent h-2 focus:outline-none focus:ring-2 focus:ring-blue-500 top-4"
				/>

				<div
					class="absolute"
					style="left: {percent(rangeStart)}%; transform: translateX(-50%); top: 40px;"
				>
					<span>{rangeStart}</span>
				</div>
				<div
					class="absolute tooltip-hoverable transition-opacity duration-150"
					class:opacity-0={tooltipMode === 'hover'}
					style="left: {percent(rangeEnd)}%; transform: translateX(-50%); top: 40px;"
				>
					<span>{rangeEnd}</span>
				</div>

				{#if tooltip && tooltipMode !== null}
					<div
						class="absolute tooltip-hoverable bg-stone-700 font-medium text-white text-base py-2 px-3 rounded-lg shadow transition-opacity duration-150"
						class:opacity-0={tooltipMode === 'hover'}
						style="left: {(percent(rangeStart) + percent(rangeEnd)) /
							2}%; transform: translateX(-50%); top: -35px;"
					>
						{tooltip}
					</div>
				{/if}
			</div>
		</div>
	{:else}
		<!-- Multicolor variant -->
		<div class="flex flex-col items-center">
			<div class="relative w-full h-10 slider-hover-wrapper">
				<div
					class="absolute w-full h-2 bg-gray-300 rounded-full top-4"
					style="background: linear-gradient(to right, 
						#E1674C 0%, 
						#E1674C {percent(rangeStart)}%, 
						#FBBF24 {percent(rangeStart)}%, 
						#FBBF24 {percent(rangeEnd)}%, 
						#39CE98 {percent(rangeEnd)}%, 
						#39CE98 100%
					);"
				></div>

				<input
					type="range"
					min={minValue}
					max={maxValue}
					value={rangeStart}
					on:input={handleRangeStartInput}
					class="range-input range-input-left absolute w-full appearance-none bg-transparent h-2 focus:outline-none focus:ring-2 focus:ring-blue-500 top-4"
				/>
				<input
					type="range"
					min={minValue}
					max={maxValue}
					value={rangeEnd}
					on:input={handleRangeEndInput}
					class="range-input range-input-right absolute w-full appearance-none bg-transparent h-2 focus:outline-none focus:ring-2 focus:ring-blue-500 top-4"
				/>

				<div
					class="absolute"
					style="left: {percent(rangeStart)}%; transform: translateX(-50%); top: 40px;"
				>
					<span>{rangeStart}</span>
				</div>
				<div
					class="absolute"
					style="left: {percent(rangeEnd)}%; transform: translateX(-50%); top: 40px;"
				>
					<span>{rangeEnd}</span>
				</div>

				{#if tooltip && tooltipMode !== null}
					<div
						class="absolute tooltip-hoverable bg-stone-700 font-medium text-white text-base py-2 px-3 rounded-lg shadow transition-opacity duration-150"
						class:opacity-0={tooltipMode === 'hover'}
						style="left: {(percent(rangeStart) + percent(rangeEnd)) /
							2}%; transform: translateX(-50%); top: -35px;"
					>
						{tooltip}
					</div>
				{/if}
			</div>
		</div>
	{/if}
{/if}

<style>
	input[type='range'] {
		pointer-events: none;
	}
	input[type='range']::-webkit-slider-thumb {
		-webkit-appearance: none;
		appearance: none;
		width: 14px;
		height: 24px;
		background: #f9fafb;
		border: 1px solid #d1d5db;
		border-radius: 4px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
		cursor: pointer;
		pointer-events: auto;
		position: relative;
	}
	input[type='range']::-webkit-slider-thumb::before,
	input[type='range']::-webkit-slider-thumb::after {
		content: '';
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 2px;
		height: 70%;
		background-color: #374151;
	}
	input[type='range']::-webkit-slider-thumb::before {
		left: 30%;
	}
	input[type='range']::-webkit-slider-thumb::after {
		left: 70%;
	}
	input[type='range']::-moz-range-thumb {
		width: 24px;
		height: 50px;
		background: #f9fafb;
		border: 2px solid #d1d5db;
		border-radius: 9999px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
		cursor: pointer;
		pointer-events: auto;
		position: relative;
	}
	input[type='range']::-moz-range-thumb::before,
	input[type='range']::-moz-range-thumb::after {
		content: '';
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 2px;
		height: 70%;
		background-color: #374151;
	}
	input[type='range']::-moz-range-thumb::before {
		left: 30%;
	}
	input[type='range']::-moz-range-thumb::after {
		left: 70%;
	}
	.range-input-left::-webkit-slider-thumb,
	.range-input-left::-moz-range-thumb {
		z-index: 3;
	}
	.range-input-right::-webkit-slider-thumb,
	.range-input-right::-moz-range-thumb {
		z-index: 4;
	}

	.tooltip-hoverable {
		transition: opacity 0.15s ease-in-out;
		opacity: 1;
	}

	.tooltip-hoverable.opacity-0 {
		opacity: 0;
	}

	.slider-hover-wrapper:hover .tooltip-hoverable.opacity-0 {
		opacity: 1;
	}
</style>
