require("./index.css");
var $8zHUo$tslib = require("tslib");
var $8zHUo$react = require("react");


function $parcel$defineInteropFlag(a) {
  Object.defineProperty(a, '__esModule', {value: true, configurable: true});
}

function $parcel$export(e, n, v, s) {
  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
}

function $parcel$interopDefault(a) {
  return a && a.__esModule ? a.default : a;
}

$parcel$defineInteropFlag(module.exports);

$parcel$export(module.exports, "default", () => $fd046e7a82b9f872$export$2e2bcd8739ae039);




var $8938343de1ba276a$var$crossChar = String.fromCharCode(215);
function $8938343de1ba276a$var$Close(_a) {
    var value = _a.value, onClear = _a.onClear;
    return /*#__PURE__*/ (0, ($parcel$interopDefault($8zHUo$react))).createElement("button", {
        onClick: function() {
            return onClear(value);
        },
        className: "react-select-tag-close-btn",
        type: "button",
        "data-test": "react-select-tag-close-button",
        "aria-label": "close"
    }, $8938343de1ba276a$var$crossChar);
}
var $8938343de1ba276a$export$2e2bcd8739ae039 = $8938343de1ba276a$var$Close;


function $4b7acff32b47fda7$export$2e2bcd8739ae039(_a) {
    var label = _a.label, value = _a.value, tagColor = _a.tagColor, textColor = _a.textColor, readOnly = _a.readOnly, clearTagHandler = _a.clearTagHandler, style = _a.style;
    return /*#__PURE__*/ (0, ($parcel$interopDefault($8zHUo$react))).createElement("div", {
        className: "react-select-tag ".concat(style),
        "data-test": "react-select-tag",
        key: value,
        style: {
            backgroundColor: tagColor,
            color: textColor
        }
    }, /*#__PURE__*/ (0, ($parcel$interopDefault($8zHUo$react))).createElement("span", {
        className: "react-select-tag-label"
    }, label), !readOnly && /*#__PURE__*/ (0, ($parcel$interopDefault($8zHUo$react))).createElement((0, $8938343de1ba276a$export$2e2bcd8739ae039), {
        value: value,
        onClear: clearTagHandler
    }));
}


var $9898cd5c0ab69454$export$8c903c4191c6b9ec = function(_a) {
    var tags = _a.tags, onChange = _a.onChange, options = _a.options, _b = _a.creatable, creatable = _b === void 0 ? true : _b, style = _a.style, _c = _a.renderInput, renderInput = _c === void 0 ? true : _c, _d = _a.clearOnBackSpace, clearOnBackSpace = _d === void 0 ? true : _d;
    var _e = (0, $8zHUo$react.useState)(""), inputValue = _e[0], setInputValue = _e[1];
    var inputRef = (0, $8zHUo$react.useRef)(null);
    var _f = (0, $8zHUo$react.useState)(false), showOptions = _f[0], setShowOptions = _f[1];
    var selectRef = (0, $8zHUo$react.useRef)(null);
    var optionContainerRef = (0, $8zHUo$react.useRef)(null);
    var uniqueOptions = options ? options.filter(function(option, index, self) {
        return self.findIndex(function(item) {
            return item.label === option.label;
        }) === index;
    }) : [];
    // function for handling any outside click
    (0, $8zHUo$react.useEffect)(function() {
        var handleOutsideClick = function(event) {
            if (selectRef.current && !selectRef.current.contains(event.target)) setShowOptions(false);
        };
        document.addEventListener("mousedown", handleOutsideClick);
        return function() {
            document.removeEventListener("mousedown", handleOutsideClick);
        };
    }, []);
    // function for handling inside click on the component
    var handleClick = function() {
        toggleDropdown();
        if (inputRef.current) {
            var selection = window.getSelection();
            if (selection && selection.toString().length === 0) {
                inputRef.current.focus();
                setShowOptions(true);
            }
        }
    };
    // function for handling keyboard interaction (enter, backspace)
    var handleEnter = function(event) {
        var findIndex = tags.findIndex(function(ele) {
            return ele.value === inputValue;
        });
        if (event.key === "Enter" && inputValue && findIndex === -1 && creatable) {
            var tag = {
                value: inputValue,
                label: inputValue
            };
            var newTags = (0, $8zHUo$tslib.__spreadArray)((0, $8zHUo$tslib.__spreadArray)([], tags, true), [
                tag
            ], false);
            onChange(newTags, tag);
            setInputValue("");
        }
        if (clearOnBackSpace && event.key === "Backspace" && inputValue === "") {
            event.preventDefault();
            var indexToRemove = -1;
            for(var i = tags.length - 1; i >= 0; i--)if (!tags[i].readOnly || tags[i].readOnly === false) {
                indexToRemove = i;
                break;
            }
            if (indexToRemove !== -1) {
                var tags_ = (0, $8zHUo$tslib.__spreadArray)([], tags, true);
                tags_.splice(indexToRemove, 1);
                onChange(tags_);
            }
        }
    };
    var handleChange = function(event) {
        var value = event.target.value;
        setInputValue(value);
    };
    var clearTagHandler = function(value) {
        var newTags = tags.filter(function(ele) {
            return ele.value !== value;
        });
        onChange(newTags);
    };
    var toggleDropdown = function() {
        setShowOptions(true);
    };
    // const handleSelectOption = ({ label, value }: TagOptions) => {
    //   const findIndex = tags.findIndex((ele) => ele.value === value);
    //   if (findIndex !== -1) return;
    //   const tag = { value, label };
    //   const newTags = [...tags, tag];
    //   onChange(newTags, tag);
    //   setInputValue("");
    // };
    var handleSelectOption = function(_a) {
        var label = _a.label, value = _a.value;
        var isSelected = tags.some(function(tag) {
            return tag.value === value;
        });
        var newTags;
        var tag = {
            value: value,
            label: label
        };
        if (isSelected) // If selected, remove it from tags
        newTags = tags.filter(function(tag) {
            return tag.value !== value;
        });
        else // If not selected, add it to tags
        newTags = (0, $8zHUo$tslib.__spreadArray)((0, $8zHUo$tslib.__spreadArray)([], tags, true), [
            tag
        ], false);
        onChange(newTags, tag);
        setInputValue("");
    };
    (0, $8zHUo$react.useEffect)(function() {
        if (inputRef.current) inputRef.current.scrollIntoView({
            behavior: "smooth",
            block: "nearest"
        });
    }, [
        tags
    ]);
    var _g = (0, $8zHUo$react.useState)(-1), highlightedIndex = _g[0], setHighlightedIndex = _g[1];
    // function for handling keyboard interaction with options
    var handleKeyDown = function(e) {
        if (!filteredOptions || filteredOptions.length === 0) return;
        if (e.key === "ArrowDown") {
            e.preventDefault();
            if (highlightedIndex < filteredOptions.length - 1) {
                setHighlightedIndex(highlightedIndex + 1);
                scrollOptionIntoView(highlightedIndex + 1);
            }
        } else if (e.key === "ArrowUp") {
            e.preventDefault();
            if (highlightedIndex > 0) {
                setHighlightedIndex(highlightedIndex - 1);
                scrollOptionIntoView(highlightedIndex - 1);
            }
        } else if (e.key === "Enter") {
            if (showOptions && highlightedIndex !== -1 && highlightedIndex < filteredOptions.length) {
                handleSelectOption((0, $8zHUo$tslib.__assign)({}, filteredOptions[highlightedIndex]));
                setHighlightedIndex(-1);
            }
        }
    };
    var scrollOptionIntoView = function(index) {
        if (optionContainerRef.current) {
            var optionElement = optionContainerRef.current.querySelector(".react-select-tags-select-container-option:nth-child(".concat(index + 1, ")"));
            if (optionElement) optionElement.scrollIntoView({
                behavior: "smooth",
                block: "nearest"
            });
        }
    };
    var filteredOptions = options ? uniqueOptions.filter(function(_a) {
        var label = _a.label;
        if (typeof label === "string") return label.toLowerCase().includes(inputValue.toLowerCase());
        else return label.toString().includes(inputValue);
    }) : [];
    return /*#__PURE__*/ (0, ($parcel$interopDefault($8zHUo$react))).createElement("div", {
        className: "react-select-tags-main",
        ref: selectRef,
        onKeyDown: handleKeyDown,
        "data-test": "main-container"
    }, /*#__PURE__*/ (0, ($parcel$interopDefault($8zHUo$react))).createElement("div", {
        className: "".concat(style === null || style === void 0 ? void 0 : style.mainContainer, " react-select-tags"),
        onClick: handleClick,
        "data-test": "react-select-tags"
    }, tags.map(function(_a, index) {
        var label = _a.label, value = _a.value, tagColor = _a.tagColor, textColor = _a.textColor, readOnly = _a.readOnly;
        return /*#__PURE__*/ (0, ($parcel$interopDefault($8zHUo$react))).createElement((0, $4b7acff32b47fda7$export$2e2bcd8739ae039), {
            key: index,
            style: style === null || style === void 0 ? void 0 : style.tag,
            label: label,
            value: value,
            tagColor: tagColor,
            textColor: textColor,
            readOnly: readOnly,
            clearTagHandler: clearTagHandler
        });
    }), renderInput && /*#__PURE__*/ (0, ($parcel$interopDefault($8zHUo$react))).createElement("input", {
        value: inputValue,
        ref: inputRef,
        className: "".concat(style === null || style === void 0 ? void 0 : style.input, " react-select-tags-input"),
        "data-test": "react-select-tags-input",
        onChange: handleChange,
        onKeyDown: handleEnter
    })), showOptions && filteredOptions && (filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.length) > 0 && /*#__PURE__*/ (0, ($parcel$interopDefault($8zHUo$react))).createElement("div", {
        className: "".concat(style === null || style === void 0 ? void 0 : style.optionContainer, " react-select-tags-select-container"),
        onKeyDown: handleKeyDown,
        ref: optionContainerRef,
        "data-test": "react-select-tags-select-container"
    }, filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.map(function(_a, index) {
        var label = _a.label, value = _a.value;
        // Check if this option is already selected
        var isSelected = tags.some(function(tag) {
            return tag.value === value;
        });
        return /*#__PURE__*/ (0, ($parcel$interopDefault($8zHUo$react))).createElement("div", {
            key: index,
            className: "".concat(style === null || style === void 0 ? void 0 : style.option, " \n                  ").concat(highlightedIndex === index ? "highlighted-option ".concat(style === null || style === void 0 ? void 0 : style.selectedOption) : "", " \n                  ").concat(isSelected ? "selected-option" : "", " \n                  react-select-tags-select-container-option"),
            onClick: function() {
                return handleSelectOption({
                    label: label,
                    value: value
                });
            },
            onMouseOver: function() {
                return setHighlightedIndex(index);
            },
            "data-test": "react-select-tags-select-container-option"
        }, /*#__PURE__*/ (0, ($parcel$interopDefault($8zHUo$react))).createElement("span", null, label));
    })));
};



var $fd046e7a82b9f872$export$2e2bcd8739ae039 = (0, $9898cd5c0ab69454$export$8c903c4191c6b9ec);


//# sourceMappingURL=index.cjs.map