'use strict';

var React = require('react');
var Typography = require('./Typography-cjs.js');
var Icon = require('./Icon-cjs.js');
var DataListLayoutContext = require('./DataListLayoutContext-cjs2.js');

var styles = {"action":"zfAZTjk0VNE-","actionUrl":"iiHzJY7IVi0-","label":"R0mZNYJjNCg-","spinning":"rP-C67Ex-6M-"};

function DataListAction({ label, icon, destructive, visible = () => true, onClick, actionUrl, }) {
    const { activeItem } = DataListLayoutContext.useDataListLayoutActionsContext();
    // Don't render if the item is not visible
    if (activeItem && !visible(activeItem)) {
        return null;
    }
    const color = destructive ? "destructive" : "heading";
    function getActionLabel() {
        if (typeof label === "string") {
            return label;
        }
        if (activeItem) {
            return label(activeItem);
        }
    }
    if (actionUrl) {
        return (React.createElement("a", { href: actionUrl, rel: "noopener noreferrer", className: `${styles.action} ${styles.actionUrl}`, onClick: handleClick },
            React.createElement(Typography.Typography, { textColor: color },
                React.createElement("span", { className: styles.label }, getActionLabel())),
            icon && React.createElement(Icon.Icon, { name: icon, color: color })));
    }
    return (React.createElement("button", { type: "button", className: styles.action, onClick: handleClick },
        React.createElement(Typography.Typography, { textColor: color },
            React.createElement("span", { className: styles.label }, getActionLabel())),
        icon && React.createElement(Icon.Icon, { name: icon, color: color })));
    function handleClick() {
        if (activeItem) {
            onClick === null || onClick === void 0 ? void 0 : onClick(activeItem);
        }
        else {
            onClick === null || onClick === void 0 ? void 0 : onClick();
        }
    }
}

exports.DataListAction = DataListAction;
