"use client";

import { useState, useEffect, useRef, useId } from "react";

interface Props {
    menu_list: string[];
    placeholderText: string;
    label: string;
    defaultValue?: string;
    value?: string;
    onChange?: (value: string) => void
};


const DropDownMenu = ({menu_list, placeholderText, label, defaultValue, value, onChange}: Props) => {

    const [showMenu, setShowMenu] = useState<boolean>(false);
    const isControlled = value !== undefined;
    const [internalValue, setInternalValue] = useState<string>(defaultValue ?? "");
    const currentValue = value !== undefined ? value : internalValue;

    const listRef = useRef<HTMLUListElement|null>(null);
    const openerRef = useRef<HTMLElement|null>(null);
    const containerRef = useRef<HTMLDivElement|null>(null);

    const uid = useId();
    const labelId = `${uid}-label`;
    const triggerId = `${uid}-trigger`;
    const listId = `${uid}-listbox`;
    const optionId = (item: string) => `${uid}-option-${item.replace(/\s+/g, "-").toLowerCase()}`;

    const selectItem = (item: string) => {
        if(!isControlled) setInternalValue(item);
        onChange?.(item);
        handleHideMenu();
    }

    useEffect(() => {
        if(!showMenu) return;

        const handlePointerDown = (e: PointerEvent) => {
            if(containerRef.current?.contains(e.target as Node)) return;
            handleHideMenu();
        }

        document.addEventListener("pointerdown", handlePointerDown);
        return () => document.removeEventListener("pointerdown", handlePointerDown);

    }, [showMenu]);

    const handleMenuClick = (e: React.MouseEvent<HTMLButtonElement>) => {
        openerRef.current = e.currentTarget as HTMLElement;

        setShowMenu((prev) => !prev);
    }
    
    useEffect(() => {
        if(!showMenu) return;
        
        const list = listRef.current;
        if(!list) return;

        const selectedIndex = currentValue ? menu_list.indexOf(currentValue) : 0;
        const index  = selectedIndex >= 0 ? selectedIndex : 0;
        
        (list.children[index] as HTMLElement | undefined)?.focus();
        
    }, [showMenu, currentValue, menu_list]);

    const handleHideMenu = () => {
        openerRef.current?.focus();
        setShowMenu(false);
    }

    const handleListItemKeyDown = (e: React.KeyboardEvent<HTMLLIElement>, item: string) => {

        if(/^\p{L}$/u.test(e.key)) {
            const list = listRef.current;
            if(!list) {
                return;
            }

            const index = menu_list.findIndex((it) => 
                it.toLowerCase().startsWith(e.key.toLowerCase())
            );
            
            if(index >=0) (list.children[index] as HTMLElement | undefined)?.focus();

            return;
        }
        
        if(e.key === 'Home' || e.key === 'End') {
            e.preventDefault();

            const list = listRef.current;
            if(!list) {
                return;
            }

            const children = Array.from(list.children) as HTMLElement[];
            if(children.length > 0) {
                e.key === 'Home' ? children[0].focus() : children[children.length-1].focus() ;

            }
            return;
        }

        if(e.key === 'Enter' || e.key === ' ') {
            e.preventDefault();
            selectItem(item);
            return;
        }

        if(e.key === 'Escape') {
            handleHideMenu();
            return;
        }


        const list = listRef.current;
        if(!list) return;
        
        const children = Array.from(list.children) as HTMLElement[];
        const index = children.indexOf(e.currentTarget);
        if(index === -1) return;
        
        if(((!e.shiftKey && e.key === 'Tab') || e.key === 'ArrowDown') && (index === children.length-1)) {
            e.preventDefault();
            children[0].focus();
            return;
        }
        
        if(((e.shiftKey && e.key === 'Tab') || e.key === 'ArrowUp') && (index === 0)) {
            e.preventDefault();
            children[children.length-1].focus();
            return;
        }

        if(e.key === 'ArrowDown' && children[index+1]) {
            e.preventDefault();
            children[index+1].focus();
            return;
        }

        if(e.key === 'ArrowUp' && children[index-1]) {
            e.preventDefault();
            children[index-1].focus();
            return;
        }
    }

    const handleButtonKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {
        if(e.key === 'Escape') {
            handleHideMenu();
        }
    }
    

    return (

        <div 
            className="relative w-fit flex flex-col gap-1"
            ref={containerRef}
        >
            <span 
                id={labelId}
                className="sr-only"
            >
                {label}
            </span>

            <button 
                id={triggerId}
                type="button"
                aria-labelledby={labelId}
                aria-haspopup="listbox"
                aria-expanded={showMenu}
                aria-controls={listId}
                className="min-w-[150px] w-fit text-sm py-2 px-4 cursor-pointer border border-border rounded-md"
                onClick={(e) => handleMenuClick(e)}
                onKeyDown={(e) => handleButtonKeyDown(e)}
            >
                {currentValue || placeholderText}
            </button>
            <ul 
                id={listId}
                role="listbox"
                aria-labelledby={labelId}
                inert={!showMenu}
                aria-multiselectable={false}
                ref={listRef}
                className={`z-50 absolute mt-10 border border-border rounded-md p-2 flex flex-col gap-1 text-sm text-foreground bg-background transition-all duration-200 ${showMenu === true ? 'opacity-100 scale-100' : 'opacity-0 scale-95 pointer-events-none translate-y-1'}`}
            >
                {menu_list.map((item) => (
                    <li 
                        id={optionId(item)}
                        role="option"
                        aria-selected={item === currentValue}
                        tabIndex={0}
                        key={item}
                        onClick={() => selectItem(item)}
                        onKeyDown={(e) => handleListItemKeyDown(e, item)}
                        className={`cursor-pointer appearance-none px-4 py-2 rounded-sm ${item === currentValue ? 'bg-accent' : 'hover:bg-muted'}`}
                    >
                        {item}
                    </li>
                ))}
            </ul>
        </div>
    );
}

export default DropDownMenu;