import React 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] = React.useState('toggle-group-chatbot-1');
    const [showFirstChatbot, setShowFirstChatbot] = React.useState(true);
    const [showSecondChatbot, setShowSecondChatbot] = React.useState(false);
    React.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.createElement(React.Fragment, null,
        React.createElement("div", { className: "pf-chatbot__compare-mobile-controls" },
            React.createElement(ToggleGroup, { "aria-label": toggleGroupAriaLabel },
                React.createElement(ToggleGroupItem, { className: "pf-chatbot__compare-toggle", text: firstChildDisplayName, buttonId: "toggle-group-chatbot-1", isSelected: isSelected === 'toggle-group-chatbot-1', onChange: handleChildToggleClick }),
                React.createElement(ToggleGroupItem, { className: "pf-chatbot__compare-toggle", text: secondChildDisplayName, buttonId: "toggle-group-chatbot-2", isSelected: isSelected === 'toggle-group-chatbot-2', onChange: handleChildToggleClick }))),
        React.createElement("div", { className: "pf-chatbot__compare" },
            React.createElement("div", { className: `pf-chatbot__compare-item ${!showFirstChatbot ? 'pf-chatbot__compare-item-hidden' : undefined}` }, firstChild),
            React.createElement("div", { className: `pf-chatbot__compare-item ${!showSecondChatbot ? 'pf-chatbot__compare-item-hidden' : undefined}` }, secondChild))));
};
export default Compare;
