import React, { useState, useRef, useEffect } from 'react';
import { createPortal } from 'react-dom';
import { More } from 'iconsax-react';

export interface RowActionItem {
    label: string;
    icon?: React.ReactNode;
    onClick: () => void;
    className?: string;
}

interface RowActionsDropdownProps {
    actions: RowActionItem[];
    className?: string;
}

const RowActionsDropdown: React.FC<RowActionsDropdownProps> = ({ actions, className = '' }) => {
    const [isOpen, setIsOpen] = useState(false);
    const [position, setPosition] = useState({ top: 0, left: 0 });
    const dropdownRef = useRef<HTMLDivElement>(null);
    const buttonRef = useRef<HTMLButtonElement>(null);

    useEffect(() => {
        const handleClickOutside = (event: MouseEvent) => {
            if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
                setIsOpen(false);
            }
        };

        document.addEventListener('mousedown', handleClickOutside);
        return () => {
            document.removeEventListener('mousedown', handleClickOutside);
        };
    }, []);

    const handleToggle = (e: React.MouseEvent) => {
        e.stopPropagation();

        if (!isOpen && buttonRef.current) {
            const rect = buttonRef.current.getBoundingClientRect();
            const isMobile = window.innerWidth < 768;
            const dropdownWidth = isMobile ? 140 : 150;
            const dropdownHeight = actions.length * (isMobile ? 36 : 40); // تخمین ارتفاع منو

            let left = rect.left + window.scrollX - dropdownWidth + rect.width;
            let top = rect.bottom + window.scrollY;

            // بررسی اینکه منو از سمت راست خارج نشود
            if (left + dropdownWidth > window.innerWidth) {
                left = rect.left + window.scrollX - dropdownWidth;
            }

            // بررسی اینکه منو از سمت چپ خارج نشود
            if (left < 0) {
                left = isMobile ? 20 : 40;
            }

            // بررسی اینکه منو از پایین خارج نشود
            if (top + dropdownHeight > window.innerHeight + window.scrollY) {
                top = rect.top + window.scrollY - dropdownHeight;
            }

            setPosition({ top, left });
        }

        setIsOpen(!isOpen);
    };

    const handleActionClick = (action: RowActionItem) => {
        action.onClick();
        setIsOpen(false);
    };

    const renderDropdown = () => {
        if (!isOpen) return null;

        return createPortal(
            <div
                ref={dropdownRef}
                className="fixed py-1 md:py-2 bg-white rounded-xl md:rounded-2xl shadow-lg z-[9999] min-w-[140px] md:min-w-[150px]"
                style={{
                    top: `${position.top}px`,
                    left: `${position.left}px`,
                }}
            >
                {actions.map((action, index) => (
                    <button
                        key={index}
                        onClick={() => handleActionClick(action)}
                        className={`w-full text-right px-2 md:px-3 py-1 md:py-1.5 text-xs md:text-[13px] flex items-center gap-2 hover:bg-gray-50 ${index === 0 ? 'rounded-t-lg' : ''
                            }  ${action.className || ''}`}
                    >
                        {action.icon && <span className="ml-2">{action.icon}</span>}
                        {action.label}
                    </button>
                ))}
            </div>,
            document.body
        );
    };

    return (
        <div className={className}>
            <button
                ref={buttonRef}
                onClick={handleToggle}
                className="p-1 hover:bg-gray-100 rounded-full transition-colors"
            >
                <More size={14} color="black" className="rotate-90" />
            </button>

            {renderDropdown()}
        </div>
    );
};

export default RowActionsDropdown;