"use strict";
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;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
// ============================================================================
// Chatbot Main - Messages - Feedback Card
// ============================================================================
const react_1 = __importDefault(require("react"));
// Import PatternFly components
const react_core_1 = require("@patternfly/react-core");
const QuickResponse_1 = __importDefault(require("../QuickResponse/QuickResponse"));
const CloseButton_1 = __importDefault(require("./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_1.default.useState();
    const [value, setValue] = react_1.default.useState('');
    const divRef = react_1.default.useRef(null);
    react_1.default.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_1.default.createElement("div", { ref: divRef, id: id, tabIndex: 0, "aria-label": title },
        react_1.default.createElement(react_core_1.Card, Object.assign({ isCompact: isCompact, className: `pf-chatbot__feedback-card ${className ? className : ''}` }, props),
            react_1.default.createElement(react_core_1.CardHeader, { actions: {
                    actions: react_1.default.createElement(CloseButton_1.default, { onClose: onClose, ariaLabel: closeButtonAriaLabel })
                } },
                react_1.default.createElement(HeadingLevel, { className: "pf-chatbot__feedback-card-title" }, title)),
            react_1.default.createElement(react_core_1.CardBody, null,
                react_1.default.createElement(react_core_1.Form, { className: `pf-chatbot__feedback-card-form ${isCompact ? 'pf-m-compact' : ''}` },
                    quickResponses && (react_1.default.createElement(QuickResponse_1.default, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps, onSelect: (id) => setSelectedResponse(id), isCompact: isCompact })),
                    hasTextArea && (react_1.default.createElement(react_core_1.TextArea, { value: value, onChange: (_event, value) => {
                            setValue(value);
                            onTextAreaChange && onTextAreaChange(_event, value);
                        }, placeholder: textAreaPlaceholder, "aria-label": textAreaAriaLabel, resizeOrientation: "vertical" })),
                    react_1.default.createElement(react_core_1.ActionGroup, null,
                        react_1.default.createElement(react_core_1.Button, { onClick: () => onSubmit(selectedResponse, value) }, submitWord)))))));
};
exports.default = UserFeedback;
