@tinyweb_dev/oe-exam-sdk 0.1.1 → 0.1.2

package/dist/components/questions/types/look-picture-fill-word-hint/index.js

@@ -1,2 +1 @@
-export * from './LookPictureFillWordHintCreator';
-export * from './LookPictureFillWordHintClient';
+export*from"./LookPictureFillWordHintCreator";export*from"./LookPictureFillWordHintClient";

package/dist/components/questions/types/look-picture-fill-word-hint/register.js

@@ -1,82 +1 @@
-import { LookPictureFillWordHint } from './LookPictureFillWordHintCreator';
-export const lookPictureFillWordHintRegistration = {
-    component: LookPictureFillWordHint,
-    transformInitialData: (initialData) => {
-        const content = initialData?.content;
-        const answer = initialData?.answer;
-        // Get hintLetters from various sources
-        const hintLettersFromGroup = initialData?.questionGroup?.payload?.hintLetters;
-        const hintLettersFromAnswer = answer?.hintLetters;
-        const hintLettersFallback = content?.hintLetters;
-        const hintLetters = hintLettersFromGroup || hintLettersFromAnswer || hintLettersFallback || [];
-        const apiPoints = initialData?.total_points
-            ? parseFloat(initialData.total_points)
-            : (initialData?.points || 1);
-        // PRIORITY 1: Store format - answer has subQuestions
-        if (answer?.subQuestions && answer.subQuestions.length > 0) {
-            return {
-                subQuestions: answer.subQuestions,
-                hintLetters: hintLetters.length > 0 ? hintLetters : answer.hintLetters || [],
-                caseSensitive: answer?.caseSensitive ?? false,
-                points: apiPoints,
-                explanation: answer?.explanation || initialData?.explanation || '',
-            };
-        }
-        // PRIORITY 2: API format - content has imageUrl/word
-        else if (content && (content.imageUrl !== undefined || content.word !== undefined)) {
-            return {
-                content: {
-                    imageUrl: content.imageUrl || '',
-                    word: content.word || '',
-                },
-                answer: {
-                    correctAnswer: answer?.correctAnswer || '',
-                    caseSensitive: answer?.caseSensitive ?? false,
-                    hintLetters,
-                    explanation: answer?.explanation || initialData?.explanation || '',
-                },
-                hintLetters,
-                caseSensitive: answer?.caseSensitive ?? false,
-                points: apiPoints,
-                explanation: answer?.explanation || initialData?.explanation || '',
-            };
-        }
-        // PRIORITY 3: Fallback
-        else {
-            return {
-                ...answer,
-                hintLetters,
-                caseSensitive: answer?.caseSensitive ?? false,
-                points: apiPoints,
-                explanation: answer?.explanation || initialData?.explanation || '',
-            };
-        }
-    },
-    getExtraProps: (ctx) => ({
-        groups: ctx.groups,
-        questionIndexInPart: ctx.questionIndexInPart,
-        partId: ctx.partId,
-        onUnsavedChangesChange: ctx.onUnsavedChangesChange,
-        validationRef: ctx.validationRef,
-    }),
-    wrapOnSave: (data, ctx) => ({
-        type: ctx.questionType,
-        content: ctx.state.content,
-        points: data?.points ?? ctx.state.points ?? 1,
-        level: ctx.state.level,
-        difficulty: ctx.state.difficulty,
-        skill: ctx.state.skill,
-        answer: data,
-        explanation: data?.explanation || '',
-    }),
-    wrapOnChange: (data, ctx) => ({
-        type: ctx.questionType,
-        content: ctx.state.content,
-        points: data?.points ?? ctx.state.points ?? 1,
-        level: ctx.state.level,
-        difficulty: ctx.state.difficulty,
-        skill: ctx.state.skill,
-        answer: data,
-        explanation: data?.explanation || '',
-    }),
-};
+import{LookPictureFillWordHint as t}from"./LookPictureFillWordHintCreator";export const lookPictureFillWordHintRegistration={component:t,transformInitialData:t=>{const e=t?.content,n=t?.answer,i=t?.questionGroup?.payload?.hintLetters,a=n?.hintLetters,s=e?.hintLetters,o=i||a||s||[],l=t?.total_points?parseFloat(t.total_points):t?.points||1;return n?.subQuestions&&n.subQuestions.length>0?{subQuestions:n.subQuestions,hintLetters:o.length>0?o:n.hintLetters||[],caseSensitive:n?.caseSensitive??!1,points:l,explanation:n?.explanation||t?.explanation||""}:!e||void 0===e.imageUrl&&void 0===e.word?{...n,hintLetters:o,caseSensitive:n?.caseSensitive??!1,points:l,explanation:n?.explanation||t?.explanation||""}:{content:{imageUrl:e.imageUrl||"",word:e.word||""},answer:{correctAnswer:n?.correctAnswer||"",caseSensitive:n?.caseSensitive??!1,hintLetters:o,explanation:n?.explanation||t?.explanation||""},hintLetters:o,caseSensitive:n?.caseSensitive??!1,points:l,explanation:n?.explanation||t?.explanation||""}},getExtraProps:t=>({groups:t.groups,questionIndexInPart:t.questionIndexInPart,partId:t.partId,onUnsavedChangesChange:t.onUnsavedChangesChange,validationRef:t.validationRef}),wrapOnSave:(t,e)=>({type:e.questionType,content:e.state.content,points:t?.points??e.state.points??1,level:e.state.level,difficulty:e.state.difficulty,skill:e.state.skill,answer:t,explanation:t?.explanation||""}),wrapOnChange:(t,e)=>({type:e.questionType,content:e.state.content,points:t?.points??e.state.points??1,level:e.state.level,difficulty:e.state.difficulty,skill:e.state.skill,answer:t,explanation:t?.explanation||""})};

package/dist/components/questions/types/look-picture-fill-word-hint/transform.js

@@ -1,29 +1 @@
-export const transformLookPictureFillWordHint = (question) => {
-    const answerData = question.answer;
-    if (!answerData?.subQuestions || answerData.subQuestions.length === 0) {
-        return { apiContent: {}, apiCorrectAnswer: {} };
-    }
-    const sq = answerData.subQuestions[0];
-    const apiContent = {
-        imageUrl: sq.imageUrl,
-        word: sq.word,
-    };
-    const groupNumber = sq.groupNumber || 1;
-    const hintLettersByGroup = answerData.hintLettersByGroup;
-    let hintLetters = [];
-    if (hintLettersByGroup && hintLettersByGroup[groupNumber]) {
-        hintLetters = hintLettersByGroup[groupNumber];
-    }
-    else if (answerData.hintLetters) {
-        hintLetters = answerData.hintLetters;
-    }
-    return {
-        apiContent,
-        apiCorrectAnswer: {
-            correctAnswer: sq.correctAnswer || '',
-            caseSensitive: answerData.caseSensitive || false,
-        },
-        hintLetters,
-        groupNumber,
-    };
-};
+export const transformLookPictureFillWordHint=e=>{const t=e.answer;if(!t?.subQuestions||0===t.subQuestions.length)return{apiContent:{},apiCorrectAnswer:{}};const r=t.subQuestions[0],n={imageUrl:r.imageUrl,word:r.word},s=r.groupNumber||1,o=t.hintLettersByGroup;let i=[];return o&&o[s]?i=o[s]:t.hintLetters&&(i=t.hintLetters),{apiContent:n,apiCorrectAnswer:{correctAnswer:r.correctAnswer||"",caseSensitive:t.caseSensitive||!1},hintLetters:i,groupNumber:s}};

package/dist/components/questions/types/match-by-writing-answer/MatchByWritingAnswerClient.js

@@ -1,38 +1 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Card, CardContent } from '../../../../components/ui/card';
-import { Input } from '../../../../components/ui/input';
-import { Label } from '../../../../components/ui/label';
-import { CheckCircle2, XCircle, BookOpen } from 'lucide-react';
-import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
-import { useState } from 'react';
-function OptionCard({ option }) {
-    const { previewUrl } = usePresignedFileUrl(option.imageUrl || '');
-    const displayUrl = previewUrl || option.imageUrl;
-    if (displayUrl) {
-        return (_jsxs("div", { className: "flex flex-col items-center gap-2 rounded-xl border border-gray-200 bg-white p-3 shadow-sm", children: [_jsx("div", { className: "relative h-24 w-24 overflow-hidden rounded-lg bg-gray-50", children: _jsx("img", { src: displayUrl, alt: option.answer, className: "h-full w-full object-contain" }) }), _jsx("span", { className: "text-sm font-semibold text-gray-700", children: option.answer }), option.content && (_jsx("span", { className: "text-xs text-gray-500 text-center line-clamp-2", children: option.content }))] }));
-    }
-    return (_jsxs("div", { className: "flex items-center gap-2.5 rounded-xl border border-gray-200 bg-white px-4 py-3 shadow-sm", children: [_jsx("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-teal-500 to-cyan-600 text-sm font-bold text-white shadow-sm", children: option.answer?.[0] ?? '?' }), _jsxs("div", { className: "min-w-0", children: [_jsx("span", { className: "block text-sm font-semibold text-gray-800", children: option.answer }), option.content && (_jsx("span", { className: "block truncate text-xs text-gray-500", children: option.content }))] })] }));
-}
-export function MatchByWritingAnswerClient({ questionData, onSubmit, isReviewMode = false, userAnswer, autoFillCorrectAnswers = false, explanation, }) {
-    const [answer, setAnswer] = useState(userAnswer || '');
-    const { previewUrl: questionImageUrl } = usePresignedFileUrl(questionData.imageUrl || '');
-    if (!questionData.question) {
-        return (_jsx(Card, { children: _jsx(CardContent, { className: "p-6", children: _jsx("p", { className: "text-gray-500", children: "Kh\u00F4ng c\u00F3 d\u1EEF li\u1EC7u c\u00E2u h\u1ECFi" }) }) }));
-    }
-    const isExample = questionData.isExample || false;
-    const displayedAnswer = autoFillCorrectAnswers || isExample
-        ? questionData.correctAnswer
-        : answer;
-    const isCorrect = isReviewMode && userAnswer !== undefined
-        ? userAnswer.trim().toLowerCase() === questionData.correctAnswer.trim().toLowerCase()
-        : undefined;
-    return (_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-teal-400 to-cyan-500" }), _jsxs(CardContent, { className: "p-6 space-y-6", children: [questionData.options && questionData.options.length > 0 && (_jsxs("div", { className: "rounded-xl border border-purple-200 bg-gradient-to-r from-purple-50 to-violet-50 p-4", children: [_jsx("p", { className: "mb-3 text-sm font-semibold text-purple-700", children: "C\u00E1c l\u1EF1a ch\u1ECDn:" }), _jsx("div", { className: `grid gap-3 ${questionData.options.some((o) => o.imageUrl) ? 'grid-cols-2 sm:grid-cols-3 md:grid-cols-4' : 'grid-cols-1 sm:grid-cols-2'}`, children: questionData.options.map((option, index) => (_jsx(OptionCard, { option: option }, index))) })] })), _jsxs("div", { className: "rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-5", children: [isExample && (_jsxs("div", { className: "mb-2 inline-flex items-center gap-1.5 rounded-full bg-amber-100 border border-amber-300 px-3 py-1", children: [_jsx(BookOpen, { className: "h-3.5 w-3.5 text-amber-600" }), _jsx("span", { className: "text-xs font-semibold text-amber-700 uppercase tracking-wide", children: "Example" })] })), _jsxs("div", { className: "flex items-center gap-4", children: [(questionImageUrl || questionData.imageUrl) ? (_jsx("div", { className: "relative h-20 w-20 flex-shrink-0 overflow-hidden rounded-lg border border-gray-200 bg-gray-50 shadow-sm", children: _jsx("img", { src: questionImageUrl || questionData.imageUrl, alt: questionData.question, className: "h-full w-full object-contain" }) })) : null, _jsxs("div", { className: "flex-1 space-y-2", children: [_jsx(Label, { className: "text-base font-semibold text-gray-800", children: questionData.question }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Input, { value: displayedAnswer, onChange: (e) => {
-                                                            setAnswer(e.target.value);
-                                                            onSubmit?.(e.target.value);
-                                                        }, placeholder: "Vi\u1EBFt \u0111\u00E1p \u00E1n...", disabled: isReviewMode || isExample, className: `max-w-xs border-2 text-lg font-medium ${isReviewMode
-                                                            ? isCorrect
-                                                                ? 'border-green-400 bg-green-50 text-green-700'
-                                                                : 'border-red-400 bg-red-50 text-red-700'
-                                                            : 'border-teal-300 focus:border-teal-500 focus:ring-teal-200'}` }), isReviewMode && isCorrect !== undefined && (_jsx("span", { className: "flex items-center gap-1", children: isCorrect ? (_jsx(CheckCircle2, { className: "h-5 w-5 text-green-500" })) : (_jsx(XCircle, { className: "h-5 w-5 text-red-500" })) }))] })] })] }), isReviewMode && isCorrect === false && (_jsxs("div", { className: "mt-3 flex items-center gap-2 rounded-lg bg-green-50 border border-green-200 px-4 py-2", children: [_jsx(CheckCircle2, { className: "h-4 w-4 text-green-600" }), _jsxs("span", { className: "text-sm text-green-700", children: ["\u0110\u00E1p \u00E1n \u0111\u00FAng: ", _jsx("strong", { children: questionData.correctAnswer })] })] })), autoFillCorrectAnswers && (_jsxs("div", { className: "mt-3 flex items-center gap-2 rounded-lg bg-teal-50 border border-teal-200 px-4 py-2", children: [_jsx(CheckCircle2, { className: "h-4 w-4 text-teal-600" }), _jsxs("span", { className: "text-sm text-teal-700", children: ["\u0110\u00E1p \u00E1n: ", _jsx("strong", { children: questionData.correctAnswer })] })] }))] }), explanation && isReviewMode && (_jsxs("div", { className: "rounded-xl border border-blue-200 bg-blue-50 p-4", children: [_jsx("p", { className: "text-sm font-semibold text-blue-800 mb-1", children: "Gi\u1EA3i th\u00EDch:" }), _jsx("p", { className: "text-sm text-blue-700", children: explanation })] }))] })] }));
-}
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{Card as t,CardContent as a}from"../../../../components/ui/card";import{Input as s}from"../../../../components/ui/input";import{Label as l}from"../../../../components/ui/label";import{CheckCircle2 as n,XCircle as i,BookOpen as o}from"lucide-react";import{usePresignedFileUrl as c}from"../../../../shared/lib/hooks";import{useState as d}from"react";function m({option:t}){const{previewUrl:a}=c(t.imageUrl||""),s=a||t.imageUrl;return r("div",s?{className:"flex flex-col items-center gap-2 rounded-xl border border-gray-200 bg-white p-3 shadow-sm",children:[e("div",{className:"relative h-24 w-24 overflow-hidden rounded-lg bg-gray-50",children:e("img",{src:s,alt:t.answer,className:"h-full w-full object-contain"})}),e("span",{className:"text-sm font-semibold text-gray-700",children:t.answer}),t.content&&e("span",{className:"text-xs text-gray-500 text-center line-clamp-2",children:t.content})]}:{className:"flex items-center gap-2.5 rounded-xl border border-gray-200 bg-white px-4 py-3 shadow-sm",children:[e("div",{className:"flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-teal-500 to-cyan-600 text-sm font-bold text-white shadow-sm",children:t.answer?.[0]??"?"}),r("div",{className:"min-w-0",children:[e("span",{className:"block text-sm font-semibold text-gray-800",children:t.answer}),t.content&&e("span",{className:"block truncate text-xs text-gray-500",children:t.content})]})]})}export function MatchByWritingAnswerClient({questionData:g,onSubmit:p,isReviewMode:h=!1,userAnswer:b,autoFillCorrectAnswers:x=!1,explanation:u}){const[f,w]=d(b||""),{previewUrl:N}=c(g.imageUrl||"");if(!g.question)return e(t,{children:e(a,{className:"p-6",children:e("p",{className:"text-gray-500",children:"Không có dữ liệu câu hỏi"})})});const v=g.isExample||!1,y=x||v?g.correctAnswer:f,U=h&&void 0!==b?b.trim().toLowerCase()===g.correctAnswer.trim().toLowerCase():void 0;return r(t,{className:"overflow-hidden border-0 bg-white shadow-lg",children:[e("div",{className:"h-1 bg-gradient-to-r from-teal-400 to-cyan-500"}),r(a,{className:"p-6 space-y-6",children:[g.options&&g.options.length>0&&r("div",{className:"rounded-xl border border-purple-200 bg-gradient-to-r from-purple-50 to-violet-50 p-4",children:[e("p",{className:"mb-3 text-sm font-semibold text-purple-700",children:"Các lựa chọn:"}),e("div",{className:"grid gap-3 "+(g.options.some(e=>e.imageUrl)?"grid-cols-2 sm:grid-cols-3 md:grid-cols-4":"grid-cols-1 sm:grid-cols-2"),children:g.options.map((r,t)=>e(m,{option:r},t))})]}),r("div",{className:"rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-5",children:[v&&r("div",{className:"mb-2 inline-flex items-center gap-1.5 rounded-full bg-amber-100 border border-amber-300 px-3 py-1",children:[e(o,{className:"h-3.5 w-3.5 text-amber-600"}),e("span",{className:"text-xs font-semibold text-amber-700 uppercase tracking-wide",children:"Example"})]}),r("div",{className:"flex items-center gap-4",children:[N||g.imageUrl?e("div",{className:"relative h-20 w-20 flex-shrink-0 overflow-hidden rounded-lg border border-gray-200 bg-gray-50 shadow-sm",children:e("img",{src:N||g.imageUrl,alt:g.question,className:"h-full w-full object-contain"})}):null,r("div",{className:"flex-1 space-y-2",children:[e(l,{className:"text-base font-semibold text-gray-800",children:g.question}),r("div",{className:"flex items-center gap-3",children:[e(s,{value:y,onChange:e=>{w(e.target.value),p?.(e.target.value)},placeholder:"Viết đáp án...",disabled:h||v,className:"max-w-xs border-2 text-lg font-medium "+(h?U?"border-green-400 bg-green-50 text-green-700":"border-red-400 bg-red-50 text-red-700":"border-teal-300 focus:border-teal-500 focus:ring-teal-200")}),h&&void 0!==U&&e("span",{className:"flex items-center gap-1",children:U?e(n,{className:"h-5 w-5 text-green-500"}):e(i,{className:"h-5 w-5 text-red-500"})})]})]})]}),h&&!1===U&&r("div",{className:"mt-3 flex items-center gap-2 rounded-lg bg-green-50 border border-green-200 px-4 py-2",children:[e(n,{className:"h-4 w-4 text-green-600"}),r("span",{className:"text-sm text-green-700",children:["Đáp án đúng: ",e("strong",{children:g.correctAnswer})]})]}),x&&r("div",{className:"mt-3 flex items-center gap-2 rounded-lg bg-teal-50 border border-teal-200 px-4 py-2",children:[e(n,{className:"h-4 w-4 text-teal-600"}),r("span",{className:"text-sm text-teal-700",children:["Đáp án: ",e("strong",{children:g.correctAnswer})]})]})]}),u&&h&&r("div",{className:"rounded-xl border border-blue-200 bg-blue-50 p-4",children:[e("p",{className:"text-sm font-semibold text-blue-800 mb-1",children:"Giải thích:"}),e("p",{className:"text-sm text-blue-700",children:u})]})]})]})}

package/dist/components/questions/types/match-by-writing-answer/MatchByWritingAnswerCreator.js

@@ -1,359 +1 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ImagePreview } from '../../../../components/ui/image-preview';
-import { useState, useRef, useEffect } from 'react';
-import { Button } from '../../../../components/ui/button';
-import { Label } from '../../../../components/ui/label';
-import { Input } from '../../../../components/ui/input';
-import { Textarea } from '../../../../components/ui/textarea';
-import { PointsInput } from '../../../../components/ui/points-input';
-import { Card, CardContent, CardHeader, CardTitle } from '../../../../components/ui/card';
-import { Pencil, Eye, ImageIcon, MessageSquare, HelpCircle, BookOpen, Grid3X3, Users } from 'lucide-react';
-import { FileUpload } from '../../../../components/ui/file-upload';
-import { Checkbox } from '../../../../components/ui/checkbox';
-import { MatchByWritingAnswerClient } from './MatchByWritingAnswerClient';
-import { MatchAnswerGroupCard } from '../../groups/MatchAnswerGroupCard';
-import { useDebouncedCallback, usePresignedFileUrl } from '../../../../shared/lib/hooks';
-import { useExamQuestionStore } from '../../../../shared/lib/stores/examQuestionStore';
-// Helper: Calculate group number for a question index based on groups config
-function getGroupNumberForIndex(questionIndex, groups) {
-    if (!groups || groups.length === 0) {
-        return 1;
-    }
-    let currentIndex = 0;
-    for (const group of groups) {
-        if (questionIndex < currentIndex + group.questionCount) {
-            return group.number;
-        }
-        currentIndex += group.questionCount;
-    }
-    return groups[groups.length - 1]?.number || 1;
-}
-function MatchByWritingAnswerContent({ initialData, onSave, onSaveToQuestionBank, onCancel, onChange, onUnsavedChangesChange, externalErrors, groups, groupConfig, questionConfig, viewMode, questionIndexInPart = 0, partId = '', validationRef, headerExtra, }) {
-    // Access exam question store for shared data
-    const setSharedPassageData = useExamQuestionStore((state) => state.setSharedPassageData);
-    const getSharedPassageData = useExamQuestionStore((state) => state.getSharedPassageData);
-    // Get current group number
-    const initialGroupNum = getGroupNumberForIndex(questionIndexInPart, groups);
-    // Per-question state
-    const [question, setQuestion] = useState(initialData?.question || '');
-    const [imageUrl, setImageUrl] = useState(initialData?.imageUrl || '');
-    const [correctAnswer, setCorrectAnswer] = useState(initialData?.correctAnswer || '');
-    const [points, setPoints] = useState(initialData?.points || 1);
-    const [isExample, setIsExample] = useState(initialData?.isExample || false);
-    const [groupNumber, setGroupNumber] = useState(initialData?.groupNumber || initialGroupNum);
-    const [explanation, setExplanation] = useState(initialData?.explanation || '');
-    const [askerName, setAskerName] = useState(initialData?.askerName || '');
-    const [answererName, setAnswererName] = useState(initialData?.answererName || '');
-    // Shared options state (stored via exam question store)
-    const [options, setOptions] = useState(() => {
-        // Priority 1: Check shared data from store
-        if (partId) {
-            const storedData = getSharedPassageData(partId, initialGroupNum);
-            if (storedData?.options && Array.isArray(storedData.options)) {
-                return storedData.options;
-            }
-        }
-        // Priority 2: From initialData
-        return initialData?.options || [];
-    });
-    // Group image URL state (shared across all questions in the group)
-    const [groupImageUrl, setGroupImageUrl] = useState(() => {
-        if (partId) {
-            const storedData = getSharedPassageData(partId, initialGroupNum);
-            if (storedData?.groupImageUrl) {
-                return storedData.groupImageUrl;
-            }
-        }
-        return initialData?.groupImageUrl || '';
-    });
-    const [groupImagePreviewUrl, setGroupImagePreviewUrl] = useState('');
-    // Group title state (shared across all questions in the group)
-    const [groupTitle, setGroupTitle] = useState(() => {
-        if (partId) {
-            const storedData = getSharedPassageData(partId, initialGroupNum);
-            if (storedData?.groupTitle) {
-                return storedData.groupTitle;
-            }
-        }
-        return initialData?.groupTitle || '';
-    });
-    // Whether to show shared group fields
-    const showGroupImageUrl = groupConfig?.includes('groupImageUrl') ?? false;
-    const showGroupTitle = groupConfig?.includes('groupTitle') ?? false;
-    // UI State
-    const [isClientMode, setIsClientMode] = useState(false);
-    const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
-    const [imagePreviewUrl, setImagePreviewUrl] = useState('');
-    // Inline validation errors
-    const [validationErrors, setValidationErrors] = useState({});
-    // Refs
-    const savedStateRef = useRef('');
-    const previousInitialDataRef = useRef(initialData);
-    const previousQuestionIndexRef = useRef(questionIndexInPart);
-    const isInitializingRef = useRef(false);
-    const hasInitializedRef = useRef(false);
-    const onChangeRef = useRef(onChange);
-    const previousPayloadRef = useRef('');
-    const onUnsavedChangesChangeRef = useRef(onUnsavedChangesChange);
-    const currentGroupNumber = groupNumber || 1;
-    // Determine which per-question fields to show based on questionConfig
-    // Default: show all fields if questionConfig is not provided
-    const showQuestionField = !questionConfig || questionConfig.includes('question');
-    const showImageUrlField = !questionConfig || questionConfig.includes('imageUrl');
-    const showAnswerField = !questionConfig || questionConfig.includes('answer');
-    // Presigned URL for per-question image preview
-    const { previewUrl: generatedPreviewUrl } = usePresignedFileUrl(imageUrl);
-    const displayPreviewUrl = imagePreviewUrl || generatedPreviewUrl || '';
-    useEffect(() => { onUnsavedChangesChangeRef.current = onUnsavedChangesChange; }, [onUnsavedChangesChange]);
-    useEffect(() => { onChangeRef.current = onChange; }, [onChange]);
-    const debouncedOnChange = useDebouncedCallback((data) => {
-        onChangeRef.current?.(data);
-    }, 300);
-    // Helper to get current state string
-    const getCurrentStateString = () => {
-        return JSON.stringify({
-            question,
-            imageUrl,
-            correctAnswer,
-            points,
-            isExample,
-            askerName,
-            answererName,
-            options,
-            groupImageUrl,
-            groupTitle,
-        });
-    };
-    // Initialize saved state when questionIndexInPart changes
-    useEffect(() => {
-        if (isInitializingRef.current)
-            return;
-        const timer = setTimeout(() => {
-            savedStateRef.current = getCurrentStateString();
-            setHasUnsavedChanges(false);
-        }, 150);
-        return () => clearTimeout(timer);
-    }, [questionIndexInPart]);
-    // Detect unsaved changes
-    useEffect(() => {
-        if (isInitializingRef.current)
-            return;
-        if (!savedStateRef.current)
-            return;
-        const currentState = getCurrentStateString();
-        const hasChanges = currentState !== savedStateRef.current;
-        if (hasChanges !== hasUnsavedChanges) {
-            setHasUnsavedChanges(hasChanges);
-            onUnsavedChangesChangeRef.current?.(hasChanges);
-        }
-    }, [question, imageUrl, correctAnswer, points, isExample, askerName, answererName, options, groupImageUrl, groupTitle, hasUnsavedChanges]);
-    // Expose validation function via ref
-    useEffect(() => {
-        if (validationRef) {
-            validationRef.current = {
-                triggerValidation: async () => {
-                    const errors = {};
-                    let isValid = true;
-                    if (showQuestionField && (!question || question.trim() === '')) {
-                        errors.question = 'Vui lòng nhập tên/câu hỏi';
-                        isValid = false;
-                    }
-                    if (showAnswerField && (!correctAnswer || correctAnswer.trim() === '')) {
-                        errors.correctAnswer = 'Vui lòng nhập đáp án';
-                        isValid = false;
-                    }
-                    setValidationErrors(errors);
-                    return isValid;
-                },
-                getFormData: () => ({
-                    question,
-                    imageUrl,
-                    correctAnswer,
-                    points,
-                    groupNumber: currentGroupNumber,
-                    isExample,
-                    askerName,
-                    answererName,
-                    options,
-                    groupImageUrl,
-                    groupTitle,
-                    explanation,
-                    groups,
-                }),
-            };
-        }
-    }, [validationRef, question, imageUrl, correctAnswer, points, currentGroupNumber, isExample, askerName, answererName, options, groupImageUrl, groupTitle, explanation, groups]);
-    // Sync from initialData when navigation or first init
-    useEffect(() => {
-        const questionIndexChanged = questionIndexInPart !== previousQuestionIndexRef.current;
-        const hasValidInitialData = !!initialData?.question;
-        const shouldSyncForFirstInit = !hasInitializedRef.current && hasValidInitialData;
-        const shouldSyncForNavigation = questionIndexChanged;
-        if (!shouldSyncForFirstInit && !shouldSyncForNavigation)
-            return;
-        isInitializingRef.current = true;
-        previousInitialDataRef.current = initialData;
-        previousQuestionIndexRef.current = questionIndexInPart;
-        hasInitializedRef.current = true;
-        const groupNum = getGroupNumberForIndex(questionIndexInPart, groups);
-        // Set per-question state
-        setQuestion(initialData?.question || '');
-        setImageUrl(initialData?.imageUrl || '');
-        setCorrectAnswer(initialData?.correctAnswer || '');
-        setPoints(initialData?.points || 1);
-        setIsExample(initialData?.isExample || false);
-        setGroupNumber(groupNum);
-        setExplanation(initialData?.explanation || '');
-        setAskerName(initialData?.askerName || '');
-        setAnswererName(initialData?.answererName || '');
-        // Handle shared options, groupImageUrl & groupTitle
-        let sharedOptions = [];
-        let sharedGroupImageUrl = '';
-        let sharedGroupTitle = '';
-        if (partId) {
-            const storedData = getSharedPassageData(partId, groupNum);
-            if (storedData?.options && Array.isArray(storedData.options)) {
-                sharedOptions = storedData.options;
-                sharedGroupImageUrl = storedData?.groupImageUrl || '';
-                sharedGroupTitle = storedData?.groupTitle || '';
-            }
-            else {
-                sharedOptions = initialData?.options || [];
-                sharedGroupImageUrl = initialData?.groupImageUrl || '';
-                sharedGroupTitle = initialData?.groupTitle || '';
-                if (sharedOptions.length > 0 || sharedGroupImageUrl || sharedGroupTitle) {
-                    setSharedPassageData(partId, groupNum, { options: sharedOptions, groupImageUrl: sharedGroupImageUrl, groupTitle: sharedGroupTitle });
-                }
-            }
-        }
-        else {
-            sharedOptions = initialData?.options || [];
-            sharedGroupImageUrl = initialData?.groupImageUrl || '';
-            sharedGroupTitle = initialData?.groupTitle || '';
-        }
-        setOptions(sharedOptions);
-        setGroupImageUrl(sharedGroupImageUrl);
-        setGroupTitle(sharedGroupTitle);
-        setTimeout(() => { isInitializingRef.current = false; }, 100);
-    }, [initialData, groups, questionIndexInPart, partId, getSharedPassageData, setSharedPassageData]);
-    // Call onChange when data changes
-    useEffect(() => {
-        if (isInitializingRef.current)
-            return;
-        const payload = {
-            question,
-            imageUrl,
-            correctAnswer,
-            points: points || 1,
-            groupNumber: currentGroupNumber,
-            isExample,
-            askerName,
-            answererName,
-            options,
-            groupImageUrl,
-            groupTitle,
-            explanation,
-            groups,
-        };
-        const payloadString = JSON.stringify(payload);
-        if (previousPayloadRef.current !== payloadString) {
-            previousPayloadRef.current = payloadString;
-            // Save shared data to store
-            if (partId) {
-                setSharedPassageData(partId, currentGroupNumber, { options, groupImageUrl, groupTitle });
-            }
-            debouncedOnChange(payload);
-        }
-    }, [question, imageUrl, correctAnswer, points, currentGroupNumber, isExample, askerName, answererName, options, groupImageUrl, groupTitle, explanation, groups, partId, setSharedPassageData, debouncedOnChange]);
-    // Update option
-    const updateOption = (index, field, value) => {
-        setOptions((prev) => {
-            const updated = [...prev];
-            updated[index] = { ...updated[index], [field]: value };
-            return updated;
-        });
-    };
-    // Add option
-    const addOption = () => {
-        const nextNumber = String(options.length + 1); // 1, 2, 3...
-        setOptions((prev) => [...prev, { answer: '', content: '', imageUrl: '' }]);
-    };
-    // Remove option
-    const removeOption = (index) => {
-        setOptions((prev) => prev.filter((_, i) => i !== index));
-    };
-    // Validate all fields
-    const validate = () => {
-        const errors = {};
-        let isValid = true;
-        if (showQuestionField && (!question || question.trim() === '')) {
-            errors.question = 'Vui lòng nhập tên/câu hỏi';
-            isValid = false;
-        }
-        if (showAnswerField && (!correctAnswer || correctAnswer.trim() === '')) {
-            errors.correctAnswer = 'Vui lòng nhập đáp án';
-            isValid = false;
-        }
-        setValidationErrors(errors);
-        return isValid;
-    };
-    // Handle save
-    const handleSave = () => {
-        if (!validate())
-            return;
-        const payload = {
-            question,
-            imageUrl,
-            correctAnswer,
-            points: points || 1,
-            groupNumber: currentGroupNumber,
-            isExample,
-            askerName,
-            answererName,
-            options,
-            groupImageUrl,
-            groupTitle,
-            explanation,
-            groups,
-        };
-        savedStateRef.current = getCurrentStateString();
-        setHasUnsavedChanges(false);
-        onSave?.(payload);
-    };
-    // Client mode preview
-    if (isClientMode) {
-        const questionData = {
-            question,
-            imageUrl: displayPreviewUrl || imageUrl,
-            correctAnswer,
-            points,
-            groupNumber: currentGroupNumber,
-            isExample,
-            options,
-        };
-        return (_jsxs("div", { className: "space-y-4", children: [_jsx(Card, { children: _jsx(CardHeader, { children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx(CardTitle, { children: "Match by Writing Answer (Preview)" }), _jsx("p", { className: "mt-1 text-sm text-gray-500", children: "Ch\u1EBF \u0111\u1ED9 xem tr\u01B0\u1EDBc - Hi\u1EC3n th\u1ECB \u0111\u00E1p \u00E1n \u0111\u00FAng" })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(false), children: [_jsx(Pencil, { className: "mr-2 h-4 w-4" }), "Quay l\u1EA1i Edit Mode"] })] }) }) }), _jsx(MatchByWritingAnswerClient, { questionData: questionData, isReviewMode: true, autoFillCorrectAnswers: true, explanation: explanation })] }));
-    }
-    // Creator UI
-    return (_jsxs("div", { className: "space-y-4", children: [groups && groups.length > 0 && (_jsx(MatchAnswerGroupCard, { currentGroupNumber: currentGroupNumber, groupTitle: groupTitle, groupImageUrl: groupImageUrl, groupImagePreviewUrl: groupImagePreviewUrl, options: options, groupConfig: groupConfig, showGroupTitle: showGroupTitle, showGroupImageUrl: showGroupImageUrl, onGroupTitleChange: setGroupTitle, onGroupImageChange: setGroupImageUrl, onGroupImagePreviewUrlChange: setGroupImagePreviewUrl, onUpdateOption: updateOption, onRemoveOption: removeOption, onAddOption: addOption })), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-blue-100/50", children: [_jsx(CardHeader, { className: "px-4 py-3", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-blue-600 shadow-sm", children: _jsx(Grid3X3, { className: "h-4 w-4 text-white" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-base font-bold text-gray-900", children: "Gh\u00E9p \u0111\u00E1p \u00E1n b\u1EB1ng c\u00E1ch vi\u1EBFt" }), _jsx("p", { className: "text-xs text-gray-500", children: "Nh\u00ECn h\u00ECnh v\u00E0 vi\u1EBFt \u0111\u00E1p \u00E1n t\u01B0\u01A1ng \u1EE9ng" })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [headerExtra, _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(true), disabled: !question, className: "gap-2 border-teal-200 text-teal-600 hover:bg-teal-50 hover:text-teal-700", children: [_jsx(Eye, { className: "h-4 w-4" }), "Xem tr\u01B0\u1EDBc"] })] })] }) }), _jsxs(CardContent, { className: "space-y-4 px-4 pb-4", children: [_jsxs("div", { className: "flex items-center gap-6", children: [_jsx(PointsInput, { value: points || 1, onChange: (e) => setPoints(parseFloat(e.target.value) || 1) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "isExample", checked: isExample || false, onCheckedChange: (checked) => setIsExample(!!checked) }), _jsx(Label, { htmlFor: "isExample", className: "flex items-center gap-1.5 cursor-pointer text-sm font-medium text-gray-700", children: "\u0110\u00E1nh d\u1EA5u l\u00E0 c\u00E2u h\u1ECFi Example" })] })] }), viewMode === 'CONVERSATION' && (_jsxs("div", { className: "space-y-3", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(Users, { className: "h-4 w-4 text-indigo-500" }), "H\u1ED9i tho\u1EA1i ", _jsx("span", { className: "text-sm font-normal text-gray-500", children: "(tu\u1EF3 ch\u1ECDn - d\u00F9ng cho c\u00E2u h\u1ECFi d\u1EA1ng h\u1ED9i tho\u1EA1i)" })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4 rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "askerName", className: "text-sm font-medium text-gray-600", children: "T\u00EAn ng\u01B0\u1EDDi h\u1ECFi" }), _jsx(Input, { id: "askerName", value: askerName, onChange: (e) => setAskerName(e.target.value), placeholder: "VD: John, Mary, Teacher...", className: "border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200" })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "answererName", className: "text-sm font-medium text-gray-600", children: "T\u00EAn ng\u01B0\u1EDDi tr\u1EA3 l\u1EDDi" }), _jsx(Input, { id: "answererName", value: answererName, onChange: (e) => setAnswererName(e.target.value), placeholder: "VD: Tom, Anna, Student...", className: "border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200" })] })] })] })), showQuestionField && (_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: "question", className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(MessageSquare, { className: "h-4 w-4 text-teal-500" }), "T\u00EAn / C\u00E2u h\u1ECFi ", _jsx("span", { className: "text-xs font-normal text-gray-500", children: "(t\u00F9y ch\u1ECDn)" })] }), _jsx(Input, { id: "question", value: question, onChange: (e) => {
-                                            setQuestion(e.target.value);
-                                            if (validationErrors.question) {
-                                                setValidationErrors((prev) => ({ ...prev, question: undefined }));
-                                            }
-                                        }, placeholder: "Nh\u1EADp t\u00EAn ho\u1EB7c c\u00E2u h\u1ECFi... (vd: Mum, Dad, Julia)", className: `border-gray-200 bg-white transition-all focus:border-teal-300 focus:ring-teal-200 ${validationErrors.question ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}` }), validationErrors.question && (_jsx("p", { className: "text-sm text-red-600", children: validationErrors.question }))] })), showImageUrlField && (_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(ImageIcon, { className: "h-4 w-4 text-teal-500" }), "H\u00ECnh \u1EA3nh c\u00E2u h\u1ECFi ", _jsx("span", { className: "text-xs font-normal text-gray-500", children: "(t\u00F9y ch\u1ECDn)" })] }), _jsx(FileUpload, { id: "question-image", label: "", accept: "image/*", value: imageUrl || '', onChange: (url) => {
-                                            setImageUrl(url);
-                                            if (validationErrors.imageUrl) {
-                                                setValidationErrors((prev) => ({ ...prev, imageUrl: undefined }));
-                                            }
-                                        }, onPresignedUrlChange: setImagePreviewUrl, maxSize: 5, placeholder: "Upload \u1EA3nh ho\u1EB7c paste URL", autoUpload: true, prefix: "questions" }), displayPreviewUrl && (_jsx(ImagePreview, { src: displayPreviewUrl, alt: "Preview", className: "mt-2 h-48 w-full max-w-md rounded-lg border border-gray-200" }))] })), showAnswerField && (_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: "correctAnswer", className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(HelpCircle, { className: "h-4 w-4 text-green-500" }), "\u0110\u00E1p \u00E1n \u0111\u00FAng ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsxs("select", { id: "correctAnswer", value: correctAnswer, onChange: (e) => {
-                                            setCorrectAnswer(e.target.value);
-                                            if (validationErrors.correctAnswer) {
-                                                setValidationErrors((prev) => ({ ...prev, correctAnswer: undefined }));
-                                            }
-                                        }, className: `flex h-10 w-full rounded-md border px-3 py-2 text-sm bg-white transition-all focus:outline-none focus:ring-2 focus:ring-offset-0 ${validationErrors.correctAnswer ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : 'border-gray-200 focus:border-green-300 focus:ring-green-200'}`, children: [_jsx("option", { value: "", children: "-- Ch\u1ECDn \u0111\u00E1p \u00E1n \u0111\u00FAng --" }), options
-                                                .filter((opt) => opt.answer && opt.answer.trim() !== '')
-                                                .map((opt, idx) => (_jsx("option", { value: opt.answer, children: opt.answer }, idx)))] }), validationErrors.correctAnswer && (_jsx("p", { className: "text-sm text-red-600", children: validationErrors.correctAnswer }))] })), externalErrors && externalErrors.length > 0 && (_jsxs("div", { className: "flex items-start gap-3 rounded-xl border border-red-200 bg-gradient-to-r from-red-50 to-rose-50 p-4", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-red-100", children: _jsx("span", { className: "text-lg", children: "\u274C" }) }), _jsxs("div", { className: "text-sm", children: [_jsx("p", { className: "font-semibold text-red-800", children: "L\u1ED7i:" }), _jsx("ul", { className: "mt-1 list-inside list-disc text-red-700", children: externalErrors.map((error, index) => (_jsx("li", { children: error }, index))) })] })] }))] })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-amber-100/50", children: [_jsx(CardHeader, { className: "px-4 py-3", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-amber-500 to-orange-500 shadow-sm", children: _jsx(BookOpen, { className: "h-3.5 w-3.5 text-white" }) }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CardTitle, { className: "text-base font-semibold text-gray-800", children: "Gi\u1EA3i th\u00EDch" }), _jsx("span", { className: "inline-flex items-center rounded-full border border-amber-200 bg-amber-50 px-2.5 py-0.5 text-xs font-medium text-amber-600", children: "Kh\u00F4ng b\u1EAFt bu\u1ED9c" })] }), _jsx("p", { className: "text-xs text-gray-500 mt-0.5", children: "Gi\u1EA3i th\u00EDch cho \u0111\u00E1p \u00E1n \u0111\u00FAng \u2014 hi\u1EC3n th\u1ECB sau khi h\u1ECDc sinh ho\u00E0n th\u00E0nh c\u00E2u h\u1ECFi" })] })] }) }), _jsx(CardContent, { className: "px-4 pb-4", children: _jsx(Textarea, { id: "explanation", value: explanation, onChange: (e) => setExplanation(e.target.value), placeholder: "VD: C\u00E2u tr\u1EA3 l\u1EDDi \u0111\u00FAng l\u00E0... v\u00EC...", rows: 3, className: "min-h-[80px] border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200 resize-none" }) })] })] }));
-}
-export function MatchByWritingAnswerCreator(props) {
-    return _jsx(MatchByWritingAnswerContent, { ...props });
-}
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{ImagePreview as t}from"../../../../components/ui/image-preview";import{useState as n,useRef as a,useEffect as i}from"react";import{Button as s}from"../../../../components/ui/button";import{Label as o}from"../../../../components/ui/label";import{Input as l}from"../../../../components/ui/input";import{Textarea as c}from"../../../../components/ui/textarea";import{PointsInput as m}from"../../../../components/ui/points-input";import{Card as d,CardContent as u,CardHeader as g,CardTitle as p}from"../../../../components/ui/card";import{Pencil as h,Eye as x,ImageIcon as f,MessageSquare as N,HelpCircle as b,BookOpen as w,Grid3X3 as v,Users as y}from"lucide-react";import{FileUpload as C}from"../../../../components/ui/file-upload";import{Checkbox as U}from"../../../../components/ui/checkbox";import{MatchByWritingAnswerClient as A}from"./MatchByWritingAnswerClient";import{MatchAnswerGroupCard as T}from"../../groups/MatchAnswerGroupCard";import{useDebouncedCallback as q,usePresignedFileUrl as I}from"../../../../shared/lib/hooks";import{useExamQuestionStore as k}from"../../../../shared/lib/stores/examQuestionStore";function E(e,r){if(!r||0===r.length)return 1;let t=0;for(const n of r){if(e<t+n.questionCount)return n.number;t+=n.questionCount}return r[r.length-1]?.number||1}function S({initialData:S,onSave:G,onSaveToQuestionBank:D,onCancel:M,onChange:j,onUnsavedChangesChange:F,externalErrors:P,groups:O,groupConfig:V,questionConfig:R,viewMode:z,questionIndexInPart:J=0,partId:B="",validationRef:H,headerExtra:Q}){const W=k(e=>e.setSharedPassageData),L=k(e=>e.getSharedPassageData),K=E(J,O),[X,Y]=n(S?.question||""),[Z,$]=n(S?.imageUrl||""),[_,ee]=n(S?.correctAnswer||""),[re,te]=n(S?.points||1),[ne,ae]=n(S?.isExample||!1),[ie,se]=n(S?.groupNumber||K),[oe,le]=n(S?.explanation||""),[ce,me]=n(S?.askerName||""),[de,ue]=n(S?.answererName||""),[ge,pe]=n(()=>{if(B){const e=L(B,K);if(e?.options&&Array.isArray(e.options))return e.options}return S?.options||[]}),[he,xe]=n(()=>{if(B){const e=L(B,K);if(e?.groupImageUrl)return e.groupImageUrl}return S?.groupImageUrl||""}),[fe,Ne]=n(""),[be,we]=n(()=>{if(B){const e=L(B,K);if(e?.groupTitle)return e.groupTitle}return S?.groupTitle||""}),ve=V?.includes("groupImageUrl")??!1,ye=V?.includes("groupTitle")??!1,[Ce,Ue]=n(!1),[Ae,Te]=n(!1),[qe,Ie]=n(""),[ke,Ee]=n({}),Se=a(""),Ge=a(S),De=a(J),Me=a(!1),je=a(!1),Fe=a(j),Pe=a(""),Oe=a(F),Ve=ie||1,Re=!R||R.includes("question"),ze=!R||R.includes("imageUrl"),Je=!R||R.includes("answer"),{previewUrl:Be}=I(Z),He=qe||Be||"";i(()=>{Oe.current=F},[F]),i(()=>{Fe.current=j},[j]);const Qe=q(e=>{Fe.current?.(e)},300),We=()=>JSON.stringify({question:X,imageUrl:Z,correctAnswer:_,points:re,isExample:ne,askerName:ce,answererName:de,options:ge,groupImageUrl:he,groupTitle:be});i(()=>{if(Me.current)return;const e=setTimeout(()=>{Se.current=We(),Te(!1)},150);return()=>clearTimeout(e)},[J]),i(()=>{if(Me.current)return;if(!Se.current)return;const e=We()!==Se.current;e!==Ae&&(Te(e),Oe.current?.(e))},[X,Z,_,re,ne,ce,de,ge,he,be,Ae]),i(()=>{H&&(H.current={triggerValidation:async()=>{const e={};let r=!0;return!Re||X&&""!==X.trim()||(e.question="Vui lòng nhập tên/câu hỏi",r=!1),!Je||_&&""!==_.trim()||(e.correctAnswer="Vui lòng nhập đáp án",r=!1),Ee(e),r},getFormData:()=>({question:X,imageUrl:Z,correctAnswer:_,points:re,groupNumber:Ve,isExample:ne,askerName:ce,answererName:de,options:ge,groupImageUrl:he,groupTitle:be,explanation:oe,groups:O})})},[H,X,Z,_,re,Ve,ne,ce,de,ge,he,be,oe,O]),i(()=>{const e=J!==De.current,r=!!S?.question;if(!(!je.current&&r)&&!e)return;Me.current=!0,Ge.current=S,De.current=J,je.current=!0;const t=E(J,O);Y(S?.question||""),$(S?.imageUrl||""),ee(S?.correctAnswer||""),te(S?.points||1),ae(S?.isExample||!1),se(t),le(S?.explanation||""),me(S?.askerName||""),ue(S?.answererName||"");let n=[],a="",i="";if(B){const e=L(B,t);e?.options&&Array.isArray(e.options)?(n=e.options,a=e?.groupImageUrl||"",i=e?.groupTitle||""):(n=S?.options||[],a=S?.groupImageUrl||"",i=S?.groupTitle||"",(n.length>0||a||i)&&W(B,t,{options:n,groupImageUrl:a,groupTitle:i}))}else n=S?.options||[],a=S?.groupImageUrl||"",i=S?.groupTitle||"";pe(n),xe(a),we(i),setTimeout(()=>{Me.current=!1},100)},[S,O,J,B,L,W]),i(()=>{if(Me.current)return;const e={question:X,imageUrl:Z,correctAnswer:_,points:re||1,groupNumber:Ve,isExample:ne,askerName:ce,answererName:de,options:ge,groupImageUrl:he,groupTitle:be,explanation:oe,groups:O},r=JSON.stringify(e);Pe.current!==r&&(Pe.current=r,B&&W(B,Ve,{options:ge,groupImageUrl:he,groupTitle:be}),Qe(e))},[X,Z,_,re,Ve,ne,ce,de,ge,he,be,oe,O,B,W,Qe]);if(Ce){const t={question:X,imageUrl:He||Z,correctAnswer:_,points:re,groupNumber:Ve,isExample:ne,options:ge};return r("div",{className:"space-y-4",children:[e(d,{children:e(g,{children:r("div",{className:"flex items-center justify-between",children:[r("div",{children:[e(p,{children:"Match by Writing Answer (Preview)"}),e("p",{className:"mt-1 text-sm text-gray-500",children:"Chế độ xem trước - Hiển thị đáp án đúng"})]}),r(s,{variant:"outline",size:"sm",onClick:()=>Ue(!1),children:[e(h,{className:"mr-2 h-4 w-4"}),"Quay lại Edit Mode"]})]})})}),e(A,{questionData:t,isReviewMode:!0,autoFillCorrectAnswers:!0,explanation:oe})]})}return r("div",{className:"space-y-4",children:[O&&O.length>0&&e(T,{currentGroupNumber:Ve,groupTitle:be,groupImageUrl:he,groupImagePreviewUrl:fe,options:ge,groupConfig:V,showGroupTitle:ye,showGroupImageUrl:ve,onGroupTitleChange:we,onGroupImageChange:xe,onGroupImagePreviewUrlChange:Ne,onUpdateOption:(e,r,t)=>{pe(n=>{const a=[...n];return a[e]={...a[e],[r]:t},a})},onRemoveOption:e=>{pe(r=>r.filter((r,t)=>t!==e))},onAddOption:()=>{String(ge.length+1);pe(e=>[...e,{answer:"",content:"",imageUrl:""}])}}),r(d,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-blue-100/50",children:[e(g,{className:"px-4 py-3",children:r("div",{className:"flex items-center justify-between",children:[r("div",{className:"flex items-center gap-2",children:[e("div",{className:"flex h-8 w-8 items-center justify-center rounded-lg bg-blue-600 shadow-sm",children:e(v,{className:"h-4 w-4 text-white"})}),r("div",{children:[e(p,{className:"text-base font-bold text-gray-900",children:"Ghép đáp án bằng cách viết"}),e("p",{className:"text-xs text-gray-500",children:"Nhìn hình và viết đáp án tương ứng"})]})]}),r("div",{className:"flex items-center gap-2",children:[Q,r(s,{variant:"outline",size:"sm",onClick:()=>Ue(!0),disabled:!X,className:"gap-2 border-teal-200 text-teal-600 hover:bg-teal-50 hover:text-teal-700",children:[e(x,{className:"h-4 w-4"}),"Xem trước"]})]})]})}),r(u,{className:"space-y-4 px-4 pb-4",children:[r("div",{className:"flex items-center gap-6",children:[e(m,{value:re||1,onChange:e=>te(parseFloat(e.target.value)||1)}),r("div",{className:"flex items-center gap-2",children:[e(U,{id:"isExample",checked:ne||!1,onCheckedChange:e=>ae(!!e)}),e(o,{htmlFor:"isExample",className:"flex items-center gap-1.5 cursor-pointer text-sm font-medium text-gray-700",children:"Đánh dấu là câu hỏi Example"})]})]}),"CONVERSATION"===z&&r("div",{className:"space-y-3",children:[r(o,{className:"flex items-center gap-2 text-base font-semibold text-gray-800",children:[e(y,{className:"h-4 w-4 text-indigo-500"}),"Hội thoại ",e("span",{className:"text-sm font-normal text-gray-500",children:"(tuỳ chọn - dùng cho câu hỏi dạng hội thoại)"})]}),r("div",{className:"grid grid-cols-2 gap-4 rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4",children:[r("div",{className:"space-y-1.5",children:[e(o,{htmlFor:"askerName",className:"text-sm font-medium text-gray-600",children:"Tên người hỏi"}),e(l,{id:"askerName",value:ce,onChange:e=>me(e.target.value),placeholder:"VD: John, Mary, Teacher...",className:"border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200"})]}),r("div",{className:"space-y-1.5",children:[e(o,{htmlFor:"answererName",className:"text-sm font-medium text-gray-600",children:"Tên người trả lời"}),e(l,{id:"answererName",value:de,onChange:e=>ue(e.target.value),placeholder:"VD: Tom, Anna, Student...",className:"border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200"})]})]})]}),Re&&r("div",{className:"space-y-2",children:[r(o,{htmlFor:"question",className:"flex items-center gap-2 text-base font-semibold text-gray-800",children:[e(N,{className:"h-4 w-4 text-teal-500"}),"Tên / Câu hỏi ",e("span",{className:"text-xs font-normal text-gray-500",children:"(tùy chọn)"})]}),e(l,{id:"question",value:X,onChange:e=>{Y(e.target.value),ke.question&&Ee(e=>({...e,question:void 0}))},placeholder:"Nhập tên hoặc câu hỏi... (vd: Mum, Dad, Julia)",className:"border-gray-200 bg-white transition-all focus:border-teal-300 focus:ring-teal-200 "+(ke.question?"border-red-400 focus:border-red-500 focus:ring-red-200":"")}),ke.question&&e("p",{className:"text-sm text-red-600",children:ke.question})]}),ze&&r("div",{className:"space-y-2",children:[r(o,{className:"flex items-center gap-2 text-base font-semibold text-gray-800",children:[e(f,{className:"h-4 w-4 text-teal-500"}),"Hình ảnh câu hỏi ",e("span",{className:"text-xs font-normal text-gray-500",children:"(tùy chọn)"})]}),e(C,{id:"question-image",label:"",accept:"image/*",value:Z||"",onChange:e=>{$(e),ke.imageUrl&&Ee(e=>({...e,imageUrl:void 0}))},onPresignedUrlChange:Ie,maxSize:5,placeholder:"Upload ảnh hoặc paste URL",autoUpload:!0,prefix:"questions"}),He&&e(t,{src:He,alt:"Preview",className:"mt-2 h-48 w-full max-w-md rounded-lg border border-gray-200"})]}),Je&&r("div",{className:"space-y-2",children:[r(o,{htmlFor:"correctAnswer",className:"flex items-center gap-2 text-base font-semibold text-gray-800",children:[e(b,{className:"h-4 w-4 text-green-500"}),"Đáp án đúng ",e("span",{className:"text-red-500",children:"*"})]}),r("select",{id:"correctAnswer",value:_,onChange:e=>{ee(e.target.value),ke.correctAnswer&&Ee(e=>({...e,correctAnswer:void 0}))},className:"flex h-10 w-full rounded-md border px-3 py-2 text-sm bg-white transition-all focus:outline-none focus:ring-2 focus:ring-offset-0 "+(ke.correctAnswer?"border-red-400 focus:border-red-500 focus:ring-red-200":"border-gray-200 focus:border-green-300 focus:ring-green-200"),children:[e("option",{value:"",children:"-- Chọn đáp án đúng --"}),ge.filter(e=>e.answer&&""!==e.answer.trim()).map((r,t)=>e("option",{value:r.answer,children:r.answer},t))]}),ke.correctAnswer&&e("p",{className:"text-sm text-red-600",children:ke.correctAnswer})]}),P&&P.length>0&&r("div",{className:"flex items-start gap-3 rounded-xl border border-red-200 bg-gradient-to-r from-red-50 to-rose-50 p-4",children:[e("div",{className:"flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-red-100",children:e("span",{className:"text-lg",children:"❌"})}),r("div",{className:"text-sm",children:[e("p",{className:"font-semibold text-red-800",children:"Lỗi:"}),e("ul",{className:"mt-1 list-inside list-disc text-red-700",children:P.map((r,t)=>e("li",{children:r},t))})]})]})]})]}),r(d,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-amber-100/50",children:[e(g,{className:"px-4 py-3",children:r("div",{className:"flex items-center gap-2",children:[e("div",{className:"flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-amber-500 to-orange-500 shadow-sm",children:e(w,{className:"h-3.5 w-3.5 text-white"})}),r("div",{children:[r("div",{className:"flex items-center gap-2",children:[e(p,{className:"text-base font-semibold text-gray-800",children:"Giải thích"}),e("span",{className:"inline-flex items-center rounded-full border border-amber-200 bg-amber-50 px-2.5 py-0.5 text-xs font-medium text-amber-600",children:"Không bắt buộc"})]}),e("p",{className:"text-xs text-gray-500 mt-0.5",children:"Giải thích cho đáp án đúng — hiển thị sau khi học sinh hoàn thành câu hỏi"})]})]})}),e(u,{className:"px-4 pb-4",children:e(c,{id:"explanation",value:oe,onChange:e=>le(e.target.value),placeholder:"VD: Câu trả lời đúng là... vì...",rows:3,className:"min-h-[80px] border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200 resize-none"})})]})]})}export function MatchByWritingAnswerCreator(r){return e(S,{...r})}

package/dist/components/questions/types/match-by-writing-answer/index.js

@@ -1,3 +1 @@
-export { MatchByWritingAnswerCreator } from './MatchByWritingAnswerCreator';
-export { MatchByWritingAnswerClient } from './MatchByWritingAnswerClient';
-export { matchByWritingAnswerRegistration } from './register';
+export{MatchByWritingAnswerCreator}from"./MatchByWritingAnswerCreator";export{MatchByWritingAnswerClient}from"./MatchByWritingAnswerClient";export{matchByWritingAnswerRegistration}from"./register";