"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importDefault(require("react"));
var noop_1 = __importDefault(require("lodash/noop"));
var tab_index_1 = require("@monstrosity/enums/tab-index");
var themed_components_1 = __importDefault(require("@monstrosity/utilities/themed-components"));
var no_select_1 = require("@monstrosity/utilities/common-styles/no-select");
var no_outline_1 = require("@monstrosity/utilities/common-styles/no-outline");
exports.ClickableRoot = themed_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tcursor: ", ";\n\n\t&:focus {\n\t\t", "\n\t}\n\n\t&:hover {\n\t\t", "\n\t}\n\n\t", "\n\t", "\n"], ["\n\tcursor: ",
    ";\n\n\t&:focus {\n\t\t", "\n\t}\n\n\t&:hover {\n\t\t", "\n\t}\n\n\t", "\n\t", "\n"])), function (_a) {
    var theme = _a.theme, isDisabled = _a.isDisabled;
    return isDisabled ? theme.cursor.disabled : theme.cursor.pointer;
}, function (_a) {
    var focusStyle = _a.focusStyle, isDisabled = _a.isDisabled;
    return (isDisabled ? '' : focusStyle);
}, function (_a) {
    var hoverStyle = _a.hoverStyle, isDisabled = _a.isDisabled;
    return (isDisabled ? '' : hoverStyle);
}, no_outline_1.noOutlineOnAll, no_select_1.noSelect);
exports.Clickable = function (_a) {
    var onClick = _a.onClick, id = _a.id, ariaLabel = _a.ariaLabel, children = _a.children, _b = _a.tabbable, tabbable = _b === void 0 ? false : _b, focusStyle = _a.focusStyle, hoverStyle = _a.hoverStyle, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c;
    var onClickableClick = isDisabled ? noop_1.default : function () { return onClick(id); };
    var onKeyDown = function (event) {
        if (event.key && event.key === 'Enter') {
            event.stopPropagation();
            event.preventDefault();
            onClick(id);
        }
    };
    return (react_1.default.createElement(exports.ClickableRoot, { onClick: onClickableClick, "aria-label": ariaLabel, tabIndex: tabbable ? tab_index_1.TabFlow.Enabled : tab_index_1.TabFlow.Disabled, onKeyDown: onKeyDown, focusStyle: focusStyle, hoverStyle: hoverStyle, isDisabled: isDisabled }, children));
};
var templateObject_1;
