import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import Button from '../Button';
import Flex from '../Flex';
import RadioButton from '../RadioButton';
import RadioButtonGroup from '../RadioButtonGroup';
import Text from '../Text';
import TextArea from '../TextArea';
import { useI18n, useTestIds } from '../../hooks';
import { getAIRewriteTestIds } from './AIRewrite.test-ids';
import { StyledAIRewriteDialog, StyledFormSection, StyledInstructionsWrapper } from './AIRewrite.styles';
const AIRewrite = ({ target, testId, onGenerate, onSubmit, onCancel, isGenerating, suggestion, suggestionEditor }) => {
    const t = useI18n();
    const testIds = useTestIds(testId, getAIRewriteTestIds);
    const [selectedAction, setSelectedAction] = useState('improve');
    const [additionalInstructions, setAdditionalInstructions] = useState('');
    const handleActionChange = (e) => {
        const newAction = e.target.value;
        if (newAction === 'improve' ||
            newAction === 'shorter' ||
            newAction === 'professional' ||
            newAction === 'friendly') {
            setSelectedAction(newAction);
        }
    };
    const handleGenerate = () => {
        onGenerate(selectedAction, additionalInstructions);
    };
    const handleCancel = () => {
        target.focus();
        onCancel();
    };
    return (_jsx(StyledAIRewriteDialog, { target: target, heading: t('ai_rewrite_title'), onCancel: handleCancel, onSubmit: {
            disabled: !suggestion?.trim() || isGenerating,
            handler: onSubmit
        }, children: _jsxs(Flex, { container: { direction: 'column', rowGap: 2 }, children: [_jsx(StyledFormSection, { children: _jsxs(Flex, { container: { direction: 'column', rowGap: 2 }, children: [_jsxs(RadioButtonGroup, { name: 'aiAction', label: t('ai_rewrite_label'), required: true, inline: true, children: [_jsx(RadioButton, { value: 'improve', label: t('ai_rewrite_improve'), checked: selectedAction === 'improve', onChange: handleActionChange, "data-testid": testIds.radioClearer }), _jsx(RadioButton, { value: 'shorter', label: t('ai_rewrite_shorter'), checked: selectedAction === 'shorter', onChange: handleActionChange, "data-testid": testIds.radioShorter }), _jsx(RadioButton, { value: 'professional', label: t('ai_rewrite_professional'), checked: selectedAction === 'professional', onChange: handleActionChange, "data-testid": testIds.radioProfessional }), _jsx(RadioButton, { value: 'friendly', label: t('ai_rewrite_friendly'), checked: selectedAction === 'friendly', onChange: handleActionChange, "data-testid": testIds.radioFriendly })] }), _jsx(StyledInstructionsWrapper, { children: _jsx(TextArea, { label: t('ai_rewrite_instructions_label'), info: t('ai_rewrite_instructions_info'), value: additionalInstructions, onChange: e => setAdditionalInstructions(e.target.value), maxLength: 200, rows: 1, autoResize: false, "data-testid": testIds.instructionsInput }) }), _jsx("div", { children: _jsx(Button, { type: 'button', onClick: handleGenerate, disabled: isGenerating, "data-testid": testIds.generateButton, children: t('ai_rewrite_generate') }) })] }) }), _jsxs(Flex, { container: { direction: 'column', rowGap: 0.5 }, children: [_jsx(Text, { variant: 'h4', children: t('ai_rewrite_result_label') }), suggestionEditor ?? (_jsx(TextArea, { label: t('ai_rewrite_result_label'), labelHidden: true, value: suggestion ?? '', readOnly: true, disabled: !suggestion }))] })] }) }));
};
export default AIRewrite;
//# sourceMappingURL=AIRewrite.js.map