import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { Button, Text, TextArea } from '@gravity-ui/uikit';
import { block } from "../../../utils/cn.js";
import { i18n } from "./i18n/index.js";
import "./FeedbackForm.css";
const b = block('feedback-form');
/**
 * FeedbackForm - Reusable feedback form with reason selection and comment field
 *
 * This component provides a user-friendly way to collect feedback with multiple
 * selectable reasons (rendered as chips) and an optional comment field.
 * Can be used standalone or inside ActionPopup.
 *
 * @returns React element with feedback form
 */
export function FeedbackForm({ options, onSubmit, reasonsLabel, commentLabel, commentPlaceholder, showComment = true, submitLabel, disabled = false, className, qa, }) {
    const [selectedReasons, setSelectedReasons] = useState([]);
    const [comment, setComment] = useState('');
    const handleReasonToggle = (reasonId) => {
        setSelectedReasons((prev) => prev.includes(reasonId) ? prev.filter((id) => id !== reasonId) : [...prev, reasonId]);
    };
    const handleSubmit = () => {
        onSubmit(selectedReasons, comment);
        setSelectedReasons([]);
        setComment('');
    };
    const isReasonSelected = (reasonId) => selectedReasons.includes(reasonId);
    // Submit button is disabled if no reason selected AND no comment provided (when comment is shown)
    const isSubmitDisabled = disabled || (selectedReasons.length === 0 && (!showComment || comment.trim() === ''));
    const displayCommentPlaceholder = commentPlaceholder || i18n('comment-placeholder');
    const displaySubmitLabel = submitLabel || i18n('submit');
    return (_jsxs("div", { className: b(null, className), "data-qa": qa, children: [reasonsLabel && (_jsx(Text, { variant: "subheader-2", "data-qa": qa ? `${qa}-reasons-label` : undefined, children: reasonsLabel })), _jsx("div", { className: b('reasons'), "data-qa": qa ? `${qa}-reasons` : undefined, children: options.map((option) => {
                    const selected = isReasonSelected(option.id);
                    return (_jsx(Button, { view: "normal", size: "m", selected: selected, onClick: () => handleReasonToggle(option.id), className: b('reason-chip', { selected }), "data-qa": qa ? `${qa}-reason-${option.id}` : undefined, disabled: disabled, children: option.label }, option.id));
                }) }), showComment && (_jsxs(_Fragment, { children: [commentLabel && (_jsx(Text, { variant: "subheader-2", "data-qa": qa ? `${qa}-comment-label` : undefined, children: commentLabel })), _jsx(TextArea, { value: comment, onUpdate: setComment, placeholder: displayCommentPlaceholder, rows: 2, className: b('comment'), disabled: disabled, qa: qa ? `${qa}-comment` : undefined })] })), _jsx(Button, { view: "action", size: "l", onClick: handleSubmit, disabled: isSubmitDisabled, className: b('submit'), qa: qa ? `${qa}-submit` : undefined, children: displaySubmitLabel })] }));
}
//# sourceMappingURL=FeedbackForm.js.map
