import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React from 'react';
import { 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 { system } from '@workday/canvas-tokens-web';
import { createStyles, px2rem, calc } from '@workday/canvas-kit-styling';
const liveRegionStyle = createStyles({
    border: `${px2rem(1)} solid ${system.color.border.caution.strong}`,
    backgroundColor: system.color.bg.caution.softer,
    padding: system.space.x4,
    display: 'block',
    marginBlockStart: system.space.x4,
    marginBlockEnd: system.space.x4,
    width: calc.multiply(system.space.x16, 7),
});
const flexGapStyles = createStyles({
    gap: system.space.x4,
    alignItems: 'center',
});
let liveRegionStr = 'This is an ARIA Live Region!';
export const VisibleLiveRegion = () => {
    const [message, setMessage] = React.useState('');
    function handleChange(e) {
        setMessage(e.target.value);
    }
    function handleSendMessage(e) {
        e.preventDefault();
        liveRegionStr = message;
        setMessage('');
    }
    return (_jsxs(_Fragment, { children: [_jsx(AriaLiveRegion, { children: _jsx(Text, { cs: liveRegionStyle, children: liveRegionStr }) }), _jsxs(Flex, { as: "form", "aria-label": "Visible Live Region", onSubmit: handleSendMessage, cs: flexGapStyles, 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" })] })] }));
};
