deleting questions and answers, selecting answers

SurveyFrontend/src/components/QuestionItem/QuestionItem.tsx

@@ -10,15 +10,18 @@ interface QuestionItemProps {
     initialTextQuestion?: string;
     valueQuestion: string;
     onChangeQuestion: (valueQuestion: string) => void;
+    onDeleteQuestion: (index: number) => void;
 }
 
 const QuestionItem: React.FC<QuestionItemProps> = ({indexQuestion, initialTextQuestion = `Вопрос ${indexQuestion}`,
-                                                       valueQuestion, onChangeQuestion}) => {
+                                                       valueQuestion, onChangeQuestion, onDeleteQuestion}) => {
     const [selectedType, setSelectedType] = useState<'single' | 'multiply'>('single');
     const [answerOption, setAnswerOption] = useState(['']);
     const [textQuestion, setTextQuestion] = useState(initialTextQuestion);
     const [isEditingQuestion, setIsEditingQuestion] = useState(false);
 
+    const [selectedAnswers, setSelectedAnswers] = useState<number[]>([]);
+
     const textareaQuestionRef = useRef<HTMLTextAreaElement>(null);
 
     const handleTypeChange = (type: 'single' | 'multiply') => {
@@ -65,43 +68,79 @@ const QuestionItem: React.FC<QuestionItemProps> = ({indexQuestion, initialTextQu
         setAnswerOption(newAnswerOption);
     }
 
+    const handleDeleteAnswer = (index: number) => {
+        const newAnswerOption = answerOption.filter((_, i) => i !== index);
+        setAnswerOption(newAnswerOption);
+        setSelectedAnswers(selectedAnswers.filter((i) => i !== index));
+    };
+
     useEffect(() => {
         setTextQuestion(valueQuestion);
     }, [valueQuestion]);
 
+    const handleDeleteQuestion = () => {
+        onDeleteQuestion(indexQuestion);
+    };
+
+    const toggleSelect = (index: number) => {
+        if (selectedType === 'single') {
+            setSelectedAnswers([index]);
+        } else {
+            setSelectedAnswers((prev) => {
+                if (prev.includes(index)) {
+                    return prev.filter((i) => i !== index);
+                } else {
+                    return [...prev, index];
+                }
+            });
+        }
+    };
+
     return (
         <div className={styles.questionCard}>
             <div className={styles.questionContainer}>
-                {isEditingQuestion ? (
-                    <textarea
-                        className={styles.questionTextarea}
-                        ref={textareaQuestionRef}
-                        value={textQuestion === initialTextQuestion ? '' : textQuestion}
-                        onChange={handleTextareaQuestionChange}
-                        onKeyDown={handleQuestionKeyDown}
-                        onBlur={handleQuestionBlur}
-                        placeholder={initialTextQuestion}
-                    />
-                ) : (
-                    <button className={styles.buttonQuestion} onClick={handleQuestionClick}>
-                        <h2 className={styles.textQuestion}>{textQuestion || initialTextQuestion}</h2>
-                    </button>
-                )}
+                <div className={styles.question}>
+                    {isEditingQuestion ? (
+                        <textarea
+                            className={styles.questionTextarea}
+                            ref={textareaQuestionRef}
+                            value={textQuestion === initialTextQuestion ? '' : textQuestion}
+                            onChange={handleTextareaQuestionChange}
+                            onKeyDown={handleQuestionKeyDown}
+                            onBlur={handleQuestionBlur}
+                            placeholder={initialTextQuestion}
+                        />
+                    ) : (
+                        <button className={styles.buttonQuestion} onClick={handleQuestionClick}>
+                            <h2 className={styles.textQuestion}>{textQuestion || initialTextQuestion}</h2>
+                        </button>
+                    )}
+                    <TypeDropdown selectedType={selectedType} onTypeChange={handleTypeChange}/>
+                </div>
+
                 {answerOption.map((answerText, index) => (
                     <AnswerOption
                         key={index}
                         selectedType={selectedType}
-                        index={index + 1} // Индекс ответа
+                        index={index + 1}
                         value={answerText}
                         onChange={(value) => handleAnswerChange(index, value)}
+                        onDelete={() => handleDeleteAnswer(index)}
+                        isSelected={selectedAnswers.includes(index)}
+                        toggleSelect={() => toggleSelect(index)}
                     />
                 ))}
 
-                <AddAnswerButton
-                    onClick={handleAddAnswer}
-                />
+                <div className={styles.questionActions}>
+                    <AddAnswerButton
+                        onClick={handleAddAnswer}
+                    />
+                    <button className={styles.deleteQuestionButton} onClick={handleDeleteQuestion}>
+                        Удалить{/**/}
+                        <img className={styles.basketImg} src='../../../public/deleteQuestion.svg' alt='deleteQuestion' />
+                    </button>
+                </div>
             </div>
-            <TypeDropdown selectedType={selectedType} onTypeChange={handleTypeChange}/>
         </div>
     );
 }