"use strict";
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
            t[p[i]] = s[p[i]];
    return t;
};
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
    result["default"] = mod;
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
const react_select_1 = __importDefault(require("react-select"));
const styles_1 = require("../../styles");
const utils_1 = require("../../styles/utils");
// import { MenuList } from './MenuList';
const Option_1 = require("./Option");
const DropdownIndicator_1 = require("./DropdownIndicator");
const getStyles = (theme, variant) => {
    const inputsStyles = utils_1.inputs({ theme });
    return {
        primary: {
            container: (styles) => (Object.assign({}, styles, { minHeight: inputsStyles.height, minWidth: '7rem' })),
            control: (styles, state) => {
                return Object.assign({}, styles, { borderRadius: theme.radii[1], boxShadow: 'none', borderColor: theme.colors.placeholder }, (state.isFocused && {
                    borderColor: theme.colors.brandMain,
                    '&:hover': {
                        borderColor: theme.colors.brandMain,
                    },
                }));
            },
            valueContainer: (styles) => (Object.assign({}, styles, { paddingLeft: '14px', fontSize: theme.fontSizes[1], minHeight: inputsStyles.height })),
            dropdownIndicator: (styles) => (Object.assign({}, styles, { paddingRight: '16px', color: theme.colors.placeholder })),
            menu: (styles) => (Object.assign({}, styles, { minWidth: '20rem' })),
        },
        ghost: {
            container: (styles) => (Object.assign({}, styles, { minWidth: '100%' })),
            control: (styles, state) => {
                return Object.assign({}, styles, { boxShadow: 'none', border: 'none' });
            },
            valueContainer: (styles) => (Object.assign({}, styles, { paddingRight: 0, paddingLeft: 0, fontSize: theme.fontSizes[1] })),
            dropdownIndicator: (styles) => (Object.assign({}, styles, { paddingRight: 0, color: theme.colors.placeholder, '&:hover': {
                    color: theme.colors.brandMain,
                } })),
            menu: (styles) => (Object.assign({}, styles, { minWidth: '20rem' })),
        },
    }[variant];
};
class SelectPrimitiveBase extends react_1.Component {
    constructor() {
        super(...arguments);
        this.handleChange = (value) => {
            const { onChange, onBlur } = this.props;
            if (!value) {
                onChange(value);
            }
            else {
                const result = Array.isArray(value)
                    ? value.map(option => option.value)
                    : value.value;
                onChange(result);
            }
            onBlur();
        };
    }
    render() {
        const _a = this.props, { theme, variant, name, onChange, value, options, components, styles, inputRef } = _a, otherProps = __rest(_a, ["theme", "variant", "name", "onChange", "value", "options", "components", "styles", "inputRef"]);
        return (react_1.default.createElement(react_select_1.default, Object.assign({ inputId: name, inputName: name, ref: inputRef, name: name, styles: Object.assign({}, getStyles(theme, variant), styles), components: Object.assign({ IndicatorSeparator: null, ClearIndicator: null, DropdownIndicator: DropdownIndicator_1.DropdownIndicator,
                Option: Option_1.Option }, components), backspaceRemovesValue: false, isSearchable: false, onChange: this.handleChange, menuPlacement: "auto", menuPortalTarget: document.body, options: options, value: value
                ? Array.isArray(value)
                    ? value
                    : options.find((option) => option.value === value)
                : undefined }, otherProps)));
    }
}
SelectPrimitiveBase.defaultProps = {
    isClearable: false,
    variant: 'primary',
    onBlur: () => { },
};
const ThemedSelectPrimitive = styles_1.withTheme(SelectPrimitiveBase);
exports.Select = Object.assign(ThemedSelectPrimitive, {
    defaultProps: SelectPrimitiveBase.defaultProps,
});
//# sourceMappingURL=Select.js.map