'use client';

import { cn } from "../../utils/cn.mjs";
import { useItemSelector } from "../../hooks/useItemSelector.mjs";
import { createElement, useEffect, useRef, useState } from "react";
import { cva } from "class-variance-authority";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/components/SwitchSelector/index.tsx
const defaultChoices = [{
	content: "Off",
	value: false
}, {
	content: "On",
	value: true
}];
let SwitchSelectorColor = /* @__PURE__ */ function(SwitchSelectorColor$1) {
	SwitchSelectorColor$1["PRIMARY"] = "primary";
	SwitchSelectorColor$1["SECONDARY"] = "secondary";
	SwitchSelectorColor$1["DESTRUCTIVE"] = "destructive";
	SwitchSelectorColor$1["NEUTRAL"] = "neutral";
	SwitchSelectorColor$1["LIGHT"] = "light";
	SwitchSelectorColor$1["DARK"] = "dark";
	SwitchSelectorColor$1["TEXT"] = "text";
	return SwitchSelectorColor$1;
}({});
const switchSelectorVariant = cva("flex w-fit cursor-pointer flex-row gap-2 rounded-full border-[1.3px] p-[1.5px]", {
	variants: {
		color: {
			[`${SwitchSelectorColor.PRIMARY}`]: "border-primary text-primary",
			[`${SwitchSelectorColor.SECONDARY}`]: "border-secondary text-secondary",
			[`${SwitchSelectorColor.DESTRUCTIVE}`]: "border-destructive bg-destructive text-destructive",
			[`${SwitchSelectorColor.NEUTRAL}`]: "border-neutral text-neutral",
			[`${SwitchSelectorColor.LIGHT}`]: "border-white text-white",
			[`${SwitchSelectorColor.DARK}`]: "border-neutral-800 text-neutral-800",
			[`${SwitchSelectorColor.TEXT}`]: "border-text text-text"
		},
		disabled: {
			true: "cursor-not-allowed opacity-50",
			false: ""
		}
	},
	defaultVariants: {
		color: `${SwitchSelectorColor.PRIMARY}`,
		disabled: false
	}
});
let SwitchSelectorSize = /* @__PURE__ */ function(SwitchSelectorSize$1) {
	SwitchSelectorSize$1["SM"] = "sm";
	SwitchSelectorSize$1["MD"] = "md";
	SwitchSelectorSize$1["LG"] = "lg";
	return SwitchSelectorSize$1;
}({});
const choiceVariant = cva("z-1 w-full flex-1 cursor-pointer font-medium text-sm transition-all duration-300 ease-in-out aria-selected:cursor-default data-[indicator=true]:text-text-opposite motion-reduce:transition-none", {
	variants: { size: {
		[`${SwitchSelectorSize.SM}`]: "px-2 py-1 text-xs",
		[`${SwitchSelectorSize.MD}`]: "p-2 text-sm",
		[`${SwitchSelectorSize.LG}`]: "p-4 text-base"
	} },
	defaultVariants: { size: `${SwitchSelectorSize.MD}` }
});
const indicatorVariant = cva("absolute top-0 z-0 h-full w-auto rounded-full transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none", { variants: { color: {
	[`${SwitchSelectorColor.PRIMARY}`]: "bg-primary data-[indicator=true]:text-text",
	[`${SwitchSelectorColor.SECONDARY}`]: "bg-secondary data-[indicator=true]:text-text",
	[`${SwitchSelectorColor.DESTRUCTIVE}`]: "bg-destructive data-[indicator=true]:text-text",
	[`${SwitchSelectorColor.NEUTRAL}`]: "bg-neutral data-[indicator=true]:text-white",
	[`${SwitchSelectorColor.LIGHT}`]: "bg-white data-[indicator=true]:text-black",
	[`${SwitchSelectorColor.DARK}`]: "bg-neutral-800 data-[indicator=true]:text-white",
	[`${SwitchSelectorColor.TEXT}`]: "bg-text data-[indicator=true]:text-text-opposite"
} } });
/**
*
* Component that allows the user to select one of the provided choices.
*
* Example:
* ```jsx
* <SwitchSelector
*   choices={[
*     { content: 'Option 1', value: 'option1' },
*     { content: 'Option 2', value: 'option2' },
*     { content: 'Option 3', value: 'option3' },
*   ]}
*   value="option1"
*   onChange={(choice) => console.log(choice)}
* />
* ```
*/
const SwitchSelector = ({ choices = defaultChoices, value, defaultValue, onChange, color = SwitchSelectorColor.PRIMARY, size = SwitchSelectorSize.MD, className, hoverable = true, disabled = false }) => {
	const [valueState, setValue] = useState(value ?? defaultValue ?? choices[0].value);
	const [hoveredIndex, setHoveredIndex] = useState(null);
	const optionsRefs = useRef([]);
	const indicatorRef = useRef(null);
	const { choiceIndicatorPosition } = useItemSelector(optionsRefs, { isHoverable: hoverable });
	const selectedIndex = choices.findIndex((choice) => choice.value === valueState);
	const indicatorIndex = hoverable && hoveredIndex !== null ? hoveredIndex : selectedIndex;
	const handleChange = (newValue) => {
		setValue(newValue);
		onChange?.(newValue);
	};
	useEffect(() => {
		if (value === void 0) return;
		setValue(value);
	}, [value]);
	return /* @__PURE__ */ jsx("div", {
		className: switchSelectorVariant({
			color,
			disabled,
			className
		}),
		role: "tablist",
		"aria-disabled": disabled ? "true" : void 0,
		children: /* @__PURE__ */ jsxs("div", {
			className: "relative flex size-full flex-row items-center justify-center",
			children: [choices.map((choice, index) => {
				const { content, value: value$1, ...buttonProps } = choice;
				const isKeyOfKey = typeof value$1 === "string" || typeof value$1 === "number";
				const isSelected = index === selectedIndex;
				const isIndicatorOwner = index === indicatorIndex;
				return /* @__PURE__ */ createElement("button", {
					...buttonProps,
					className: cn(choiceVariant({ size }), disabled && "cursor-not-allowed"),
					key: isKeyOfKey ? value$1 : index,
					role: "tab",
					onClick: () => handleChange(value$1),
					"aria-selected": isSelected ? "true" : void 0,
					"data-indicator": isIndicatorOwner ? "true" : void 0,
					disabled: disabled || isSelected,
					tabIndex: isSelected ? 0 : -1,
					ref: (el) => {
						optionsRefs.current[index] = el;
					},
					onMouseEnter: () => !disabled && setHoveredIndex(index),
					onMouseLeave: () => !disabled && setHoveredIndex(null)
				}, content);
			}), choiceIndicatorPosition && /* @__PURE__ */ jsx("div", {
				className: cn(indicatorVariant({ color })),
				style: choiceIndicatorPosition,
				ref: indicatorRef
			})]
		})
	});
};

//#endregion
export { SwitchSelector, SwitchSelectorColor, SwitchSelectorSize };
//# sourceMappingURL=index.mjs.map