import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
export const Compare = ({ firstChild, secondChild, firstChildDisplayName, secondChildDisplayName, onToggleClick, toggleGroupAriaLabel = 'Select which chatbot to display' }) => {
    const [isSelected, setIsSelected] = useState('toggle-group-chatbot-1');
    const [showFirstChatbot, setShowFirstChatbot] = useState(true);
    const [showSecondChatbot, setShowSecondChatbot] = useState(false);
    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 (_jsxs(_Fragment, { children: [_jsx("div", { className: "pf-chatbot__compare-mobile-controls", children: _jsxs(ToggleGroup, { "aria-label": toggleGroupAriaLabel, children: [_jsx(ToggleGroupItem, { className: "pf-chatbot__compare-toggle", text: firstChildDisplayName, buttonId: "toggle-group-chatbot-1", isSelected: isSelected === 'toggle-group-chatbot-1', onChange: handleChildToggleClick }), _jsx(ToggleGroupItem, { className: "pf-chatbot__compare-toggle", text: secondChildDisplayName, buttonId: "toggle-group-chatbot-2", isSelected: isSelected === 'toggle-group-chatbot-2', onChange: handleChildToggleClick })] }) }), _jsxs("div", { className: "pf-chatbot__compare", children: [_jsx("div", { className: `pf-chatbot__compare-item ${!showFirstChatbot ? 'pf-chatbot__compare-item-hidden' : undefined}`, children: firstChild }), _jsx("div", { className: `pf-chatbot__compare-item ${!showSecondChatbot ? 'pf-chatbot__compare-item-hidden' : undefined}`, children: secondChild })] })] }));
};
export default Compare;
