var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
import React from 'react';
import noop from 'lodash/noop';
import { TabFlow } from '@monstrosity/enums/tab-index';
import styled from '@monstrosity/utilities/themed-components';
import { noSelect } from '@monstrosity/utilities/common-styles/no-select';
import { noOutlineOnAll } from '@monstrosity/utilities/common-styles/no-outline';
export var ClickableRoot = styled.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);
}, noOutlineOnAll, noSelect);
export var 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 : function () { return onClick(id); };
    var onKeyDown = function (event) {
        if (event.key && event.key === 'Enter') {
            event.stopPropagation();
            event.preventDefault();
            onClick(id);
        }
    };
    return (React.createElement(ClickableRoot, { onClick: onClickableClick, "aria-label": ariaLabel, tabIndex: tabbable ? TabFlow.Enabled : TabFlow.Disabled, onKeyDown: onKeyDown, focusStyle: focusStyle, hoverStyle: hoverStyle, isDisabled: isDisabled }, children));
};
var templateObject_1;
