import React, { ReactNode, useState, useRef } from 'react';
import { useClickOutside } from '@/app/hooks/useClickOutside';
import { SelectedFile } from './UploadSectionFile';
import { useTranslations } from 'next-intl';

interface DropDownItem {
	file: SelectedFile;
	convertTo: string;
}

interface DropDownListProps {
	children: ReactNode;
	value: string | null | undefined;
	callBack: (value: DropDownItem) => void;
	translatedValue?: string | null | undefined;
	selectedFiles: SelectedFile[];
}

interface LiElementProps extends React.LiHTMLAttributes<HTMLLIElement> {
	'data-file'?: string;
	'data-convert-to'?: string;
}

export default function DropDownListForImageConvert({
	children,
	value,
	callBack,
	translatedValue,
	selectedFiles
}: DropDownListProps) {
	const [isOpen, setIsOpen] = useState(false);
	const dropdownRef = useRef<HTMLDivElement>(null);
	const t = useTranslations('Global')

	useClickOutside(dropdownRef,
		() => {
			setIsOpen(false);
		},
		isOpen
	);

	const getDisplayValue = (): string => {
		if (translatedValue) return translatedValue;
		return value ? value : t('do-not-convert');
	};

	const findFileByName = (fileName: string): SelectedFile | undefined => {
		return selectedFiles.find(file => file.name === fileName);
	};

	const enhancedChildren = React.Children.map(children, (child, index) => {
		if (React.isValidElement<LiElementProps>(child)) {
			const fileName = child.props['data-file'];
			const convertTo = child.props['data-convert-to'];

			const isCurrent = value === convertTo;

			return React.cloneElement(child, {
				onClick: () => {
					if (fileName && convertTo) {
						const file = findFileByName(fileName);
						if (file) {
							callBack({ file, convertTo });
						} else {
							console.error(`Файл с именем ${fileName} не найден`);
						}
						setIsOpen(false);
					}
				},
				className: `dropdown-item ${isCurrent ? "current" : ""}`,
				key: index,
			});
		}
		return child;
	});

	return (
		<div className="dropdown-wrapper" ref={dropdownRef}>
			<button
				onClick={() => {
					setIsOpen(!isOpen);
				}}
				className="dropdown-button"
			>
				<span className="flex items-center">
					<span className="mr-2">
						{getDisplayValue()}
					</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="dropdown-list">
					<ul
						className=""
						role="listbox"
					>
						{enhancedChildren}
					</ul>
				</div>
			)}
		</div>
	);
}