"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Compare = void 0;
const react_1 = __importDefault(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] = react_1.default.useState('toggle-group-chatbot-1');
    const [showFirstChatbot, setShowFirstChatbot] = react_1.default.useState(true);
    const [showSecondChatbot, setShowSecondChatbot] = react_1.default.useState(false);
    react_1.default.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 (react_1.default.createElement(react_1.default.Fragment, null,
        react_1.default.createElement("div", { className: "pf-chatbot__compare-mobile-controls" },
            react_1.default.createElement(react_core_1.ToggleGroup, { "aria-label": toggleGroupAriaLabel },
                react_1.default.createElement(react_core_1.ToggleGroupItem, { className: "pf-chatbot__compare-toggle", text: firstChildDisplayName, buttonId: "toggle-group-chatbot-1", isSelected: isSelected === 'toggle-group-chatbot-1', onChange: handleChildToggleClick }),
                react_1.default.createElement(react_core_1.ToggleGroupItem, { className: "pf-chatbot__compare-toggle", text: secondChildDisplayName, buttonId: "toggle-group-chatbot-2", isSelected: isSelected === 'toggle-group-chatbot-2', onChange: handleChildToggleClick }))),
        react_1.default.createElement("div", { className: "pf-chatbot__compare" },
            react_1.default.createElement("div", { className: `pf-chatbot__compare-item ${!showFirstChatbot ? 'pf-chatbot__compare-item-hidden' : undefined}` }, firstChild),
            react_1.default.createElement("div", { className: `pf-chatbot__compare-item ${!showSecondChatbot ? 'pf-chatbot__compare-item-hidden' : undefined}` }, secondChild))));
};
exports.Compare = Compare;
exports.default = exports.Compare;
