var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
// ============================================================================
// Chatbot Main - Messages - Feedback Card
// ============================================================================
import React from 'react';
// Import PatternFly components
import { ActionGroup, Button, Card, CardBody, CardHeader, Form, TextArea } from '@patternfly/react-core';
import QuickResponse from '../QuickResponse/QuickResponse';
import CloseButton from './CloseButton';
const UserFeedback = (_a) => {
    var { className, timestamp, title = 'Why did you choose this rating?', hasTextArea, textAreaAriaLabel = `Provide optional additional feedback for message received at ${timestamp}`, textAreaPlaceholder = 'Provide optional additional feedback', onTextAreaChange, submitWord = 'Submit', quickResponses, quickResponseContainerProps = { 'aria-label': `Quick feedback for message received at ${timestamp}` }, onSubmit, onClose, closeButtonAriaLabel = `Close feedback for message received at ${timestamp}`, id, headingLevel: HeadingLevel = 'h1', focusOnLoad = true, isCompact } = _a, props = __rest(_a, ["className", "timestamp", "title", "hasTextArea", "textAreaAriaLabel", "textAreaPlaceholder", "onTextAreaChange", "submitWord", "quickResponses", "quickResponseContainerProps", "onSubmit", "onClose", "closeButtonAriaLabel", "id", "headingLevel", "focusOnLoad", "isCompact"]);
    const [selectedResponse, setSelectedResponse] = React.useState();
    const [value, setValue] = React.useState('');
    const divRef = React.useRef(null);
    React.useEffect(() => {
        var _a;
        if (focusOnLoad) {
            (_a = divRef.current) === null || _a === void 0 ? void 0 : _a.focus();
        }
    }, []);
    return (
    /* card does not have ref forwarding; hence wrapper div */
    React.createElement("div", { ref: divRef, id: id, tabIndex: 0, "aria-label": title },
        React.createElement(Card, Object.assign({ isCompact: isCompact, className: `pf-chatbot__feedback-card ${className ? className : ''}` }, props),
            React.createElement(CardHeader, { actions: {
                    actions: React.createElement(CloseButton, { onClose: onClose, ariaLabel: closeButtonAriaLabel })
                } },
                React.createElement(HeadingLevel, { className: "pf-chatbot__feedback-card-title" }, title)),
            React.createElement(CardBody, null,
                React.createElement(Form, { className: `pf-chatbot__feedback-card-form ${isCompact ? 'pf-m-compact' : ''}` },
                    quickResponses && (React.createElement(QuickResponse, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps, onSelect: (id) => setSelectedResponse(id), isCompact: isCompact })),
                    hasTextArea && (React.createElement(TextArea, { value: value, onChange: (_event, value) => {
                            setValue(value);
                            onTextAreaChange && onTextAreaChange(_event, value);
                        }, placeholder: textAreaPlaceholder, "aria-label": textAreaAriaLabel, resizeOrientation: "vertical" })),
                    React.createElement(ActionGroup, null,
                        React.createElement(Button, { onClick: () => onSubmit(selectedResponse, value) }, submitWord)))))));
};
export default UserFeedback;
