import React__default, { useRef } from 'react';
import classnames from 'classnames';
import { H as Heading } from './Heading-es.js';
import { B as Button } from './Button-es.js';
import { M as Menu } from './Menu-es.js';

var styles = {"card":"-PlHaWx00Hw-","accent":"Iilm5Uhxo50-","clickable":"Vppn4k0fBsc-","header":"l3-Pkynq2zA-","spinning":"hvqmZrWenIs-"};

var colors = {"requestColor":"_5mDLThZ7dBQ-","quoteColor":"-n66fUZcIH4-","jobColor":"vfz0wjl-krU-","invoiceColor":"UnWnEyw0-jY-","clientColor":"iRFdI5utAsU-","blue":"_0f94rfGFhgQ-","blueLight":"UZmLtIoFU0w-","blueLighter":"_5bsgmHFheR8-","blueLightest":"odY4oZL82vc-","blueDark":"efMKqzdbpSM-","green":"PuLfA1HnrOs-","greenLight":"_9xiJ-MAQiTY-","greenLighter":"lmzbPrdLKIM-","greenLightest":"S5ZiMPMgAmo-","greenDark":"NIwEAXj-xbU-","lime":"_4rexkfLqzOk-","limeLight":"H3c6K82o178-","limeLighter":"_7-lMfROnQU8-","limeLightest":"Ula38LO3Ays-","limeDark":"GQCFMOlKqhw-","yellowGreen":"WxVa9PUSqNk-","yellowGreenLight":"-XIQhBSotwA-","yellowGreenLighter":"r9f1ybI7SeU-","yellowGreenLightest":"JgtJf0Qh1sg-","yellowGreenDark":"ON15q9QZXPA-","yellow":"Oi95vpOkcj4-","yellowLight":"hTJPhQ2V8RM-","yellowLighter":"YLRdqtxcY5g-","yellowLightest":"WiyLCwtXnPg-","yellowDark":"ujxwIinNJ0A-","red":"yL4o-89200k-","redLight":"_1C9So1tlmCo-","redLighter":"AVKIKX3Jk2Y-","redLightest":"NtJ7t9sNRxY-","redDark":"nuliwU-1NCI-","grey":"WPvwxb8gzwI-","greyLight":"O8FMSwoZOog-","greyLighter":"M4Ag1a-ThKE-","greyLightest":"adtwz9eEtbE-","greyDark":"EJoHvQW5sXw-","greyBlue":"ocGhxlAjeA8-","greyBlueLight":"FC48-U489FM-","greyBlueLighter":"Jc5SOCWjD0I-","greyBlueLightest":"-JQhLuDsLTg-","greyBlueDark":"YXdImUdlDwQ-","lightBlue":"hRRwMChk2-k-","lightBlueLight":"usPlm5p7svg-","lightBlueLighter":"jN9BGAMnCLQ-","lightBlueLightest":"xeJfT0FMKtc-","lightBlueDark":"vWSUNAsOB6g-","purple":"Q17e9VQy-kI-","purpleLight":"pKusyI7bMxc-","purpleLighter":"ceTZn8oUUCg-","purpleLightest":"GYwXWYcZPPc-","purpleDark":"uXNnhLCRSPc-","pink":"eptfViHsA5o-","pinkLight":"_9mgeBAoZsME-","pinkLighter":"fCkb0vtBUJY-","pinkLightest":"Nfx7Me6gfew-","pinkDark":"PXtxWUy1pvk-","teal":"TCIFwV-8jfU-","tealLight":"QKM3Gc0bQxI-","tealLighter":"ILaFINMoSlM-","tealLightest":"wj7qD0ryDNw-","tealDark":"tUjjyB7GN-Q-","orange":"gtKRbI99aQU-","orangeLight":"uUvtDEYmYhE-","orangeLighter":"UNvUmONc6bM-","orangeLightest":"sBl1hHCnBpA-","orangeDark":"ceM7ISMCfX4-","brown":"XGl6Iv7N1e0-","brownLight":"n474Hn3j8es-","brownLighter":"UoyCJSsgMI0-","brownLightest":"_8rrvx00EpUc-","brownDark":"JWWWvdngqx4-","navy":"Jfp-dUno4KQ-","navyLight":"_5SGbQDSEQlE-","navyLighter":"DMElPhnEjrM-","navyLightest":"Nd80Eh7efmo-","navyDark":"YNxCRirQrH4-","indigo":"oiO69PZN9YQ-","indigoLight":"_0IY3-0yi-R8-","indigoLighter":"EhlKEc9GoHs-","indigoLightest":"AdDWGn8NI00-","indigoDark":"_2ps4Uk-mog0-","white":"mflIgpDr82Y-","spinning":"qesphJ0zKaM-"};

var elevations = {"lowElevation":"bb-VTS0yML8-","baseElevation":"_2BzdFV5LQvM-","highElevation":"_60G0BuQ6TY0-","spinning":"jTHMriUWcjo-"};

const ENTER_KEY = "Enter";
const SPACEBAR_KEY = " ";
/**
 * This is only intended to be used in the Card component.
 * Please use `<Card onClick={onClick} />` component instead.
 */
function CardClickable({ className, onClick, children, UNSAFE_style = {}, }) {
    const cardRef = useRef(null);
    return (React__default.createElement("div", { ref: cardRef, "data-testid": "clickable-card", className: className, style: UNSAFE_style, onClick: onClick, onKeyUp: handleKeyup, onKeyDown: handleKeyDown, role: "button", tabIndex: 0 }, children));
    function isCardFocused() {
        return document.activeElement === cardRef.current;
    }
    function handleKeyup(event) {
        var _a;
        const shouldClick = event.key === ENTER_KEY || event.key === SPACEBAR_KEY;
        if (shouldClick && isCardFocused()) {
            (_a = cardRef.current) === null || _a === void 0 ? void 0 : _a.click();
        }
    }
    function handleKeyDown(event) {
        // Prevent page scroll when hitting spacebar while focused on a card
        if (event.key === SPACEBAR_KEY && isCardFocused()) {
            event.preventDefault();
        }
    }
}

/**
 * Intended to be used in the Card component.
 * Use `<Card header={header} />` component instead.
 */
function CardHeader({ title, header, UNSAFE_className = {}, UNSAFE_style = {}, }) {
    const heading = title || header;
    if (React__default.isValidElement(heading))
        return React__default.createElement(React__default.Fragment, null, heading);
    if (heading) {
        const titleString = typeof heading === "string"
            ? heading
            : heading.title;
        return (React__default.createElement("div", { className: classnames(styles.header, UNSAFE_className.header), style: UNSAFE_style.header },
            titleString && React__default.createElement(Heading, { level: 2 }, titleString),
            typeof heading === "object" &&
                renderHeaderAction(heading === null || heading === void 0 ? void 0 : heading.action)));
    }
    return React__default.createElement(React__default.Fragment, null);
}
function renderHeaderAction(action) {
    if ((action === null || action === void 0 ? void 0 : action.type) === Button) {
        const props = Object.assign(Object.assign({ type: "tertiary" }, action.props), { size: "small" });
        return action && React__default.createElement(Button, Object.assign({}, props));
    }
    if ((action === null || action === void 0 ? void 0 : action.type) === Menu) {
        return action && React__default.createElement(Menu, Object.assign({}, action.props));
    }
    return React__default.createElement(React__default.Fragment, null);
}

/**
 * Header component for the Card.
 * Used in the compound component pattern to provide a consistent header layout.
 *
 * @example
 * ```tsx
 * <Card>
 *   <Card.Header>
 *     <Text>Header Content</Text>
 *   </Card.Header>
 *   <Card.Body>
 *     <p>Card content</p>
 *   </Card.Body>
 * </Card>
 * ```
 */
function CardHeaderCompoundComponent({ children }) {
    return React__default.createElement(React__default.Fragment, null, children);
}
/**
 * Body component for the Card.
 * Used in the compound component pattern to provide a consistent content layout.
 *
 * @example
 * ```tsx
 * <Card>
 *   <Card.Header>
 *     <Text>Header Content</Text>
 *   </Card.Header>
 *   <Card.Body>
 *     <p>Card content</p>
 *   </Card.Body>
 * </Card>
 * ```
 */
function CardBodyCompoundComponent({ children }) {
    return React__default.createElement(React__default.Fragment, null, children);
}
function renderCardContent(children, title, header, UNSAFE_className, UNSAFE_style) {
    return (React__default.createElement(React__default.Fragment, null,
        React__default.createElement(CardHeader, { title: title, header: header, UNSAFE_className: { header: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.header }, UNSAFE_style: { header: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.header } }),
        children));
}
function renderCardWrapper(className, content, onClick, url, external, UNSAFE_className, UNSAFE_style) {
    const combinedClassName = classnames(className, UNSAFE_className);
    if (onClick) {
        return (React__default.createElement(CardClickable, { className: combinedClassName, onClick: onClick, UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style }, content));
    }
    if (url) {
        return (React__default.createElement("a", Object.assign({ className: combinedClassName, href: url, style: UNSAFE_style }, (external && { target: "_blank", rel: "noopener noreferrer" })), content));
    }
    return (React__default.createElement("div", { className: combinedClassName, style: UNSAFE_style }, content));
}
function Card(props) {
    const { accent, header, children, title, elevation = "none", onClick, url, external, UNSAFE_className = {}, UNSAFE_style = {}, } = props;
    const className = classnames(styles.card, accent && styles.accent, (url || onClick) && styles.clickable, accent && colors[accent], elevation !== "none" && elevations[`${elevation}Elevation`]);
    const isUsingCompoundPattern = React__default.Children.toArray(children).some(child => React__default.isValidElement(child) &&
        (child.type === CardHeaderCompoundComponent ||
            child.type === CardBodyCompoundComponent));
    const content = isUsingCompoundPattern
        ? children
        : renderCardContent(children, title, header, UNSAFE_className, UNSAFE_style);
    return renderCardWrapper(className, content, onClick, url, external, UNSAFE_className.container, UNSAFE_style.container);
}
Card.Header = CardHeaderCompoundComponent;
Card.Body = CardBodyCompoundComponent;

export { Card as C };
