import React, { useState, useRef, useEffect } from "react";
import { useOutsideClickDetector } from "../../hooks/useOutsideClickDetector";
import "./css/dropdown.css";
import { FinsembleIcon } from "./FinsembleIcon";
export const Dropdown = ({ options, selected, onChange, className = "" }) => {
    var _a, _b;
    const wrapperRef = useRef(null);
    const optionsRef = useRef(null);
    const [expanded, setExpanded] = useState(false);
    const [keyFlag, setKeyFlag] = useState(false);
    const selectedOptionIndex = options.findIndex((opt) => opt.value === selected);
    const selectedOption = options[selectedOptionIndex];
    const displayText = (_b = (_a = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) !== null && _a !== void 0 ? _a : selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) !== null && _b !== void 0 ? _b : "";
    const targetBoxKeyPress = (e) => {
        switch (e.key) {
            case "Enter": {
                setKeyFlag(true);
                setExpanded(true);
                break;
            }
            case "ArrowDown": {
                if (e.altKey) {
                    setExpanded(true);
                }
                else if (selectedOptionIndex < options.length - 1) {
                    onChange(options[selectedOptionIndex + 1].value);
                }
                break;
            }
            case "ArrowUp": {
                if (selectedOptionIndex > 0) {
                    onChange(options[selectedOptionIndex - 1].value);
                }
                break;
            }
            default: {
            }
        }
    };
    const optionsKeyPress = (e, option) => {
        var _a;
        const actions = {
            Enter: () => {
                onChange(option.value);
                setExpanded(false);
            },
            ArrowDown: () => {
                var _a, _b, _c;
                (_c = (_b = (_a = optionsRef === null || optionsRef === void 0 ? void 0 : optionsRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(`:focus`)) === null || _b === void 0 ? void 0 : _b.nextSibling) === null || _c === void 0 ? void 0 : _c.focus();
            },
            ArrowUp: () => {
                var _a, _b, _c;
                (_c = (_b = (_a = optionsRef === null || optionsRef === void 0 ? void 0 : optionsRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(`:focus`)) === null || _b === void 0 ? void 0 : _b.previousSibling) === null || _c === void 0 ? void 0 : _c.focus();
            },
            Escape: () => setExpanded(false),
        };
        (_a = actions[e.key]) === null || _a === void 0 ? void 0 : _a.call(actions);
    };
    useOutsideClickDetector(wrapperRef, () => {
        setExpanded(false);
    });
    useEffect(() => {
        var _a, _b;
        if (keyFlag) {
            (_b = (_a = optionsRef === null || optionsRef === void 0 ? void 0 : optionsRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(`div.option[data-value='${selected}']`)) === null || _b === void 0 ? void 0 : _b.focus();
        }
    }, [expanded]);
    return (React.createElement("div", { className: `dropdown-wrapper ${className}`, ref: wrapperRef },
        React.createElement("div", { className: "targetBox", tabIndex: 0, role: "combobox", "aria-expanded": expanded, onKeyDown: targetBoxKeyPress, onClick: () => {
                setKeyFlag(false);
                setExpanded(!expanded);
            } },
            React.createElement("span", { className: "text" }, displayText),
            React.createElement(FinsembleIcon, { icon: "caret" })),
        React.createElement("div", { className: "options", ref: optionsRef }, options.map((opt) => {
            var _a;
            return (React.createElement("div", { className: "option", tabIndex: 0, "data-value": opt.value, key: opt.value, onKeyDown: (e) => optionsKeyPress(e, opt), onClick: () => {
                    onChange(opt.value);
                    setExpanded(false);
                } }, (_a = opt.label) !== null && _a !== void 0 ? _a : opt.value));
        }))));
};
//# sourceMappingURL=Dropdown.js.map