import * as SelectPrimitive from '@radix-ui/react-select';
import { Check, ChevronDown, ChevronUp } from 'lucide-react';
import * as React from 'react';

import { cn } from '@/admin/lib/utils';

const Select = SelectPrimitive.Root;

const SelectGroup = SelectPrimitive.Group;

const SelectValue = SelectPrimitive.Value;

const SelectTrigger = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
>( ( { className, children, ...props }, ref ) => (
	<SelectPrimitive.Trigger
		ref={ ref }
		className={ cn(
			'flex h-10 w-full items-center justify-between rounded-md border border-gray-300 bg-white px-3 py-2 text-sm data-placeholder:text-gray-500 focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
			className,
		) }
		{ ...props }
	>
		{ children }
		<SelectPrimitive.Icon asChild>
			<ChevronDown className="h-4 w-4 opacity-50" />
		</SelectPrimitive.Icon>
	</SelectPrimitive.Trigger>
) );
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;

const SelectScrollUpButton = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
>( ( { className, ...props }, ref ) => (
	<SelectPrimitive.ScrollUpButton
		ref={ ref }
		className={ cn(
			'flex cursor-default items-center justify-center py-1',
			className,
		) }
		{ ...props }
	>
		<ChevronUp className="h-4 w-4" />
	</SelectPrimitive.ScrollUpButton>
) );
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;

const SelectScrollDownButton = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
>( ( { className, ...props }, ref ) => (
	<SelectPrimitive.ScrollDownButton
		ref={ ref }
		className={ cn(
			'flex cursor-default items-center justify-center py-1',
			className,
		) }
		{ ...props }
	>
		<ChevronDown className="h-4 w-4" />
	</SelectPrimitive.ScrollDownButton>
) );
SelectScrollDownButton.displayName =
  SelectPrimitive.ScrollDownButton.displayName;

const SelectContent = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
>( ( { className, children, position = 'popper', ...props }, ref ) => (
	<SelectPrimitive.Portal>
		<SelectPrimitive.Content
			ref={ ref }
			className={ cn(
				'relative z-50 max-h-(--radix-select-content-available-height) min-w-32 overflow-y-auto overflow-x-hidden rounded-md border border-gray-200 bg-white text-gray-900 shadow-md',
				className,
			) }
			position={ position }
			{ ...props }
		>
			<SelectScrollUpButton />
			<SelectPrimitive.Viewport
				className={ cn(
					'p-1',
					position === 'popper' &&
            'h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)',
				) }
			>
				{ children }
			</SelectPrimitive.Viewport>
			<SelectScrollDownButton />
		</SelectPrimitive.Content>
	</SelectPrimitive.Portal>
) );
SelectContent.displayName = SelectPrimitive.Content.displayName;

const SelectLabel = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Label>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
>( ( { className, ...props }, ref ) => (
	<SelectPrimitive.Label
		ref={ ref }
		className={ cn( 'py-1.5 pl-8 pr-2 text-sm font-semibold', className ) }
		{ ...props }
	/>
) );
SelectLabel.displayName = SelectPrimitive.Label.displayName;

const SelectItem = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
>( ( { className, children, ...props }, ref ) => (
	<SelectPrimitive.Item
		ref={ ref }
		className={ cn(
			'relative flex w-full cursor-default select-none items-center rounded-xs py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-blue-50 focus:text-blue-900 data-disabled:pointer-events-none data-disabled:opacity-50',
			className,
		) }
		{ ...props }
	>
		<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
			<SelectPrimitive.ItemIndicator>
				<Check className="h-4 w-4" />
			</SelectPrimitive.ItemIndicator>
		</span>

		<SelectPrimitive.ItemText>{ children }</SelectPrimitive.ItemText>
	</SelectPrimitive.Item>
) );
SelectItem.displayName = SelectPrimitive.Item.displayName;

const SelectSeparator = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
>( ( { className, ...props }, ref ) => (
	<SelectPrimitive.Separator
		ref={ ref }
		className={ cn( '-mx-1 my-1 h-px bg-gray-200', className ) }
		{ ...props }
	/>
) );
SelectSeparator.displayName = SelectPrimitive.Separator.displayName;

export {
	Select,
	SelectGroup,
	SelectValue,
	SelectTrigger,
	SelectContent,
	SelectLabel,
	SelectItem,
	SelectSeparator,
	SelectScrollUpButton,
	SelectScrollDownButton,
};
