deleting questions and answers, selecting answers

SurveyFrontend/src/components/QuestionItem/QuestionItem.module.css

@@ -10,11 +10,20 @@
 }
 
 .questionContainer{
+    width: 100%;
     display: flex;
     flex-direction: column;
 }
 
+.question{
+    display: flex;
+    justify-content: space-between;
+    gap: 40px;
+}
+
 .questionTextarea{
+    width: 70%;
+    align-items: center;
     border: none;
     outline: none;
     resize: none;
@@ -24,6 +33,7 @@
 }
 
 .buttonQuestion{
+    align-items: center;
     border: none;
     outline: none;
     background-color: #ffffff;
@@ -37,4 +47,28 @@
     font-weight: 600;
     margin-bottom: 35px;
     text-align: start;
+    word-break: break-word;
+}
+
+.questionActions{
+    display: flex;
+    justify-content: space-between;
+}
+
+.deleteQuestionButton{
+    font-size: 18px;
+    font-weight: 500;
+    color: #EC221F;
+    border: none;
+    padding: 0;
+    align-items: center;
+    background-color: transparent;
+    display: flex;
+    gap: 3px;
+}
+
+.basketImg{
+    vertical-align: middle;
+    width: 24px;
+    color: #EC221F;
 }

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>
     );
 }