@tinyweb_dev/oe-exam-sdk 0.1.27 → 0.1.29

package/dist/components/questions/types/write-correct-verb-form/WriteCorrectVerbFormCreator.js

@@ -1 +1,196 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useState as t,useRef as n,useEffect as a}from"react";import{Button as s}from"../../../../components/ui/button";import{Label as i}from"../../../../components/ui/label";import{Input as c}from"../../../../components/ui/input";import{Textarea as l}from"../../../../components/ui/textarea";import{PointsInput as o}from"../../../../components/ui/points-input";import{Card as d,CardContent as m,CardHeader as h,CardTitle as g}from"../../../../components/ui/card";import{Switch as b}from"../../../../components/ui/switch";import{Pencil as u,Eye as p,Lightbulb as x,PenTool as f,MessageSquare as N,ToggleLeft as v,CheckCircle2 as w,BookOpen as y}from"lucide-react";import{WriteCorrectVerbFormClient as C}from"./WriteCorrectVerbFormClient";import{useDebouncedCallback as H}from"../../../../shared/lib/hooks";function S({initialData:S,onSave:V,onCancel:A,onChange:j,externalErrors:k,onUnsavedChangesChange:_,validationRef:J}){const[D,F]=t(S?.sentence||""),[O,G]=t(S?.verbHint||""),[W,z]=t(S?.correctAnswer||""),[P,E]=t(S?.caseSensitive||!1),[M,R]=t(S?.instruction||"Write the correct form of the verb in parentheses to complete each sentence. Pay attention to the tense."),[X,q]=t(S?.explanation||""),[B,K]=t(S?.points||1),[L,Q]=t(!1),[T,U]=t({}),I=n(S),Y=n(!1),Z=n(j),$=n("");a(()=>{Z.current=j},[j]);const ee=H(e=>{Z.current?.(e)},300);a(()=>{JSON.stringify(I.current)!==JSON.stringify(S)&&(Y.current=!0,I.current=S,S&&(S.sentence&&F(S.sentence),S.verbHint&&G(S.verbHint),S.correctAnswer&&z(S.correctAnswer),void 0!==S.caseSensitive&&E(S.caseSensitive),S.instruction&&R(S.instruction),S.explanation&&q(S.explanation),S.points&&K(S.points)),setTimeout(()=>{Y.current=!1},150))},[S]),a(()=>{if(Y.current){const e=JSON.stringify({sentence:D,verbHint:O,correctAnswer:W,caseSensitive:P,instruction:M,explanation:X,points:B});return void($.current=e)}const e={sentence:D,verbHint:O,correctAnswer:W,caseSensitive:P,instruction:M,explanation:X,points:B},r=JSON.stringify(e);$.current!==r&&($.current=r,ee(e))},[D,O,W,P,M,X,B]),a(()=>{J&&(J.current={triggerValidation:async()=>re(),getFormData:()=>({sentence:D,verbHint:O,correctAnswer:W,caseSensitive:P,instruction:M,explanation:X,points:B})})},[J,D,O,W,P,M,X,B]);const re=()=>{const e={};return D.trim()?D.includes("{0}")||(e.sentence="Câu cần có chỗ trống {0}!"):e.sentence="Vui lòng nhập câu hỏi!",O.trim()||(e.verbHint="Vui lòng nhập gợi ý động từ!"),W.trim()||(e.correctAnswer="Vui lòng nhập đáp án đúng!"),U(e),0===Object.keys(e).length};if(L){const t={sentence:D,verbHint:O,correctAnswer:W,caseSensitive:P,instruction:M};return r("div",{className:"space-y-6",children:[e(d,{children:e(h,{children:r("div",{className:"flex items-center justify-between",children:[e(g,{children:"Write the Correct Form of the Verb (Preview)"}),r(s,{variant:"outline",size:"sm",onClick:()=>Q(!1),children:[e(u,{className:"mr-2 h-4 w-4"}),"Quay lại Edit Mode"]})]})})}),e(C,{questionData:{...t,explanation:X},isReviewMode:!0,userAnswer:W})]})}return r("div",{className:"space-y-6",children:[r(d,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-blue-100/50",children:[e("div",{className:"h-1.5 bg-gradient-to-r from-orange-500 via-amber-500 to-yellow-500"}),e(h,{className:"pb-4",children:r("div",{className:"flex items-center justify-between",children:[r("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-orange-500 to-amber-600 shadow-md",children:e(f,{className:"h-5 w-5 text-white"})}),r("div",{children:[e(g,{className:"text-xl font-bold text-gray-900",children:"Viết dạng đúng của động từ"}),e("p",{className:"text-sm text-gray-500",children:"Chia động từ trong ngoặc đúng thì"})]})]}),r(s,{variant:"outline",size:"sm",onClick:()=>Q(!0),disabled:!(D.trim()&&O.trim()&&W.trim()&&D.includes("{0}")),className:"gap-2 border-amber-200 text-amber-600 hover:bg-amber-50 hover:text-amber-700",children:[e(p,{className:"h-4 w-4"}),"Xem trước"]})]})}),r(m,{className:"space-y-6",children:[e("div",{className:"rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4",children:e(o,{defaultValue:B,onChange:e=>K(Number(e.target.value)||1)})}),e("div",{className:"rounded-xl border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-5 shadow-sm",children:r("div",{className:"flex items-start gap-3",children:[e("div",{className:"flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-amber-100",children:e(x,{className:"h-4 w-4 text-amber-600"})}),r("div",{className:"text-sm text-amber-900",children:[e("p",{className:"font-semibold text-amber-800",children:"Hướng dẫn tạo câu hỏi"}),r("ul",{className:"mt-2 space-y-1.5 text-amber-700",children:[r("li",{className:"flex items-center gap-2",children:[e("span",{className:"h-1.5 w-1.5 rounded-full bg-amber-400"}),"Sử dụng ",e("code",{className:"mx-1 rounded bg-amber-100 px-1.5 py-0.5 font-mono text-amber-800",children:"{0}"})," để đánh dấu chỗ trống trong câu"]}),r("li",{className:"flex items-center gap-2",children:[e("span",{className:"h-1.5 w-1.5 rounded-full bg-amber-400"}),'Nhập động từ gợi ý (dạng nguyên mẫu) vào ô "Gợi ý động từ"']}),r("li",{className:"flex items-center gap-2",children:[e("span",{className:"h-1.5 w-1.5 rounded-full bg-amber-400"}),"Học sinh sẽ viết dạng đúng của động từ để hoàn thành câu"]}),r("li",{className:"flex items-center gap-2",children:[e("span",{className:"h-1.5 w-1.5 rounded-full bg-amber-400"}),"Ví dụ: ",r("code",{className:"ml-1 rounded bg-amber-100 px-1.5 py-0.5 font-mono text-amber-800 select-all cursor-pointer",title:"Click để copy",children:["John ","{0}"," his homework at night."]})]})]})]})]})}),r("div",{className:"space-y-2",children:[r(i,{className:"flex items-center gap-2 text-base font-semibold text-gray-800",children:[e(N,{className:"h-4 w-4 text-amber-500"}),"Câu hỏi ",e("span",{className:"text-red-500",children:"*"})]}),e(c,{value:D,onChange:e=>{F(e.target.value),T.sentence&&U(e=>({...e,sentence:void 0}))},placeholder:"Ví dụ: John {0} his homework at night.",className:"border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200 "+(T.sentence?"border-red-400 focus:border-red-500 focus:ring-red-200":"")}),T.sentence&&e("p",{className:"text-sm text-red-600",children:T.sentence})]}),r("div",{className:"grid grid-cols-2 gap-4",children:[r("div",{className:"rounded-xl border-2 p-4 transition-all "+(O?"border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50":"border-gray-200 bg-white"),children:[r(i,{className:"flex items-center gap-2 text-sm font-semibold text-gray-700",children:[e("span",{className:"flex h-6 w-6 items-center justify-center rounded-md bg-amber-100 text-xs font-bold text-amber-600",children:"V"}),"Gợi ý động từ ",e("span",{className:"text-red-500",children:"*"})]}),e(c,{value:O,onChange:e=>{G(e.target.value),T.verbHint&&U(e=>({...e,verbHint:void 0}))},placeholder:"Ví dụ: do",className:"mt-2 border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200 "+(T.verbHint?"border-red-400 focus:border-red-500 focus:ring-red-200":"")}),T.verbHint&&e("p",{className:"mt-1 text-sm text-red-600",children:T.verbHint})]}),r("div",{className:"rounded-xl border-2 p-4 transition-all "+(W?"border-green-200 bg-gradient-to-r from-green-50 to-emerald-50":"border-gray-200 bg-white"),children:[r(i,{className:"flex items-center gap-2 text-sm font-semibold text-gray-700",children:[e(w,{className:"h-4 w-4 text-green-600"}),"Đáp án đúng ",e("span",{className:"text-red-500",children:"*"})]}),e(c,{value:W,onChange:e=>{z(e.target.value),T.correctAnswer&&U(e=>({...e,correctAnswer:void 0}))},placeholder:"Ví dụ: does",className:"mt-2 border-gray-200 bg-white transition-all focus:border-green-300 focus:ring-green-200 "+(T.correctAnswer?"border-red-400 focus:border-red-500 focus:ring-red-200":"")}),T.correctAnswer&&e("p",{className:"mt-1 text-sm text-red-600",children:T.correctAnswer})]})]}),r("div",{className:"flex items-center justify-between rounded-xl border-2 border-gray-200 bg-white p-4 transition-all hover:border-gray-300",children:[r("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-8 w-8 items-center justify-center rounded-lg bg-gray-100",children:e(v,{className:"h-4 w-4 text-gray-600"})}),r("div",{className:"space-y-0.5",children:[e(i,{htmlFor:"caseSensitive",className:"font-semibold text-gray-800",children:"Phân biệt chữ hoa/thường"}),e("p",{className:"text-sm text-gray-500",children:'Bật nếu đáp án cần khớp chính xác (ví dụ: "Does" ≠ "does")'})]})]}),e(b,{id:"caseSensitive",checked:P,onCheckedChange:E})]}),D&&O&&r("div",{className:"rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4",children:[r("div",{className:"mb-2 flex items-center gap-2 text-xs font-semibold text-gray-600",children:[e(p,{className:"h-3.5 w-3.5"}),"Xem trước câu hỏi"]}),r("p",{className:"text-sm text-gray-700",children:[D.replace("{0}","_______")," ",r("span",{className:"font-semibold text-amber-600",children:["(",O,")"]})]}),W&&r("div",{className:"mt-2 flex items-center gap-2 rounded-lg bg-green-50 px-3 py-2",children:[e(w,{className:"h-4 w-4 text-green-500"}),r("span",{className:"text-sm text-green-700",children:["Đáp án: ",e("strong",{children:D.replace("{0}",W)})]})]})]}),k&&k.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:k.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("div",{className:"h-1 bg-gradient-to-r from-amber-400 to-orange-400"}),e(h,{className:"pb-4",children:r("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-9 w-9 items-center justify-center rounded-lg bg-gradient-to-br from-amber-500 to-orange-500 shadow-sm",children:e(y,{className:"h-4 w-4 text-white"})}),r("div",{children:[r("div",{className:"flex items-center gap-2",children:[e(g,{className:"text-lg 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-sm 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(m,{children:e(l,{id:"explanation",value:X,onChange:e=>q(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 WriteCorrectVerbFormCreator(r){return e(S,{...r})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 { Switch } from '../../../../components/ui/switch';
+import { Pencil, Eye, Lightbulb, PenTool, MessageSquare, ToggleLeft, CheckCircle2, BookOpen } from 'lucide-react';
+import { WriteCorrectVerbFormClient } from './WriteCorrectVerbFormClient';
+import { useDebouncedCallback } from '../../../../shared/lib/hooks';
+function WriteCorrectVerbFormCreatorContent({ initialData, onSave, onCancel, onChange, externalErrors, onUnsavedChangesChange, validationRef, }) {
+    // ============ STATE ============
+    const [sentence, setSentence] = useState(initialData?.sentence || '');
+    const [verbHint, setVerbHint] = useState(initialData?.verbHint || '');
+    const [correctAnswer, setCorrectAnswer] = useState(initialData?.correctAnswer || '');
+    const [caseSensitive, setCaseSensitive] = useState(initialData?.caseSensitive || false);
+    const [instruction, setInstruction] = useState(initialData?.instruction ||
+        'Write the correct form of the verb in parentheses to complete each sentence. Pay attention to the tense.');
+    const [explanation, setExplanation] = useState(initialData?.explanation || '');
+    const [points, setPoints] = useState(initialData?.points || 1);
+    // UI State
+    const [isClientMode, setIsClientMode] = useState(false);
+    // Inline validation errors
+    const [validationErrors, setValidationErrors] = useState({});
+    // Refs for initialization tracking
+    const previousInitialDataRef = useRef(initialData);
+    const isInitializingRef = useRef(false);
+    const onChangeRef = useRef(onChange);
+    const previousPayloadRef = useRef('');
+    // Update onChange ref when it changes
+    useEffect(() => {
+        onChangeRef.current = onChange;
+    }, [onChange]);
+    // Debounced onChange callback
+    const debouncedOnChange = useDebouncedCallback((data) => {
+        onChangeRef.current?.(data);
+    }, 300);
+    // ============ SYNC INITIAL DATA ============
+    useEffect(() => {
+        const initialDataChanged = JSON.stringify(previousInitialDataRef.current) !== JSON.stringify(initialData);
+        if (initialDataChanged) {
+            isInitializingRef.current = true;
+            previousInitialDataRef.current = initialData;
+            if (initialData) {
+                if (initialData.sentence)
+                    setSentence(initialData.sentence);
+                if (initialData.verbHint)
+                    setVerbHint(initialData.verbHint);
+                if (initialData.correctAnswer)
+                    setCorrectAnswer(initialData.correctAnswer);
+                if (initialData.caseSensitive !== undefined)
+                    setCaseSensitive(initialData.caseSensitive);
+                if (initialData.instruction)
+                    setInstruction(initialData.instruction);
+                if (initialData.explanation)
+                    setExplanation(initialData.explanation);
+                if (initialData.points)
+                    setPoints(initialData.points);
+            }
+            setTimeout(() => {
+                isInitializingRef.current = false;
+            }, 150);
+        }
+    }, [initialData]);
+    // ============ ON CHANGE CALLBACK ============
+    useEffect(() => {
+        if (isInitializingRef.current) {
+            const currentPayload = JSON.stringify({
+                sentence,
+                verbHint,
+                correctAnswer,
+                caseSensitive,
+                instruction,
+                explanation,
+                points,
+            });
+            previousPayloadRef.current = currentPayload;
+            return;
+        }
+        const payload = {
+            sentence,
+            verbHint,
+            correctAnswer,
+            caseSensitive,
+            instruction,
+            explanation,
+            points,
+        };
+        const payloadString = JSON.stringify(payload);
+        if (previousPayloadRef.current !== payloadString) {
+            previousPayloadRef.current = payloadString;
+            debouncedOnChange(payload);
+        }
+    }, [sentence, verbHint, correctAnswer, caseSensitive, instruction, explanation, points]);
+    // NOTE: Status tracking is now handled entirely by ExamCreator via localStorage (exam_question_status_{id})
+    // The onChange callback triggers handleQuestionDraftChange in ExamCreator which updates localStorage
+    // Expose validation function via ref
+    useEffect(() => {
+        if (validationRef) {
+            validationRef.current = {
+                triggerValidation: async () => {
+                    return validateForm();
+                },
+                // BUGFIX: Expose getFormData to get fresh form data at save time
+                // This bypasses the debounced onChange race condition
+                getFormData: () => ({
+                    sentence,
+                    verbHint,
+                    correctAnswer,
+                    caseSensitive,
+                    instruction,
+                    explanation,
+                    points,
+                }),
+            };
+        }
+    }, [validationRef, sentence, verbHint, correctAnswer, caseSensitive, instruction, explanation, points]);
+    // ============ VALIDATION ============
+    const validateForm = () => {
+        const errors = {};
+        if (!sentence.trim()) {
+            errors.sentence = 'Vui lòng nhập câu hỏi!';
+        }
+        else if (!sentence.includes('{0}')) {
+            errors.sentence = 'Câu cần có chỗ trống {0}!';
+        }
+        if (!verbHint.trim()) {
+            errors.verbHint = 'Vui lòng nhập gợi ý động từ!';
+        }
+        if (!correctAnswer.trim()) {
+            errors.correctAnswer = 'Vui lòng nhập đáp án đúng!';
+        }
+        setValidationErrors(errors);
+        return Object.keys(errors).length === 0;
+    };
+    const isValid = () => {
+        if (!sentence.trim() || !verbHint.trim() || !correctAnswer.trim()) {
+            return false;
+        }
+        if (!sentence.includes('{0}')) {
+            return false;
+        }
+        return true;
+    };
+    // Handle save
+    const handleSave = () => {
+        if (!validateForm()) {
+            return;
+        }
+        // NOTE: Save status is now managed by ExamCreator via localStorage
+        const saveData = {
+            sentence,
+            verbHint,
+            correctAnswer,
+            caseSensitive,
+            instruction,
+            explanation,
+            points,
+        };
+        onSave?.(saveData);
+    };
+    // ============ CLIENT MODE PREVIEW ============
+    if (isClientMode) {
+        const questionData = {
+            sentence,
+            verbHint,
+            correctAnswer,
+            caseSensitive,
+            instruction,
+        };
+        return (_jsxs("div", { className: "space-y-6", children: [_jsx(Card, { children: _jsx(CardHeader, { children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx(CardTitle, { children: "Write the Correct Form of the Verb (Preview)" }), _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(WriteCorrectVerbFormClient, { questionData: { ...questionData, explanation }, isReviewMode: true, userAnswer: correctAnswer })] }));
+    }
+    // ============ CREATOR UI ============
+    return (_jsxs("div", { className: "space-y-6", children: [_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-blue-100/50", children: [_jsx("div", { className: "h-1.5 bg-gradient-to-r from-orange-500 via-amber-500 to-yellow-500" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-orange-500 to-amber-600 shadow-md", children: _jsx(PenTool, { className: "h-5 w-5 text-white" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-xl font-bold text-gray-900", children: "Vi\u1EBFt d\u1EA1ng \u0111\u00FAng c\u1EE7a \u0111\u1ED9ng t\u1EEB" }), _jsx("p", { className: "text-sm text-gray-500", children: "Chia \u0111\u1ED9ng t\u1EEB trong ngo\u1EB7c \u0111\u00FAng th\u00EC" })] })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(true), disabled: !isValid(), className: "gap-2 border-amber-200 text-amber-600 hover:bg-amber-50 hover:text-amber-700", children: [_jsx(Eye, { className: "h-4 w-4" }), "Xem tr\u01B0\u1EDBc"] })] }) }), _jsxs(CardContent, { className: "space-y-6", children: [_jsx("div", { className: "rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4", children: _jsx(PointsInput, { defaultValue: points, onChange: (e) => setPoints(Number(e.target.value) || 1) }) }), _jsx("div", { className: "rounded-xl border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-5 shadow-sm", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-amber-100", children: _jsx(Lightbulb, { className: "h-4 w-4 text-amber-600" }) }), _jsxs("div", { className: "text-sm text-amber-900", children: [_jsx("p", { className: "font-semibold text-amber-800", children: "H\u01B0\u1EDBng d\u1EABn t\u1EA1o c\u00E2u h\u1ECFi" }), _jsxs("ul", { className: "mt-2 space-y-1.5 text-amber-700", children: [_jsxs("li", { className: "flex items-center gap-2", children: [_jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-amber-400" }), "S\u1EED d\u1EE5ng ", _jsx("code", { className: "mx-1 rounded bg-amber-100 px-1.5 py-0.5 font-mono text-amber-800", children: '{0}' }), " \u0111\u1EC3 \u0111\u00E1nh d\u1EA5u ch\u1ED7 tr\u1ED1ng trong c\u00E2u"] }), _jsxs("li", { className: "flex items-center gap-2", children: [_jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-amber-400" }), "Nh\u1EADp \u0111\u1ED9ng t\u1EEB g\u1EE3i \u00FD (d\u1EA1ng nguy\u00EAn m\u1EABu) v\u00E0o \u00F4 \"G\u1EE3i \u00FD \u0111\u1ED9ng t\u1EEB\""] }), _jsxs("li", { className: "flex items-center gap-2", children: [_jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-amber-400" }), "H\u1ECDc sinh s\u1EBD vi\u1EBFt d\u1EA1ng \u0111\u00FAng c\u1EE7a \u0111\u1ED9ng t\u1EEB \u0111\u1EC3 ho\u00E0n th\u00E0nh c\u00E2u"] }), _jsxs("li", { className: "flex items-center gap-2", children: [_jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-amber-400" }), "V\u00ED d\u1EE5: ", _jsxs("code", { className: "ml-1 rounded bg-amber-100 px-1.5 py-0.5 font-mono text-amber-800 select-all cursor-pointer", title: "Click \u0111\u1EC3 copy", children: ["John ", '{0}', " his homework at night."] })] })] })] })] }) }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(MessageSquare, { className: "h-4 w-4 text-amber-500" }), "C\u00E2u h\u1ECFi ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Input, { value: sentence, onChange: (e) => {
+                                            setSentence(e.target.value);
+                                            if (validationErrors.sentence) {
+                                                setValidationErrors(prev => ({ ...prev, sentence: undefined }));
+                                            }
+                                        }, placeholder: "V\u00ED d\u1EE5: John {0} his homework at night.", className: `border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200 ${validationErrors.sentence ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}` }), validationErrors.sentence && (_jsx("p", { className: "text-sm text-red-600", children: validationErrors.sentence }))] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: `rounded-xl border-2 p-4 transition-all ${verbHint ? 'border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50' : 'border-gray-200 bg-white'}`, children: [_jsxs(Label, { className: "flex items-center gap-2 text-sm font-semibold text-gray-700", children: [_jsx("span", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-amber-100 text-xs font-bold text-amber-600", children: "V" }), "G\u1EE3i \u00FD \u0111\u1ED9ng t\u1EEB ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Input, { value: verbHint, onChange: (e) => {
+                                                    setVerbHint(e.target.value);
+                                                    if (validationErrors.verbHint) {
+                                                        setValidationErrors(prev => ({ ...prev, verbHint: undefined }));
+                                                    }
+                                                }, placeholder: "V\u00ED d\u1EE5: do", className: `mt-2 border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200 ${validationErrors.verbHint ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}` }), validationErrors.verbHint && (_jsx("p", { className: "mt-1 text-sm text-red-600", children: validationErrors.verbHint }))] }), _jsxs("div", { className: `rounded-xl border-2 p-4 transition-all ${correctAnswer ? 'border-green-200 bg-gradient-to-r from-green-50 to-emerald-50' : 'border-gray-200 bg-white'}`, children: [_jsxs(Label, { className: "flex items-center gap-2 text-sm font-semibold text-gray-700", children: [_jsx(CheckCircle2, { className: "h-4 w-4 text-green-600" }), "\u0110\u00E1p \u00E1n \u0111\u00FAng ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Input, { value: correctAnswer, onChange: (e) => {
+                                                    setCorrectAnswer(e.target.value);
+                                                    if (validationErrors.correctAnswer) {
+                                                        setValidationErrors(prev => ({ ...prev, correctAnswer: undefined }));
+                                                    }
+                                                }, placeholder: "V\u00ED d\u1EE5: does", className: `mt-2 border-gray-200 bg-white transition-all focus:border-green-300 focus:ring-green-200 ${validationErrors.correctAnswer ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}` }), validationErrors.correctAnswer && (_jsx("p", { className: "mt-1 text-sm text-red-600", children: validationErrors.correctAnswer }))] })] }), _jsxs("div", { className: "flex items-center justify-between rounded-xl border-2 border-gray-200 bg-white p-4 transition-all hover:border-gray-300", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-gray-100", children: _jsx(ToggleLeft, { className: "h-4 w-4 text-gray-600" }) }), _jsxs("div", { className: "space-y-0.5", children: [_jsx(Label, { htmlFor: "caseSensitive", className: "font-semibold text-gray-800", children: "Ph\u00E2n bi\u1EC7t ch\u1EEF hoa/th\u01B0\u1EDDng" }), _jsx("p", { className: "text-sm text-gray-500", children: "B\u1EADt n\u1EBFu \u0111\u00E1p \u00E1n c\u1EA7n kh\u1EDBp ch\u00EDnh x\u00E1c (v\u00ED d\u1EE5: \"Does\" \u2260 \"does\")" })] })] }), _jsx(Switch, { id: "caseSensitive", checked: caseSensitive, onCheckedChange: setCaseSensitive })] }), sentence && verbHint && (_jsxs("div", { className: "rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4", children: [_jsxs("div", { className: "mb-2 flex items-center gap-2 text-xs font-semibold text-gray-600", children: [_jsx(Eye, { className: "h-3.5 w-3.5" }), "Xem tr\u01B0\u1EDBc c\u00E2u h\u1ECFi"] }), _jsxs("p", { className: "text-sm text-gray-700", children: [sentence.replace('{0}', '_______'), " ", _jsxs("span", { className: "font-semibold text-amber-600", children: ["(", verbHint, ")"] })] }), correctAnswer && (_jsxs("div", { className: "mt-2 flex items-center gap-2 rounded-lg bg-green-50 px-3 py-2", children: [_jsx(CheckCircle2, { className: "h-4 w-4 text-green-500" }), _jsxs("span", { className: "text-sm text-green-700", children: ["\u0110\u00E1p \u00E1n: ", _jsx("strong", { children: sentence.replace('{0}', 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("div", { className: "h-1 bg-gradient-to-r from-amber-400 to-orange-400" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-9 w-9 items-center justify-center rounded-lg bg-gradient-to-br from-amber-500 to-orange-500 shadow-sm", children: _jsx(BookOpen, { className: "h-4 w-4 text-white" }) }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CardTitle, { className: "text-lg 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-sm 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, { 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 WriteCorrectVerbFormCreator(props) {
+    return _jsx(WriteCorrectVerbFormCreatorContent, { ...props });
+}

package/dist/components/questions/types/write-correct-verb-form/index.js

@@ -1 +1,2 @@
-export*from"./WriteCorrectVerbFormCreator";export*from"./WriteCorrectVerbFormClient";
+export * from './WriteCorrectVerbFormCreator';
+export * from './WriteCorrectVerbFormClient';

package/dist/components/questions/types/write-correct-verb-form/register.js

@@ -1 +1,62 @@
-import{WriteCorrectVerbFormCreator as e}from"./WriteCorrectVerbFormCreator";export const writeCorrectVerbFormRegistration={component:e,transformInitialData:e=>{const t=e?.content,n=e?.answer,i=e?.total_points?parseFloat(e.total_points):e?.points||n?.points||1;let s=n;return!t||void 0===t.sentence&&void 0===t.verbHint||(s={sentence:t.sentence||"",verbHint:t.verbHint||"",correctAnswer:n?.correctAnswer||t.correctAnswer||"",caseSensitive:t.caseSensitive??n?.caseSensitive??!1,instruction:t.instruction||n?.instruction||"",explanation:e?.explanation||t.explanation||"",points:i}),s},getExtraProps:e=>({onUnsavedChangesChange:e.onUnsavedChangesChange,validationRef:e.validationRef}),wrapOnSave:(e,t)=>({type:t.questionType,points:e.points??t.state.points??1,level:t.state.level,difficulty:t.state.difficulty,skill:t.state.skill,explanation:e.explanation||"",content:{sentence:e.sentence,verbHint:e.verbHint,instruction:e.instruction},answer:{correctAnswer:e.correctAnswer,caseSensitive:e.caseSensitive}}),wrapOnChange:(e,t)=>({type:t.questionType,points:e.points??t.state.points??1,level:t.state.level,difficulty:t.state.difficulty,skill:t.state.skill,explanation:e.explanation||"",content:{sentence:e.sentence,verbHint:e.verbHint,instruction:e.instruction},answer:{correctAnswer:e.correctAnswer,caseSensitive:e.caseSensitive}})};
+import { WriteCorrectVerbFormCreator } from './WriteCorrectVerbFormCreator';
+export const writeCorrectVerbFormRegistration = {
+    component: WriteCorrectVerbFormCreator,
+    transformInitialData: (initialData) => {
+        const content = initialData?.content;
+        const answer = initialData?.answer;
+        const points = initialData?.total_points
+            ? parseFloat(initialData.total_points)
+            : (initialData?.points || answer?.points || 1);
+        let creatorData = answer;
+        if (content && (content.sentence !== undefined || content.verbHint !== undefined)) {
+            creatorData = {
+                sentence: content.sentence || '',
+                verbHint: content.verbHint || '',
+                correctAnswer: answer?.correctAnswer || content.correctAnswer || '',
+                caseSensitive: content.caseSensitive ?? answer?.caseSensitive ?? false,
+                instruction: content.instruction || answer?.instruction || '',
+                explanation: initialData?.explanation || content.explanation || '',
+                points,
+            };
+        }
+        return creatorData;
+    },
+    getExtraProps: (ctx) => ({
+        onUnsavedChangesChange: ctx.onUnsavedChangesChange,
+        validationRef: ctx.validationRef,
+    }),
+    wrapOnSave: (data, ctx) => ({
+        type: ctx.questionType,
+        points: data.points ?? ctx.state.points ?? 1,
+        level: ctx.state.level,
+        difficulty: ctx.state.difficulty,
+        skill: ctx.state.skill,
+        explanation: data.explanation || '',
+        content: {
+            sentence: data.sentence,
+            verbHint: data.verbHint,
+            instruction: data.instruction,
+        },
+        answer: {
+            correctAnswer: data.correctAnswer,
+            caseSensitive: data.caseSensitive,
+        },
+    }),
+    wrapOnChange: (data, ctx) => ({
+        type: ctx.questionType,
+        points: data.points ?? ctx.state.points ?? 1,
+        level: ctx.state.level,
+        difficulty: ctx.state.difficulty,
+        skill: ctx.state.skill,
+        explanation: data.explanation || '',
+        content: {
+            sentence: data.sentence,
+            verbHint: data.verbHint,
+            instruction: data.instruction,
+        },
+        answer: {
+            correctAnswer: data.correctAnswer,
+            caseSensitive: data.caseSensitive,
+        },
+    }),
+};

package/dist/components/questions/types/write-correct-verb-form/transform.js

@@ -1 +1,17 @@
-export const transformWriteCorrectVerbForm=e=>{const n=e.content,r=e.answer;return n?.sentence&&n?.verbHint?{apiContent:{sentence:n.sentence,verbHint:n.verbHint},apiCorrectAnswer:{correctAnswer:r?.correctAnswer||"",caseSensitive:r?.caseSensitive||!1}}:{apiContent:{},apiCorrectAnswer:{}}};
+export const transformWriteCorrectVerbForm = (question) => {
+    const contentData = question.content;
+    const answerData = question.answer;
+    if (!contentData?.sentence || !contentData?.verbHint) {
+        return { apiContent: {}, apiCorrectAnswer: {} };
+    }
+    return {
+        apiContent: {
+            sentence: contentData.sentence,
+            verbHint: contentData.verbHint,
+        },
+        apiCorrectAnswer: {
+            correctAnswer: answerData?.correctAnswer || '',
+            caseSensitive: answerData?.caseSensitive || false,
+        },
+    };
+};

package/dist/components/questions/types/write-sentences/WriteSentencesClient.js

@@ -1 +1,22 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useState as t,useEffect as a}from"react";import{Input as i}from"../../../../components/ui/input";import{cn as s}from"../../../../shared/lib/utils";import{PenLine as l,Lightbulb as n}from"lucide-react";export function WriteSentencesClient({questionData:d,onSubmit:o,isReviewMode:c=!1,userAnswer:m,explanation:h}){const[u,p]=t("string"==typeof m?m:"");a(()=>{void 0!==m&&"string"==typeof m&&p(m)},[m]);u.trim().length;return r("div",{className:"space-y-4",children:[e("div",{className:s("overflow-hidden rounded-xl border bg-white shadow-sm transition-all relative","border-gray-200"),children:r("div",{className:"p-4 sm:p-5 flex items-start gap-3",children:[e("div",{className:"flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-teal-500 to-emerald-600 text-white shadow-sm pointer-events-none mt-1",children:e(l,{className:"h-5 w-5"})}),e("div",{className:"flex-1 space-y-2",children:c?r("div",{className:"flex flex-col gap-2",children:[e("span",{className:"text-xs font-semibold text-gray-500 uppercase tracking-wider",children:"Bài viết đã nộp"}),e("div",{className:"p-3 rounded-lg border leading-relaxed break-words bg-gray-50 border-gray-100 text-gray-800",children:u||e("span",{className:"text-gray-400 italic",children:"Không có trả lời"})})]}):e(i,{value:u,onChange:e=>{return r=e.target.value,void(c||(p(r),o?.(r)));var r},placeholder:"Bắt đầu viết câu của bạn tại đây...",className:"w-full h-12 text-base font-medium px-4 placeholder:font-normal bg-gray-50 hover:bg-white focus:bg-white transition-colors",disabled:c})})]})}),c&&h&&e("div",{className:"rounded-xl border border-blue-200 bg-gradient-to-r from-blue-50 to-indigo-50 p-4 shadow-sm",children:r("div",{className:"flex items-start gap-3",children:[e("div",{className:"flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 text-blue-700",children:e(n,{className:"h-4 w-4"})}),r("div",{className:"flex-1 mt-0.5",children:[e("h4",{className:"text-xs font-bold text-blue-900 uppercase tracking-wider mb-1.5",children:"Giải thích"}),e("p",{className:"text-sm text-blue-800 leading-relaxed whitespace-pre-wrap",children:h})]})]})})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { Input } from '../../../../components/ui/input';
+import { cn } from '../../../../shared/lib/utils';
+import { PenLine, Lightbulb } from 'lucide-react';
+export function WriteSentencesClient({ questionData, onSubmit, isReviewMode = false, userAnswer, explanation, }) {
+    const [answer, setAnswer] = useState(typeof userAnswer === 'string' ? userAnswer : '');
+    useEffect(() => {
+        if (userAnswer !== undefined && typeof userAnswer === 'string') {
+            setAnswer(userAnswer);
+        }
+    }, [userAnswer]);
+    const handleAnswerChange = (value) => {
+        if (isReviewMode)
+            return;
+        setAnswer(value);
+        onSubmit?.(value);
+    };
+    const hasAnswered = answer.trim().length > 0;
+    return (_jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: cn("overflow-hidden rounded-xl border bg-white shadow-sm transition-all relative", "border-gray-200"), children: _jsxs("div", { className: "p-4 sm:p-5 flex items-start gap-3", children: [_jsx("div", { className: "flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-teal-500 to-emerald-600 text-white shadow-sm pointer-events-none mt-1", children: _jsx(PenLine, { className: "h-5 w-5" }) }), _jsx("div", { className: "flex-1 space-y-2", children: !isReviewMode ? (_jsx(Input, { value: answer, onChange: (e) => handleAnswerChange(e.target.value), placeholder: "B\u1EAFt \u0111\u1EA7u vi\u1EBFt c\u00E2u c\u1EE7a b\u1EA1n t\u1EA1i \u0111\u00E2y...", className: "w-full h-12 text-base font-medium px-4 placeholder:font-normal bg-gray-50 hover:bg-white focus:bg-white transition-colors", disabled: isReviewMode })) : (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("span", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wider", children: "B\u00E0i vi\u1EBFt \u0111\u00E3 n\u1ED9p" }), _jsx("div", { className: "p-3 rounded-lg border leading-relaxed break-words bg-gray-50 border-gray-100 text-gray-800", children: answer || _jsx("span", { className: "text-gray-400 italic", children: "Kh\u00F4ng c\u00F3 tr\u1EA3 l\u1EDDi" }) })] })) })] }) }), isReviewMode && explanation && (_jsx("div", { className: "rounded-xl border border-blue-200 bg-gradient-to-r from-blue-50 to-indigo-50 p-4 shadow-sm", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 text-blue-700", children: _jsx(Lightbulb, { className: "h-4 w-4" }) }), _jsxs("div", { className: "flex-1 mt-0.5", children: [_jsx("h4", { className: "text-xs font-bold text-blue-900 uppercase tracking-wider mb-1.5", children: "Gi\u1EA3i th\u00EDch" }), _jsx("p", { className: "text-sm text-blue-800 leading-relaxed whitespace-pre-wrap", children: explanation })] })] }) }))] }));
+}

package/dist/components/questions/types/write-sentences/WriteSentencesCreator.js

@@ -1 +1,174 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useState as r,useRef as n,useEffect as i}from"react";import{Button as a}from"../../../../components/ui/button";import{Input as s}from"../../../../components/ui/input";import{Label as o}from"../../../../components/ui/label";import{Textarea as l}from"../../../../components/ui/textarea";import{PointsInput as c}from"../../../../components/ui/points-input";import{Card as d,CardContent as m,CardHeader as u,CardTitle as h}from"../../../../components/ui/card";import{Pencil as g,Eye as p,PenLine as b,BookOpen as x,Hash as f}from"lucide-react";import{WriteSentencesClient as N}from"./WriteSentencesClient";import{useDebouncedCallback as v}from"../../../../shared/lib/hooks";import{BasicQuestionGroupCard as y}from"../../groups/BasicQuestionGroupCard";import{useBasicQuestionGroup as C}from"../../_shared/hooks/useBasicQuestionGroup";function w({initialData:w,onChange:G,externalErrors:S,validationRef:I,groups:j,questionIndexInPart:U,partId:k}){const{isGrouped:q,currentGroupNumber:V,groupTitle:D,groupSubtitle:O,groupContent:T,imageUrl:J,setGroupTitle:P,setGroupSubtitle:z,setGroupContent:F,setImageUrl:M}=C({partId:k,groups:j,questionIndexInPart:U,initialData:{title:(()=>{const e=w?.questionGroup?.payload;return e?.title||w?.title||""})(),subtitle:(()=>{const e=w?.questionGroup?.payload;return e?.subtitle||""})(),content:(()=>{const e=w?.questionGroup?.payload;return e?.content||w?.groupContent||""})(),imageUrl:(()=>{const e=w?.questionGroup?.payload;return e?.imageUrl||w?.imageUrl||""})()}}),[Q,W]=r(w?.explanation||""),[B,E]=r(w?.points||1),[H,R]=r(w?.instruction||""),[K,L]=r(w?.sentenceCount),[X,$]=r(!1),_=n(w),A=n(!1),Y=n(!1),Z=n(G),ee=n(""),[te,re]=r({});i(()=>{Z.current=G},[G]);const ne=v(e=>{Z.current?.(e)},300);if(i(()=>{I&&(I.current={triggerValidation:async()=>{const e={};return(!K||K<1)&&(e.sentenceCount="Vui lòng nhập số câu cần viết"),re(e),0===Object.keys(e).length},getFormData:()=>({points:B,explanation:Q,instruction:H,sentenceCount:K,title:D,subtitle:O,groupContent:T,imageUrl:J,groupNumber:V,groups:j})})},[I,B,Q,H,K,D,O,T,J,V,j]),i(()=>{!(JSON.stringify(_.current)!==JSON.stringify(w))&&Y.current||(A.current=!0,_.current=w,Y.current=!0,w?(W(w.explanation||""),E(w.points||1),R(w.instruction||""),L(w.sentenceCount)):(W(""),E(1),R(""),L(void 0)),setTimeout(()=>{A.current=!1},150))},[w]),i(()=>{if(A.current){const e=JSON.stringify({points:B,explanation:Q,instruction:H,sentenceCount:K,title:D,subtitle:O,groupContent:T,imageUrl:J,groupNumber:V,groups:j});return void(ee.current=e)}const e={points:B,explanation:Q,instruction:H,sentenceCount:K,title:D,subtitle:O,groupContent:T,imageUrl:J,groupNumber:V,groups:j},t=JSON.stringify(e);ee.current!==t&&(ee.current=t,ne(e))},[B,Q,H,K,D,O,T,J,V,j,ne]),X){const r={points:B,explanation:Q,instruction:H,sentenceCount:K};return t("div",{className:"space-y-6",children:[e(d,{children:e(u,{children:t("div",{className:"flex items-center justify-between",children:[t("div",{children:[e(h,{children:"Write Sentences (Preview)"}),e("p",{className:"mt-1 text-sm text-gray-500",children:"Chế độ xem trước"})]}),t(a,{variant:"outline",size:"sm",onClick:()=>$(!1),children:[e(g,{className:"mr-2 h-4 w-4"}),"Quay lại Edit Mode"]})]})})}),e(N,{questionData:r,onSubmit:()=>{},isReviewMode:!0,explanation:Q})]})}return t("div",{className:"space-y-6",children:[q&&e(y,{groupNumber:V,title:D,subtitle:O,content:T,imageUrl:J,onTitleChange:P,onSubtitleChange:z,onContentChange:F,onImageChange:M,uploadIdPrefix:`write-sentences-${k??"group"}`}),t(d,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-teal-100/50",children:[e("div",{className:"h-1.5 bg-gradient-to-r from-teal-400 to-emerald-500"}),e(u,{className:"pb-4",children:t("div",{className:"flex items-center justify-between",children:[t("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-teal-500 to-emerald-600 shadow-md",children:e(b,{className:"h-5 w-5 text-white"})}),t("div",{children:[e(h,{className:"text-xl font-bold text-gray-900",children:"Viết câu"}),e("p",{className:"text-sm text-gray-500",children:"Học sinh tự viết một câu hoàn chỉnh"})]})]}),t(a,{variant:"outline",size:"sm",onClick:()=>$(!0),className:"gap-2 border-emerald-200 text-emerald-600 hover:bg-emerald-50 hover:text-emerald-700",children:[e(p,{className:"h-4 w-4"}),"Xem trước"]})]})}),t(m,{className:"space-y-6",children:[t("div",{className:"grid grid-cols-1 gap-4 md:grid-cols-2",children:[e("div",{className:"rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4",children:e(c,{defaultValue:B,onChange:e=>E(Number(e.target.value)||1)})}),t("div",{className:"rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4",children:[t(o,{htmlFor:"sentenceCount",className:"flex items-center gap-2 text-sm font-semibold text-gray-800",children:[e(f,{className:"h-4 w-4 text-teal-500"}),"Số câu cần viết ",e("span",{className:"text-red-500",children:"*"})]}),e(s,{id:"sentenceCount",type:"number",min:1,max:10,value:K??"",onChange:e=>{const t=e.target.value;if(""===t)L(void 0);else{const e=parseInt(t,10);L(isNaN(e)?void 0:Math.max(1,e))}te.sentenceCount&&re(e=>({...e,sentenceCount:void 0}))},placeholder:"Nhập số câu...",className:"mt-1.5 border-gray-200 bg-white transition-all focus:border-teal-300 focus:ring-teal-200 "+(te.sentenceCount?"border-red-400 focus:border-red-500 focus:ring-red-200":"")}),te.sentenceCount&&e("p",{className:"mt-1 text-sm text-red-600",children:te.sentenceCount})]})]}),t("div",{className:"space-y-2",children:[t(o,{htmlFor:"instruction",className:"flex items-center gap-2 text-sm font-semibold text-gray-800",children:[e(x,{className:"h-4 w-4 text-teal-500"}),"Hướng dẫn ",e("span",{className:"text-xs font-normal text-gray-500",children:"(Tùy chọn)"})]}),e(l,{id:"instruction",value:H,onChange:e=>R(e.target.value),placeholder:"Ví dụ: Now write two sentences about the picture.",rows:2,className:"border-gray-200 bg-white transition-all focus:border-teal-300 focus:ring-teal-200"})]}),S&&S.length>0&&t("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:"❌"})}),t("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:S.map((t,r)=>e("li",{children:t},r))})]})]})]})]}),t(d,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-amber-100/50",children:[e("div",{className:"h-1 bg-gradient-to-r from-amber-400 to-orange-400"}),e(u,{className:"pb-4",children:t("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-9 w-9 items-center justify-center rounded-lg bg-gradient-to-br from-amber-500 to-orange-500 shadow-sm",children:e(x,{className:"h-4 w-4 text-white"})}),t("div",{children:[t("div",{className:"flex items-center gap-2",children:[e(h,{className:"text-lg 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-sm 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(m,{children:e(l,{id:"explanation",value:Q,onChange:e=>W(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 WriteSentencesCreator(t){return e(w,{...t})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from 'react';
+import { Button } from '../../../../components/ui/button';
+import { Input } from '../../../../components/ui/input';
+import { Label } from '../../../../components/ui/label';
+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, PenLine, BookOpen, Hash } from 'lucide-react';
+import { WriteSentencesClient } from './WriteSentencesClient';
+import { useDebouncedCallback } from '../../../../shared/lib/hooks';
+import { BasicQuestionGroupCard } from '../../groups/BasicQuestionGroupCard';
+import { useBasicQuestionGroup } from '../../_shared/hooks/useBasicQuestionGroup';
+function WriteSentencesCreatorContent({ initialData, onChange, externalErrors, validationRef, groups, questionIndexInPart, partId, }) {
+    // ============ GROUP (shared title / content / image) ============
+    const { isGrouped, currentGroupNumber, groupTitle, groupSubtitle, groupContent, imageUrl, setGroupTitle, setGroupSubtitle, setGroupContent, setImageUrl, } = useBasicQuestionGroup({
+        partId,
+        groups,
+        questionIndexInPart,
+        initialData: {
+            title: (() => {
+                const qgPayload = initialData?.questionGroup?.payload;
+                return qgPayload?.title || initialData?.title || '';
+            })(),
+            subtitle: (() => {
+                const qgPayload = initialData?.questionGroup?.payload;
+                return qgPayload?.subtitle || '';
+            })(),
+            content: (() => {
+                const qgPayload = initialData?.questionGroup?.payload;
+                return qgPayload?.content || initialData?.groupContent || '';
+            })(),
+            imageUrl: (() => {
+                const qgPayload = initialData?.questionGroup?.payload;
+                return qgPayload?.imageUrl || initialData?.imageUrl || '';
+            })(),
+        },
+    });
+    // ============ STATE ============
+    const [explanation, setExplanation] = useState(initialData?.explanation || '');
+    const [points, setPoints] = useState(initialData?.points || 1);
+    const [instruction, setInstruction] = useState(initialData?.instruction || '');
+    const [sentenceCount, setSentenceCount] = useState(initialData?.sentenceCount);
+    // UI State
+    const [isClientMode, setIsClientMode] = useState(false);
+    // Refs for initialization tracking
+    const previousInitialDataRef = useRef(initialData);
+    const isInitializingRef = useRef(false);
+    const hasInitializedRef = useRef(false);
+    const onChangeRef = useRef(onChange);
+    const previousPayloadRef = useRef('');
+    const [validationErrors, setValidationErrors] = useState({});
+    useEffect(() => {
+        onChangeRef.current = onChange;
+    }, [onChange]);
+    const debouncedOnChange = useDebouncedCallback((data) => {
+        onChangeRef.current?.(data);
+    }, 300);
+    // Expose validation function via ref
+    useEffect(() => {
+        if (validationRef) {
+            validationRef.current = {
+                triggerValidation: async () => {
+                    const errors = {};
+                    if (!sentenceCount || sentenceCount < 1) {
+                        errors.sentenceCount = 'Vui lòng nhập số câu cần viết';
+                    }
+                    setValidationErrors(errors);
+                    return Object.keys(errors).length === 0;
+                },
+                getFormData: () => ({
+                    points,
+                    explanation,
+                    instruction,
+                    sentenceCount,
+                    title: groupTitle,
+                    subtitle: groupSubtitle,
+                    groupContent,
+                    imageUrl,
+                    groupNumber: currentGroupNumber,
+                    groups,
+                }),
+            };
+        }
+    }, [validationRef, points, explanation, instruction, sentenceCount, groupTitle, groupSubtitle, groupContent, imageUrl, currentGroupNumber, groups]);
+    // Sync from initialData
+    useEffect(() => {
+        const initialDataChanged = JSON.stringify(previousInitialDataRef.current) !== JSON.stringify(initialData);
+        if (initialDataChanged || !hasInitializedRef.current) {
+            isInitializingRef.current = true;
+            previousInitialDataRef.current = initialData;
+            hasInitializedRef.current = true;
+            if (initialData) {
+                setExplanation(initialData.explanation || '');
+                setPoints(initialData.points || 1);
+                setInstruction(initialData.instruction || '');
+                setSentenceCount(initialData.sentenceCount);
+            }
+            else {
+                setExplanation('');
+                setPoints(1);
+                setInstruction('');
+                setSentenceCount(undefined);
+            }
+            setTimeout(() => {
+                isInitializingRef.current = false;
+            }, 150);
+        }
+    }, [initialData]);
+    // Call onChange when data changes
+    useEffect(() => {
+        if (isInitializingRef.current) {
+            const currentPayload = JSON.stringify({
+                points,
+                explanation,
+                instruction,
+                sentenceCount,
+                title: groupTitle,
+                subtitle: groupSubtitle,
+                groupContent,
+                imageUrl,
+                groupNumber: currentGroupNumber,
+                groups,
+            });
+            previousPayloadRef.current = currentPayload;
+            return;
+        }
+        const payload = {
+            points,
+            explanation,
+            instruction,
+            sentenceCount,
+            title: groupTitle,
+            subtitle: groupSubtitle,
+            groupContent,
+            imageUrl,
+            groupNumber: currentGroupNumber,
+            groups,
+        };
+        const payloadString = JSON.stringify(payload);
+        if (previousPayloadRef.current !== payloadString) {
+            previousPayloadRef.current = payloadString;
+            debouncedOnChange(payload);
+        }
+    }, [points, explanation, instruction, sentenceCount, groupTitle, groupSubtitle, groupContent, imageUrl, currentGroupNumber, groups, debouncedOnChange]);
+    // Client mode preview
+    if (isClientMode) {
+        const questionData = {
+            points,
+            explanation,
+            instruction,
+            sentenceCount,
+        };
+        return (_jsxs("div", { className: "space-y-6", children: [_jsx(Card, { children: _jsx(CardHeader, { children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx(CardTitle, { children: "Write Sentences (Preview)" }), _jsx("p", { className: "mt-1 text-sm text-gray-500", children: "Ch\u1EBF \u0111\u1ED9 xem tr\u01B0\u1EDBc" })] }), _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(WriteSentencesClient, { questionData: questionData, onSubmit: () => { }, isReviewMode: true, explanation: explanation })] }));
+    }
+    // Creator UI
+    return (_jsxs("div", { className: "space-y-6", children: [isGrouped && (_jsx(BasicQuestionGroupCard, { groupNumber: currentGroupNumber, title: groupTitle, subtitle: groupSubtitle, content: groupContent, imageUrl: imageUrl, onTitleChange: setGroupTitle, onSubtitleChange: setGroupSubtitle, onContentChange: setGroupContent, onImageChange: setImageUrl, uploadIdPrefix: `write-sentences-${partId ?? 'group'}` })), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-teal-100/50", children: [_jsx("div", { className: "h-1.5 bg-gradient-to-r from-teal-400 to-emerald-500" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-teal-500 to-emerald-600 shadow-md", children: _jsx(PenLine, { className: "h-5 w-5 text-white" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-xl font-bold text-gray-900", children: "Vi\u1EBFt c\u00E2u" }), _jsx("p", { className: "text-sm text-gray-500", children: "H\u1ECDc sinh t\u1EF1 vi\u1EBFt m\u1ED9t c\u00E2u ho\u00E0n ch\u1EC9nh" })] })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(true), className: "gap-2 border-emerald-200 text-emerald-600 hover:bg-emerald-50 hover:text-emerald-700", children: [_jsx(Eye, { className: "h-4 w-4" }), "Xem tr\u01B0\u1EDBc"] })] }) }), _jsxs(CardContent, { className: "space-y-6", children: [_jsxs("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", children: [_jsx("div", { className: "rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4", children: _jsx(PointsInput, { defaultValue: points, onChange: (e) => setPoints(Number(e.target.value) || 1) }) }), _jsxs("div", { className: "rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4", children: [_jsxs(Label, { htmlFor: "sentenceCount", className: "flex items-center gap-2 text-sm font-semibold text-gray-800", children: [_jsx(Hash, { className: "h-4 w-4 text-teal-500" }), "S\u1ED1 c\u00E2u c\u1EA7n vi\u1EBFt ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Input, { id: "sentenceCount", type: "number", min: 1, max: 10, value: sentenceCount ?? '', onChange: (e) => {
+                                                    const raw = e.target.value;
+                                                    if (raw === '') {
+                                                        setSentenceCount(undefined);
+                                                    }
+                                                    else {
+                                                        const val = parseInt(raw, 10);
+                                                        setSentenceCount(isNaN(val) ? undefined : Math.max(1, val));
+                                                    }
+                                                    if (validationErrors.sentenceCount) {
+                                                        setValidationErrors((prev) => ({ ...prev, sentenceCount: undefined }));
+                                                    }
+                                                }, placeholder: "Nh\u1EADp s\u1ED1 c\u00E2u...", className: `mt-1.5 border-gray-200 bg-white transition-all focus:border-teal-300 focus:ring-teal-200 ${validationErrors.sentenceCount ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}` }), validationErrors.sentenceCount && (_jsx("p", { className: "mt-1 text-sm text-red-600", children: validationErrors.sentenceCount }))] })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: "instruction", className: "flex items-center gap-2 text-sm font-semibold text-gray-800", children: [_jsx(BookOpen, { className: "h-4 w-4 text-teal-500" }), "H\u01B0\u1EDBng d\u1EABn ", _jsx("span", { className: "text-xs font-normal text-gray-500", children: "(T\u00F9y ch\u1ECDn)" })] }), _jsx(Textarea, { id: "instruction", value: instruction, onChange: (e) => setInstruction(e.target.value), placeholder: "V\u00ED d\u1EE5: Now write two sentences about the picture.", rows: 2, className: "border-gray-200 bg-white transition-all focus:border-teal-300 focus:ring-teal-200" })] }), 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("div", { className: "h-1 bg-gradient-to-r from-amber-400 to-orange-400" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-9 w-9 items-center justify-center rounded-lg bg-gradient-to-br from-amber-500 to-orange-500 shadow-sm", children: _jsx(BookOpen, { className: "h-4 w-4 text-white" }) }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CardTitle, { className: "text-lg 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-sm 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, { 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 WriteSentencesCreator(props) {
+    return _jsx(WriteSentencesCreatorContent, { ...props });
+}

package/dist/components/questions/types/write-sentences/index.js

@@ -1 +1,2 @@
-export{WriteSentencesCreator}from"./WriteSentencesCreator";export{WriteSentencesClient}from"./WriteSentencesClient";
+export { WriteSentencesCreator } from './WriteSentencesCreator';
+export { WriteSentencesClient } from './WriteSentencesClient';