import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import RocketIcon from '@patternfly/react-icons/dist/js/icons/rocket-icon';
import OutlinedBookmarkIcon from '@patternfly/react-icons/dist/js/icons/outlined-bookmark-icon';
import { Card, CardBody, CardHeader, CardFooter, CardTitle, Icon, Button, Flex, Stack, Label, pluralize } from '@patternfly/react-core';
import OutlinedClockIcon from '@patternfly/react-icons/dist/js/icons/outlined-clock-icon';
import QuickStartTileHeader from './QuickStartTileHeader';
import QuickStartTileDescription from './QuickStartTileDescription';
import FallbackImg from './FallbackImg';
export const camelize = (str) => str.replace(/(?:^\w|[A-Z]|\b\w|\s+)/g, function (match, index) {
    if (+match === 0) {
        return '';
    } // or if (/\s+/.test(match)) for white spaces
    return index === 0 ? match.toLowerCase() : match.toUpperCase();
});
const QuickStartTile = ({ className, quickStart, onClick, onSelectQuickStart, minuteWord = 'minute', minuteWordPlural = 'minutes', prerequisiteWord, prerequisiteWordPlural, quickStartButtonAriaLabel, action, isCompact }) => {
    const { metadata: { name: id }, spec: { icon, displayName, description, durationMinutes, prerequisites, link, type } } = quickStart;
    let quickStartIcon;
    if (typeof icon === 'object') {
        quickStartIcon = _jsx(Icon, { size: "2xl", children: icon });
    }
    else {
        quickStartIcon = (_jsx(Icon, { size: "2xl", children: _jsx(FallbackImg, { src: icon, alt: "", className: "pfext-catalog-item-icon__img", fallback: _jsx(RocketIcon, {}) }) }));
    }
    const onSelect = () => {
        if (!link) {
            onSelectQuickStart(id);
        }
        else {
            window.open(link.href, '_blank', 'noopener,noreferrer');
        }
        onClick && onClick();
    };
    const ActionIcon = (action === null || action === void 0 ? void 0 : action.icon) || OutlinedBookmarkIcon;
    const additionalAction = action ? (_jsx(Button, Object.assign({ "aria-label": action['aria-label'], icon: _jsx(ActionIcon, {}), variant: "plain", onClick: action.onClick }, action.buttonProps))) : undefined;
    return (_jsxs(Card, { className: `pf-chatbot__quickstarts-tile ${className ? className : ''}`, id: `${id}-chatbot-qs-tile`, style: { height: '100%' }, "data-testid": `chatbot-qs-card-${camelize(displayName)}`, isCompact: isCompact, children: [_jsx(CardHeader, Object.assign({}, (action && {
                actions: { actions: additionalAction }
            }), { children: quickStartIcon })), _jsx(CardTitle, { children: _jsx(QuickStartTileHeader, { name: displayName, onSelect: onSelect, quickStartId: id }) }), _jsx(CardBody, { children: _jsxs(Stack, { hasGutter: true, children: [_jsxs(Flex, { spaceItems: { default: 'spaceItemsSm' }, children: [type && _jsx(Label, { color: type.color, children: type.text }), durationMinutes && (_jsx(Label, { variant: "outline", "data-test": "duration", icon: _jsx(OutlinedClockIcon, {}), children: pluralize(durationMinutes, minuteWord, minuteWordPlural) }))] }), _jsx(QuickStartTileDescription, { description: description, prerequisites: prerequisites, prerequisiteWord: prerequisiteWord, prerequisiteWordPlural: prerequisiteWordPlural, quickStartButtonAriaLabel: quickStartButtonAriaLabel })] }) }), _jsx(CardFooter, { children: _jsx(Button, { variant: "link", isInline: true, onClick: onSelect, children: _jsx("span", { className: "pf-v6-c-button__text", children: "Start" }) }) })] }));
};
export default QuickStartTile;
