"use client";

import * as SelectPrimitives from "@radix-ui/react-select";
import {
	RiArrowDownSLine,
	RiArrowUpSLine,
	RiCheckLine,
	RiExpandUpDownLine,
} from "@remixicon/react";
import React from "react";
import { cx, focusInput, hasErrorInput } from "../lib/utils";

const OnboardingSelect = SelectPrimitives.Root;
OnboardingSelect.displayName = "OnboardingSelect";

const OnboardingSelectGroup = SelectPrimitives.Group;
OnboardingSelectGroup.displayName = "OnboardingSelectGroup";

const OnboardingSelectValue = SelectPrimitives.Value;
OnboardingSelectValue.displayName = "OnboardingSelectValue";

const selectTriggerStyles = [
	cx(
		"group/trigger flex w-full select-none items-center justify-between gap-2 truncate rounded-md border px-3 py-2 shadow-sm outline-none transition text-base sm:text-sm",
		"border-border",
		"text-foreground",
		"data-[placeholder]:text-muted-foreground",
		"bg-background",
		"hover:bg-muted",
		"data-[disabled]:bg-muted data-[disabled]:text-muted-foreground",
		focusInput,
	),
];

const OnboardingSelectTrigger = React.forwardRef<
	React.ElementRef<typeof SelectPrimitives.Trigger>,
	React.ComponentPropsWithoutRef<typeof SelectPrimitives.Trigger> & {
		hasError?: boolean;
	}
>(({ className, hasError, children, ...props }, forwardedRef) => {
	return (
		<SelectPrimitives.Trigger
			ref={forwardedRef}
			className={cx(
				selectTriggerStyles,
				hasError ? hasErrorInput : "",
				className,
			)}
			{...props}
		>
			<span className="truncate">{children}</span>
			<SelectPrimitives.Icon asChild>
				<RiExpandUpDownLine
					className={cx(
						"size-4 shrink-0",
						"text-muted-foreground",
						"group-data-[disabled]/trigger:text-muted-foreground",
					)}
				/>
			</SelectPrimitives.Icon>
		</SelectPrimitives.Trigger>
	);
});

OnboardingSelectTrigger.displayName = "OnboardingSelectTrigger";

const OnboardingSelectScrollUpButton = React.forwardRef<
	React.ElementRef<typeof SelectPrimitives.ScrollUpButton>,
	React.ComponentPropsWithoutRef<typeof SelectPrimitives.ScrollUpButton>
>(({ className, ...props }, forwardedRef) => (
	<SelectPrimitives.ScrollUpButton
		ref={forwardedRef}
		className={cx(
			"flex cursor-default items-center justify-center py-1",
			className,
		)}
		{...props}
	>
		<RiArrowUpSLine className="size-3 shrink-0" aria-hidden="true" />
	</SelectPrimitives.ScrollUpButton>
));
OnboardingSelectScrollUpButton.displayName =
	SelectPrimitives.ScrollUpButton.displayName;

const OnboardingSelectScrollDownButton = React.forwardRef<
	React.ElementRef<typeof SelectPrimitives.ScrollDownButton>,
	React.ComponentPropsWithoutRef<typeof SelectPrimitives.ScrollDownButton>
>(({ className, ...props }, forwardedRef) => (
	<SelectPrimitives.ScrollDownButton
		ref={forwardedRef}
		className={cx(
			"flex cursor-default items-center justify-center py-1",
			className,
		)}
		{...props}
	>
		<RiArrowDownSLine className="size-3 shrink-0" aria-hidden="true" />
	</SelectPrimitives.ScrollDownButton>
));
OnboardingSelectScrollDownButton.displayName =
	SelectPrimitives.ScrollDownButton.displayName;

const OnboardingSelectContent = React.forwardRef<
	React.ElementRef<typeof SelectPrimitives.Content>,
	React.ComponentPropsWithoutRef<typeof SelectPrimitives.Content>
>(
	(
		{
			className,
			position = "popper",
			children,
			sideOffset = 8,
			collisionPadding = 10,
			...props
		},
		forwardedRef,
	) => (
		<SelectPrimitives.Portal>
			<SelectPrimitives.Content
				ref={forwardedRef}
				className={cx(
					"relative z-50 overflow-hidden rounded-md border shadow-xl",
					"min-w-[calc(var(--radix-select-trigger-width)-2px)] max-w-[95vw]",
					"max-h-[--radix-select-content-available-height]",
					"bg-popover",
					"text-popover-foreground",
					"border-border",
					"will-change-[transform,opacity]",
					"data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
					"data-[side=bottom]:animate-in data-[side=bottom]:fade-in-0 data-[side=bottom]:slide-in-from-top-2",
					"data-[side=top]:animate-in data-[side=top]:fade-in-0 data-[side=top]:slide-in-from-bottom-2",
					className,
				)}
				sideOffset={sideOffset}
				position={position}
				collisionPadding={collisionPadding}
				{...props}
			>
				<OnboardingSelectScrollUpButton />
				<SelectPrimitives.Viewport
					className={cx(
						"p-1",
						position === "popper" &&
							"h-[var(--radix-select-trigger-height)] w-full min-w-[calc(var(--radix-select-trigger-width))]",
					)}
				>
					{children}
				</SelectPrimitives.Viewport>
				<OnboardingSelectScrollDownButton />
			</SelectPrimitives.Content>
		</SelectPrimitives.Portal>
	),
);

OnboardingSelectContent.displayName = "OnboardingSelectContent";

const OnboardingSelectItem = React.forwardRef<
	React.ElementRef<typeof SelectPrimitives.Item>,
	React.ComponentPropsWithoutRef<typeof SelectPrimitives.Item>
>(({ className, children, ...props }, forwardedRef) => {
	return (
		<SelectPrimitives.Item
			ref={forwardedRef}
			className={cx(
				"grid cursor-pointer grid-cols-[1fr_20px] gap-x-2 rounded px-3 py-2 outline-none transition-colors data-[state=checked]:font-semibold sm:text-sm",
				"text-foreground",
				"data-[disabled]:pointer-events-none data-[disabled]:text-muted-foreground data-[disabled]:hover:bg-transparent",
				"focus-visible:bg-muted",
				"hover:bg-muted",
				className,
			)}
			{...props}
		>
			<SelectPrimitives.ItemText className="flex-1 truncate">
				{children}
			</SelectPrimitives.ItemText>
			<SelectPrimitives.ItemIndicator>
				<RiCheckLine
					className="size-5 shrink-0 text-foreground"
					aria-hidden="true"
				/>
			</SelectPrimitives.ItemIndicator>
		</SelectPrimitives.Item>
	);
});

OnboardingSelectItem.displayName = "OnboardingSelectItem";

export {
	OnboardingSelect,
	OnboardingSelectContent,
	OnboardingSelectGroup,
	OnboardingSelectItem,
	OnboardingSelectTrigger,
	OnboardingSelectValue,
};