import { useState } from 'react';
import { Button, Flex, TextArea, useLiveLog } from '@pega/cosmos-react-core';
export const SubComponent = ({ timeout = 1000 }) => {
    const [messageVal, setMessageVal] = useState('');
    const { announcePolite, announceAssertive } = useLiveLog();
    return (<Flex container={{ direction: 'column', gap: 1 }}>
      <p>
        This story will announce the value entered in the text area on button click after a 1-second
        delay.
      </p>

      <br />

      <TextArea label='Message to announce' value={messageVal} onChange={(e) => setMessageVal(e.target.value)}/>

      <div>
        <Button onClick={() => {
            if (timeout < 0) {
                announcePolite({ message: messageVal });
            }
            else {
                setTimeout(() => {
                    announcePolite({ message: messageVal });
                }, timeout);
            }
            setMessageVal('');
        }}>
          Announce Polite
        </Button>

        <Button onClick={() => {
            if (timeout < 0) {
                announceAssertive({ message: messageVal });
            }
            else {
                setTimeout(() => {
                    announceAssertive({ message: messageVal });
                }, timeout);
            }
            setMessageVal('');
        }}>
          Announce Assertive
        </Button>
      </div>
    </Flex>);
};
//# sourceMappingURL=LiveLog.mocks.jsx.map