"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Compare = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const react_core_1 = require("@patternfly/react-core");
const Compare = ({ firstChild, secondChild, firstChildDisplayName, secondChildDisplayName, onToggleClick, toggleGroupAriaLabel = 'Select which chatbot to display' }) => {
    const [isSelected, setIsSelected] = (0, react_1.useState)('toggle-group-chatbot-1');
    const [showFirstChatbot, setShowFirstChatbot] = (0, react_1.useState)(true);
    const [showSecondChatbot, setShowSecondChatbot] = (0, react_1.useState)(false);
    (0, react_1.useEffect)(() => {
        // we want to show the first if we switch to the mobile toggle view
        // and reset/switch back to normal otherwise
        const updateChatbotVisibility = () => {
            if (window.innerWidth >= 901) {
                setShowFirstChatbot(true);
                setShowSecondChatbot(true);
            }
            else {
                setShowFirstChatbot(true);
                setShowSecondChatbot(false);
                setIsSelected('toggle-group-chatbot-1');
            }
        };
        window.addEventListener('resize', updateChatbotVisibility);
        return () => {
            window.removeEventListener('resize', updateChatbotVisibility);
        };
    }, []);
    // this only happens on mobile
    const handleChildToggleClick = (event) => {
        const id = event.currentTarget.id;
        setIsSelected(id);
        setShowSecondChatbot(!showSecondChatbot);
        setShowFirstChatbot(!showFirstChatbot);
        onToggleClick && onToggleClick(event);
    };
    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__compare-mobile-controls", children: (0, jsx_runtime_1.jsxs)(react_core_1.ToggleGroup, { "aria-label": toggleGroupAriaLabel, children: [(0, jsx_runtime_1.jsx)(react_core_1.ToggleGroupItem, { className: "pf-chatbot__compare-toggle", text: firstChildDisplayName, buttonId: "toggle-group-chatbot-1", isSelected: isSelected === 'toggle-group-chatbot-1', onChange: handleChildToggleClick }), (0, jsx_runtime_1.jsx)(react_core_1.ToggleGroupItem, { className: "pf-chatbot__compare-toggle", text: secondChildDisplayName, buttonId: "toggle-group-chatbot-2", isSelected: isSelected === 'toggle-group-chatbot-2', onChange: handleChildToggleClick })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__compare", children: [(0, jsx_runtime_1.jsx)("div", { className: `pf-chatbot__compare-item ${!showFirstChatbot ? 'pf-chatbot__compare-item-hidden' : undefined}`, children: firstChild }), (0, jsx_runtime_1.jsx)("div", { className: `pf-chatbot__compare-item ${!showSecondChatbot ? 'pf-chatbot__compare-item-hidden' : undefined}`, children: secondChild })] })] }));
};
exports.Compare = Compare;
exports.default = exports.Compare;
