import React, { ReactNode, useState, useRef } from 'react';
import { useClickOutside } from '@/app/hooks/useClickOutside';

interface DropDownListProps {
	children: ReactNode;
	value: string | number;
	callBack: (value: string) => void;
}

interface ChildProps {
	value?: string;
	onClick?: () => void;
	className?: string;
	children?: React.ReactNode;
}

export default function DropDownList({ children, value, callBack }: DropDownListProps) {
	const [isOpen, setIsOpen] = useState(false)
	const dropdownRef = useRef<HTMLDivElement>(null)
	useClickOutside(dropdownRef, () => {
		setIsOpen(false);
	});

	const enhancedChildren = React.Children.map(children, (child, index) => {
		if (React.isValidElement<ChildProps>(child)) {
			const childValue = child.props.value || undefined;

			return React.cloneElement<ChildProps>(child, {
				onClick: () => {
					callBack(childValue || "");
					setIsOpen(false);
				},
				className: `flex items-center w-full px-4 py-2 text-sm text-left hover:bg-blue-100 cursor-pointer select-none`,
				key: index
			});
		}
		return child;
	});

	return (
		<div className="relative w-full" ref={dropdownRef}>
			<button
				onClick={() => {
					setIsOpen(!isOpen)
				}}
				className="flex items-center justify-between w-full px-4 py-2 text-sm font-medium bg-white border-2 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#6365f186]"
			>
				<span className="flex items-center">
					<span className="mr-2">
						{value}
					</span>
				</span>
				<svg
					className={`w-5 h-5 ml-2 transition-transform ${isOpen ? 'rotate-180' : ''}`}
					xmlns="http://www.w3.org/2000/svg"
					viewBox="0 0 20 20"
					fill="currentColor"
				>
					<path
						fillRule="evenodd"
						d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
						clipRule="evenodd"
					/>
				</svg>
			</button>
			{isOpen && (
				<div className="absolute right-0 z-10 w-full mt-2 origin-top-right bg-white rounded-md shadow-lg border-2 focus:outline-none">
					<ul
						className="py-1"
						role="listbox"
						aria-labelledby="language-selector"
					>
						{enhancedChildren}
					</ul>
				</div>
			)}
		</div>
	)
}