"use client"

import type {
	IDropdownCheckboxItemProps,
	IDropdownContentProps,
	IDropdownItemProps,
	IDropdownLabelProps,
	IDropdownProps,
	IDropdownRadioGroupProps,
	IDropdownRadioItemProps,
	IDropdownSeparatorProps,
	IDropdownSubContentProps,
	IDropdownSubProps,
	IDropdownSubTriggerProps,
	IDropdownTriggerProps,
} from "./Dropdown.d"
import type { JSX } from "react"

import * as DropdownMenu from "@radix-ui/react-dropdown-menu"
import { forwardRef } from "react"

import cs from "classnames"

import styles from "./Dropdown.module.scss"

export const Dropdown = ({
	children,
	...props
}: IDropdownProps): JSX.Element => (
	<DropdownMenu.Root {...props}>{children}</DropdownMenu.Root>
)

export const DropdownTrigger = forwardRef<
	HTMLButtonElement,
	IDropdownTriggerProps
>(
	({ children, className, asChild = false, ...props }, ref): JSX.Element => (
		<DropdownMenu.Trigger
			ref={ref}
			className={cs(styles.trigger, className)}
			asChild={asChild}
			{...props}
		>
			{children}
		</DropdownMenu.Trigger>
	),
)
DropdownTrigger.displayName = "DropdownTrigger"

export const DropdownContent = forwardRef<
	HTMLDivElement,
	IDropdownContentProps
>(
	(
		{ children, className, sideOffset = 4, align = "end", ...props },
		ref,
	): JSX.Element => (
		<DropdownMenu.Portal>
			<DropdownMenu.Content
				ref={ref}
				className={cs(styles.content, className)}
				sideOffset={sideOffset}
				align={align}
				{...props}
			>
				{children}
			</DropdownMenu.Content>
		</DropdownMenu.Portal>
	),
)
DropdownContent.displayName = "DropdownContent"

export const DropdownItem = forwardRef<HTMLDivElement, IDropdownItemProps>(
	({ children, className, ...props }, ref): JSX.Element => (
		<DropdownMenu.Item
			ref={ref}
			className={cs(styles.item, className)}
			{...props}
		>
			{children}
		</DropdownMenu.Item>
	),
)
DropdownItem.displayName = "DropdownItem"

export const DropdownCheckboxItem = forwardRef<
	HTMLDivElement,
	IDropdownCheckboxItemProps
>(
	({ children, className, ...props }, ref): JSX.Element => (
		<DropdownMenu.CheckboxItem
			ref={ref}
			className={cs(styles.checkboxItem, className)}
			{...props}
		>
			<DropdownMenu.ItemIndicator className={styles.itemIndicator}>
				✓
			</DropdownMenu.ItemIndicator>
			{children}
		</DropdownMenu.CheckboxItem>
	),
)
DropdownCheckboxItem.displayName = "DropdownCheckboxItem"

export const DropdownRadioGroup = ({
	children,
	...props
}: IDropdownRadioGroupProps): JSX.Element => (
	<DropdownMenu.RadioGroup {...props}>{children}</DropdownMenu.RadioGroup>
)

export const DropdownRadioItem = forwardRef<
	HTMLDivElement,
	IDropdownRadioItemProps
>(
	({ children, className, ...props }, ref): JSX.Element => (
		<DropdownMenu.RadioItem
			ref={ref}
			className={cs(styles.radioItem, className)}
			{...props}
		>
			<DropdownMenu.ItemIndicator className={styles.itemIndicator}>
				●
			</DropdownMenu.ItemIndicator>
			{children}
		</DropdownMenu.RadioItem>
	),
)
DropdownRadioItem.displayName = "DropdownRadioItem"

export const DropdownLabel = forwardRef<HTMLDivElement, IDropdownLabelProps>(
	({ children, className, ...props }, ref): JSX.Element => (
		<DropdownMenu.Label
			ref={ref}
			className={cs(styles.label, className)}
			{...props}
		>
			{children}
		</DropdownMenu.Label>
	),
)
DropdownLabel.displayName = "DropdownLabel"

export const DropdownSeparator = forwardRef<
	HTMLDivElement,
	IDropdownSeparatorProps
>(
	({ className, ...props }, ref): JSX.Element => (
		<DropdownMenu.Separator
			ref={ref}
			className={cs(styles.separator, className)}
			{...props}
		/>
	),
)
DropdownSeparator.displayName = "DropdownSeparator"

export const DropdownSub = ({
	children,
	...props
}: IDropdownSubProps): JSX.Element => (
	<DropdownMenu.Sub {...props}>{children}</DropdownMenu.Sub>
)

export const DropdownSubTrigger = forwardRef<
	HTMLDivElement,
	IDropdownSubTriggerProps
>(
	({ children, className, ...props }, ref): JSX.Element => (
		<DropdownMenu.SubTrigger
			ref={ref}
			className={cs(styles.subTrigger, className)}
			{...props}
		>
			{children}
		</DropdownMenu.SubTrigger>
	),
)
DropdownSubTrigger.displayName = "DropdownSubTrigger"

export const DropdownSubContent = forwardRef<
	HTMLDivElement,
	IDropdownSubContentProps
>(
	({ children, className, sideOffset = 2, ...props }, ref): JSX.Element => (
		<DropdownMenu.Portal>
			<DropdownMenu.SubContent
				ref={ref}
				className={cs(styles.subContent, className)}
				sideOffset={sideOffset}
				{...props}
			>
				{children}
			</DropdownMenu.SubContent>
		</DropdownMenu.Portal>
	),
)
DropdownSubContent.displayName = "DropdownSubContent"
