var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
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 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import { Check } from '@procore/core-icons/dist';
import React from 'react';
import { OverflowObserver } from '../../effects/OverflowObserver';
import { OptGroup, Option, Select } from '../Select';
import { Tooltip } from '../Tooltip';
import { PillSelectCheckedContainer, PillSelectLabel, PillSelectLabelWrapper, PillSelectOptionWrapper, PillSelectPill, } from './PillSelect.styles';
var emptyArr = [];
function defaultGetId(option) {
    return option.id;
}
function defaultGetLabel(option) {
    return option.label;
}
function defaultGetGroup(option) {
    return option.groupId;
}
function defaultGetSuggested(option) {
    return option.suggested;
}
export function defaultGetColor(option) {
    return option.color;
}
var PillSelectOption = React.forwardRef(function PillSelectOption(_a, ref) {
    var color = _a.color, label = _a.label, selected = _a.selected, props = __rest(_a, ["color", "label", "selected"]);
    return (React.createElement(Option, __assign({ selected: selected }, props, { ref: ref }),
        React.createElement(PillSelectOptionWrapper, null,
            React.createElement(PillSelectPill, { color: color }, label),
            selected && (React.createElement(PillSelectCheckedContainer, null,
                React.createElement(Check, { size: "sm" }))))));
});
var PillSelectOptGroup = React.forwardRef(function PillSelectOptGroup(props, ref) {
    return React.createElement(OptGroup, __assign({}, props, { ref: ref }));
});
/**

 Pill Selects are used when you need a user to select between one of several
 options that are shown as pills. Often this will be a status, such as marking
 an item “closed”, “draft”, etc.

 @since 10.19.0

 @see [Storybook](https://procore.github.io/core/latest/?path=/story/demos-pillselect--demo)

 @see [Design Guidelines](https://design.procore.com/pill-select)

 */
export var PillSelect = React.forwardRef(function PillSelect(_a, ref) {
    var afterHide_ = _a.afterHide, afterShow_ = _a.afterShow, _b = _a.getColor, getColor = _b === void 0 ? defaultGetColor : _b, _c = _a.getGroup, getGroup = _c === void 0 ? defaultGetGroup : _c, _d = _a.getId, getId = _d === void 0 ? defaultGetId : _d, _e = _a.getLabel, getLabel = _e === void 0 ? defaultGetLabel : _e, _f = _a.getSuggested, getSuggested = _f === void 0 ? defaultGetSuggested : _f, _g = _a.groupGetId, groupGetId = _g === void 0 ? defaultGetId : _g, _h = _a.groupGetLabel, groupGetLabel = _h === void 0 ? defaultGetLabel : _h, optgroups = _a.optgroups, _j = _a.options, options = _j === void 0 ? emptyArr : _j, value = _a.value, props = __rest(_a, ["afterHide", "afterShow", "getColor", "getGroup", "getId", "getLabel", "getSuggested", "groupGetId", "groupGetLabel", "optgroups", "options", "value"]);
    var _k = React.useMemo(function () {
        if (!value) {
            return {};
        }
        return {
            color: getColor(value),
            id: getId(value),
            label: getLabel(value),
        };
    }, [getColor, getId, getLabel, value]), color = _k.color, id = _k.id, label = _k.label;
    var optionsByGroup = React.useMemo(function () {
        return optgroups === null || optgroups === void 0 ? void 0 : optgroups.map(function (optgroup) { return ({
            optgroup: optgroup,
            options: options.filter(function (option) { return getGroup(option) === groupGetId(optgroup); }),
        }); }).filter(function (_a) {
            var options = _a.options;
            return options.length;
        });
    }, [options, optgroups, groupGetId, getGroup]);
    var _l = React.useState(false), isOpened = _l[0], setIsOpened = _l[1];
    var afterShow = React.useCallback(function () {
        setIsOpened(true);
        afterShow_ === null || afterShow_ === void 0 ? void 0 : afterShow_();
    }, [afterShow_]);
    var afterHide = React.useCallback(function () {
        setIsOpened(false);
        afterHide_ === null || afterHide_ === void 0 ? void 0 : afterHide_();
    }, [afterHide_]);
    return (React.createElement(Select, __assign({ afterHide: afterHide, afterShow: afterShow, label: label ? (React.createElement(OverflowObserver, null, function (_a) {
            var isOverflowing = _a.isOverflowing, ref = _a.ref;
            var pill = (React.createElement(PillSelectLabel, { color: color, ref: ref }, label));
            var showTooltip = isOverflowing && !isOpened;
            return (React.createElement(PillSelectLabelWrapper, { disabled: props.disabled }, showTooltip ? (React.createElement(Tooltip, { trigger: "hover", overlay: label }, pill)) : (pill)));
        })) : null }, props, { ref: ref }), optionsByGroup ? (optionsByGroup.map(function (_a) {
        var optgroup = _a.optgroup, options = _a.options;
        return (React.createElement(React.Fragment, { key: groupGetId(optgroup) },
            React.createElement(PillSelectOptGroup, { key: groupGetId(optgroup) }, groupGetLabel(optgroup)),
            options.map(function (option) { return (React.createElement(PillSelectOption, { key: getId(option), color: getColor(option), label: getLabel(option), selected: getId(option) === id, suggested: getSuggested(option), value: option })); })));
    })) : (React.createElement(React.Fragment, null, options.map(function (option) { return (React.createElement(PillSelectOption, { key: getId(option), color: getColor(option), label: getLabel(option), selected: getId(option) === id, suggested: getSuggested(option), value: option })); })))));
});
PillSelect.displayName = 'PillSelect';
//# sourceMappingURL=PillSelect.js.map