import React from 'react';
import { useTrail, animated } from 'react-spring';
import MonitorSelector from '../MonitorSelector/MonitorSelector';
import hoverSound from '../assets/interface-click.wav';
import clickSound from '../assets/game-click.wav';
import {playHoverSound} from "../Helpers/playHoverSound"
import {playClickSound} from "../Helpers/playClickSound"
const AsideRender = ({ links, handleLinkClick, openDropdown, setMode , leumasId, setLeumasId }) => {
    // Define the trail animation
    const hoverAudio = new Audio(hoverSound);
    const clickAudio = new Audio(clickSound);



    
    const trail = useTrail(links.length, {
        from: { transform: 'translate3d(-100%,0,0)', opacity: 0 },
        to: { transform: 'translate3d(0%,0,0)', opacity: 1 },
    });

    return (
        <>
{
    trail.map((props, index) => (
        <animated.li style={props} key={links[index].id} className="mb-2 p-2 rounded">
            <div className="flex justify-between border-2 rounded-lg hover:scale-110 hover:shadow-xl">
                <button 
                    onMouseEnter={()=>playHoverSound(hoverAudio)}
                    onClick={() => {
                        playClickSound(clickAudio);
                        handleLinkClick(links[index]);
                    }}
                    className="focus:outline-none flex-grow flex items-center  hover:border-electric-blue hover:bg-blue-500 hoverEffect  p-2 rounded-lg shadow-xl"
                >
                    <span className="flex items-center space-x-2">
                        {links[index].icon}
                        <span >{links[index].name}</span>
                    </span>
                </button>

                {/* MonitorSelector for main links */}
                <MonitorSelector 
                    componentType={links[index].component} 
                    componentProps={{ ...props }}
                />

                {/* Show dropdown icon only if there are sublinks */}
 
            </div>
            
            {openDropdown === links[index].id && (
                <div className="mt-2 bg-blue-500 rounded p-2">
                    {links[index].sublinks && 
                        <ul className="mt-2">
                            {links[index].sublinks.map(sublink => (
                                <li key={sublink.id} className="mb-1 p-2 hover:bg-blue-400 hover:border-glow">
                                    <button 
                                        className="focus:outline-none w-full flex items-center justify-between hover:border-glow"
                                        onClick={() => setMode(sublink.component)}
                                    >
                                        {sublink.name}
                                        <MonitorSelector 
                                            componentType={() => sublink.component} 
                                            componentProps={{ ...props }}
                                        />
                                    </button>
                                </li>
                            ))}
                        </ul>
                    }
                </div>
            )}
        </animated.li>
    ))
}

        </>
    );
};


export default AsideRender;