import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React from 'react';
import { AccessibleHide, AriaLiveRegion } from '@workday/canvas-kit-react/common';
import { PrimaryButton } from '@workday/canvas-kit-react/button';
import { FormField } from '@workday/canvas-kit-react/form-field';
import { Flex } from '@workday/canvas-kit-react/layout';
import { Text } from '@workday/canvas-kit-react/text';
import { TextInput } from '@workday/canvas-kit-react/text-input';
import { createStyles } from '@workday/canvas-kit-styling';
import { system } from '@workday/canvas-tokens-web';
let liveRegionStr = '';
const flexStyles = createStyles({
    gap: system.space.x4,
    alignItems: 'center',
});
export const HiddenLiveRegion = () => {
    const [message, setMessage] = React.useState('');
    function handleChange(e) {
        setMessage(e.target.value);
    }
    function handleSendMessage(e) {
        e.preventDefault();
        liveRegionStr = message;
        setMessage('');
    }
    return (_jsxs(_Fragment, { children: [_jsxs(Flex, { as: "form", "aria-label": "Hidden Live Region", onSubmit: handleSendMessage, cs: flexStyles, children: [_jsxs(FormField, { children: [_jsx(FormField.Label, { children: "Type your message:" }), _jsx(FormField.Input, { as: TextInput, onChange: handleChange, value: message })] }), _jsx(PrimaryButton, { type: "submit", children: "Send Message" })] }), _jsx(AriaLiveRegion, { children: _jsx(Text, { as: AccessibleHide, children: liveRegionStr }) })] }));
};
