"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.UICreateSelect = void 0;
const react_1 = __importDefault(require("react"));
const react_select_1 = require("react-select");
const creatable_1 = __importDefault(require("react-select/creatable"));
const UIIcon_1 = require("../UIIcon");
const UILoader_1 = require("../UILoader");
const UIContextualMenu_1 = require("../UIContextualMenu");
require("./UICreateSelect.scss");
const UIInput_1 = require("../UIInput");
/**
 * Return a custom dropdown indicator component to be used in the select component.
 *
 * @param {DropdownIndicatorProps<UICreateSelectOptionEntry>} props
 * @returns {JSX.Element}
 */
const DropdownIndicator = (props) => {
    return (react_1.default.createElement(react_select_1.components.DropdownIndicator, { ...props },
        react_1.default.createElement(UIIcon_1.UIIcon, { className: "ui-create-select-indicator-dropdown", iconName: "ArrowDown" })));
};
/**
 * Return a custom clear indicator component to be used in the select component.
 *
 * @param {ClearIndicatorProps<UICreateSelectOptionEntry, true>} props
 * @returns {JSX.Element}
 */
const ClearIndicator = (props) => {
    return (react_1.default.createElement(react_select_1.components.ClearIndicator, { ...props },
        react_1.default.createElement(UIIcon_1.UIIcon, { className: "ui-create-select-indicator-clear", iconName: "Clear" })));
};
/**
 * Return a custom loading indicator component to be used in the select component.
 *
 * @param {LoadingIndicatorProps<UICreateSelectOptionEntry, true, UICreateSelectGroupEntry>} _props
 * @returns {JSX.Element}
 */
const LoadingIndicator = (_props) => {
    return (react_1.default.createElement("div", { className: "ui-create-select-indicator-loading" },
        react_1.default.createElement(UILoader_1.UILoader, { className: "uiLoaderXSmall", labelPosition: "right" })));
};
/**
 * Return a custom option component to be used in the select component.
 *
 * @param {OptionProps<UICreateSelectOptionEntry, true, UICreateSelectGroupEntry>} props
 * @returns {JSX.Element}
 */
const Option = (props) => {
    return (react_1.default.createElement(react_1.default.Fragment, null,
        !props?.data?.__isNew__ && (react_1.default.createElement(react_select_1.components.Option, { ...props },
            react_1.default.createElement(UIContextualMenu_1.UIHighlightMenuOption, { text: props?.data?.label, query: props?.selectProps?.inputValue }))),
        props?.data?.__isNew__ && react_1.default.createElement(react_select_1.components.Option, { ...props })));
};
const getBackgroundColor = (state) => {
    let backgroundColor = 'transparent';
    if (state.isSelected) {
        backgroundColor =
            'var(--vscode-editorSuggestWidget-selectedBackground, var(--vscode-quickInputList-focusBackground))';
    }
    if (state.isFocused && !state.isSelected) {
        backgroundColor = 'var(--vscode-list-hoverBackground)';
    }
    return backgroundColor;
};
/**
 * Return a UICreateSelect component.
 *
 * @param {CreatableProps} props to be passed to the component.
 * @returns {JSX.Element}
 */
const UICreateSelect = (props) => {
    const formatCreateLabel = (inputValue) => `${props.createText}: ${inputValue}`;
    return (react_1.default.createElement(creatable_1.default, { ...props, ref: props.creatableRef, className: "ui-create-select", classNamePrefix: "ui-create-select", openMenuOnFocus: false, createOptionPosition: "first", allowCreateWhileLoading: true, formatOptionLabel: (option) => option.label, formatCreateLabel: formatCreateLabel, components: { ClearIndicator, DropdownIndicator, LoadingIndicator, Option }, unstyled: true, styles: {
            control: (baseStyles, state) => ({
                ...baseStyles,
                background: 'var(--vscode-input-background)',
                height: '26px',
                maxHeight: '26px',
                minHeight: '26px',
                padding: '0px 0px 0px 8px;',
                boxShadow: 'none',
                boxSizing: 'border-box',
                borderWidth: '1px',
                borderStyle: 'solid',
                borderColor: state.isFocused ? 'var(--vscode-focusBorder)' : 'var(--vscode-editorWidget-border)',
                color: 'var(--vscode-input-foreground)',
                borderRadius: UIInput_1.COMMON_INPUT_STYLES.borderRadius,
                '&:hover': {
                    borderColor: 'var(--vscode-focusBorder)'
                }
            }),
            input: (baseStyles, _state) => ({
                ...baseStyles,
                color: 'var(--vscode-input-foreground)',
                background: 'transparent',
                fontFamily: 'var(--vscode-font-family)',
                fontSize: '13px',
                fontWeight: 'normal',
                minHeight: 'unset',
                padding: '1px 0px 1px 1px',
                outline: 0
            }),
            menu: (baseStyles, _state) => ({
                ...baseStyles,
                background: 'var(--vscode-menu-background, var(--vscode-input-background))',
                border: '1px solid var(--vscode-focusBorder)',
                boxSizing: 'border-box',
                margin: '0px',
                borderRadius: 0
            }),
            option: (baseStyles, state) => ({
                ...baseStyles,
                fontFamily: 'var(--vscode-font-family)',
                fontWeight: 'var(--vscode-font-weight)',
                minHeight: '22px',
                height: '22px',
                lineHeight: '22px',
                color: state.isSelected
                    ? 'var(--vscode-editorSuggestWidget-selectedForeground, var(--vscode-quickInputList-focusForeground, var(--vscode-editorSuggestWidget-foreground)))'
                    : 'var(--vscode-editorSuggestWidget-foreground)',
                backgroundColor: getBackgroundColor(state),
                letterSpacing: 'normal',
                border: '0',
                padding: '0px 8px',
                fontSize: '13px',
                '&:hover': {
                    backgroundColor: !state.isSelected
                        ? 'var(--vscode-list-hoverBackground)'
                        : getBackgroundColor(state),
                    color: state.isSelected
                        ? 'var(--vscode-editorSuggestWidget-selectedForeground, var(--vscode-quickInputList-focusForeground, var(--vscode-editorSuggestWidget-foreground)))'
                        : 'var(--vscode-editorSuggestWidget-foreground)',
                    cursor: 'pointer'
                }
            }),
            placeholder: (baseStyles, _state) => ({
                ...baseStyles,
                fontSize: '13px',
                fontWeight: 'normal',
                fontFamily: 'var(--vscode-font-family)',
                color: 'var(--vscode-input-placeholderForeground)'
            }),
            singleValue: (baseStyles, _state) => ({
                ...baseStyles,
                color: 'var(--vscode-input-foreground)',
                background: 'transparent',
                fontFamily: 'var(--vscode-font-family)',
                fontSize: '13px',
                fontWeight: 'normal',
                minHeight: 'unset',
                padding: '1px 0px 1px 1px',
                outline: 0
            }),
            valueContainer: (baseStyles, _state) => ({ ...baseStyles, padding: '0px' }),
            indicatorsContainer: (baseStyles, _state) => ({
                ...baseStyles,
                padding: '0px 5px 0px 0px',
                cursor: 'pointer'
            }),
            indicatorSeparator: (baseStyles, _state) => ({ ...baseStyles, display: 'none' }),
            dropdownIndicator: (baseStyles, _state) => ({ ...baseStyles, padding: '0px' }),
            clearIndicator: (baseStyles, _state) => ({
                ...baseStyles,
                padding: '0px',
                cursor: 'pointer'
            })
        } }));
};
exports.UICreateSelect = UICreateSelect;
//# sourceMappingURL=UICreateSelect.js.map