import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import { useEffect, useRef, useState } from 'react';
import { GetSvgIcon } from '..';
import './style.scss';
const DropDownGeneric = ({ items, widthPx, value, }) => {
    const [extend, setExtend] = useState(false);
    const [selectedItem, setSelectedItem] = useState(items[0] || "");
    const elementRef = useRef(null);
    const handleArrow = () => {
        setExtend(prev => !prev);
    };
    const handleItem = (e) => {
        setSelectedItem(e);
        setExtend(false);
    };
    useEffect(() => {
        value(selectedItem);
    }, [selectedItem]);
    // Add an event listener to the document to detect clicks outside the element
    useEffect(() => {
        function handleClickOutside(event) {
            if (elementRef.current && !elementRef.current.contains(event.target)) {
                handleArrow();
            }
        }
        document.addEventListener('mousedown', handleClickOutside);
        return () => {
            document.removeEventListener('mousedown', handleClickOutside);
        };
    }, []);
    return (_jsxs("div", { className: 'main-gen', children: [_jsxs("div", { className: 'dd-bar-gen', style: { width: `${widthPx}px` }, children: [_jsxs("span", { className: 'dd-text', children: [" ", selectedItem, " "] }), _jsx("span", { className: 'dd-svg', onClick: handleArrow, children: _jsx(GetSvgIcon, { iconType: `${extend ? 'cheveronUp' : 'cheveronDown'}` }) })] }), extend &&
                _jsx("div", { className: 'dd-body-gen', style: { width: `${widthPx + 30}px` }, ref: elementRef, children: items.map((ele, idx) => {
                        return (_jsx("div", { className: `dd-items-gen ${idx == items.length - 1 ? 'border-none' : ''}`, onClick: () => handleItem(ele), children: ele }, ele + idx));
                    }) })] }));
};
export default DropDownGeneric;
