2024-11-14 09:08:45 +01:00
|
|
|
import { Button } from "@/components/ui/button";
|
|
|
|
import { Input } from "@/components/ui/input";
|
|
|
|
import {
|
|
|
|
Select,
|
|
|
|
SelectContent,
|
|
|
|
SelectItem,
|
|
|
|
SelectTrigger,
|
|
|
|
SelectValue,
|
|
|
|
} from "@/components/ui/select";
|
|
|
|
import { AlertColors } from "@/config/siteConfig";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
import { PlusCircle, Trash2 } from "lucide-react";
|
|
|
|
import { z } from "zod";
|
2024-11-28 15:50:40 +01:00
|
|
|
import { ScriptSchema, type Script } from "../_schemas/schemas";
|
2024-12-06 15:12:35 -05:00
|
|
|
import { memo, useCallback, useRef } from "react";
|
2024-11-14 09:08:45 +01:00
|
|
|
|
|
|
|
type NoteProps = {
|
|
|
|
script: Script;
|
|
|
|
setScript: (script: Script) => void;
|
|
|
|
setIsValid: (isValid: boolean) => void;
|
|
|
|
setZodErrors: (zodErrors: z.ZodError | null) => void;
|
|
|
|
};
|
2024-11-15 18:16:19 +01:00
|
|
|
|
|
|
|
function Note({
|
2024-11-14 09:08:45 +01:00
|
|
|
script,
|
|
|
|
setScript,
|
|
|
|
setIsValid,
|
|
|
|
setZodErrors,
|
|
|
|
}: NoteProps) {
|
2024-12-06 15:12:35 -05:00
|
|
|
const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
|
|
|
|
|
2024-11-15 18:16:19 +01:00
|
|
|
const addNote = useCallback(() => {
|
|
|
|
setScript({
|
2024-11-14 09:08:45 +01:00
|
|
|
...script,
|
|
|
|
notes: [...script.notes, { text: "", type: "" }],
|
2024-11-15 18:16:19 +01:00
|
|
|
});
|
|
|
|
}, [script, setScript]);
|
2024-11-14 09:08:45 +01:00
|
|
|
|
2024-11-15 18:16:19 +01:00
|
|
|
const updateNote = useCallback((
|
2024-11-14 09:08:45 +01:00
|
|
|
index: number,
|
|
|
|
key: keyof Script["notes"][number],
|
|
|
|
value: string,
|
|
|
|
) => {
|
|
|
|
const updated: Script = {
|
|
|
|
...script,
|
2024-11-15 18:16:19 +01:00
|
|
|
notes: script.notes.map((note, i) =>
|
2024-11-14 09:08:45 +01:00
|
|
|
i === index ? { ...note, [key]: value } : note,
|
|
|
|
),
|
|
|
|
};
|
|
|
|
const result = ScriptSchema.safeParse(updated);
|
|
|
|
setIsValid(result.success);
|
2024-11-15 18:16:19 +01:00
|
|
|
setZodErrors(result.success ? null : result.error);
|
2024-11-14 09:08:45 +01:00
|
|
|
setScript(updated);
|
2024-12-06 15:12:35 -05:00
|
|
|
// Restore focus after state update
|
|
|
|
if (key === "text") {
|
|
|
|
setTimeout(() => {
|
|
|
|
inputRefs.current[index]?.focus();
|
|
|
|
}, 0);
|
|
|
|
}
|
2024-11-15 18:16:19 +01:00
|
|
|
}, [script, setScript, setIsValid, setZodErrors]);
|
2024-11-14 09:08:45 +01:00
|
|
|
|
2024-11-15 18:16:19 +01:00
|
|
|
const removeNote = useCallback((index: number) => {
|
|
|
|
setScript({
|
2024-11-14 09:08:45 +01:00
|
|
|
...script,
|
2024-11-15 18:16:19 +01:00
|
|
|
notes: script.notes.filter((_, i) => i !== index),
|
|
|
|
});
|
|
|
|
}, [script, setScript]);
|
|
|
|
|
2024-12-06 15:12:35 -05:00
|
|
|
const NoteItem = memo(
|
|
|
|
({ note, index }: { note: Script["notes"][number]; index: number }) => (
|
|
|
|
<div className="space-y-2 border p-4 rounded">
|
|
|
|
<Input
|
|
|
|
placeholder="Note Text"
|
|
|
|
value={note.text}
|
|
|
|
onChange={(e) => updateNote(index, "text", e.target.value)}
|
|
|
|
ref={(el) => {
|
|
|
|
inputRefs.current[index] = el;
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
<Select
|
|
|
|
value={note.type}
|
|
|
|
onValueChange={(value) => updateNote(index, "type", value)}
|
|
|
|
>
|
|
|
|
<SelectTrigger className="flex-1">
|
|
|
|
<SelectValue placeholder="Type" />
|
|
|
|
</SelectTrigger>
|
|
|
|
<SelectContent>
|
|
|
|
{Object.keys(AlertColors).map((type) => (
|
|
|
|
<SelectItem key={type} value={type}>
|
|
|
|
<span className="flex items-center gap-2">
|
|
|
|
{type.charAt(0).toUpperCase() + type.slice(1)}{" "}
|
|
|
|
<div
|
|
|
|
className={cn(
|
|
|
|
"size-4 rounded-full border",
|
|
|
|
AlertColors[type as keyof typeof AlertColors],
|
|
|
|
)}
|
|
|
|
/>
|
|
|
|
</span>
|
|
|
|
</SelectItem>
|
|
|
|
))}
|
|
|
|
</SelectContent>
|
|
|
|
</Select>
|
|
|
|
<Button
|
|
|
|
size="sm"
|
|
|
|
variant="destructive"
|
|
|
|
type="button"
|
|
|
|
onClick={() => removeNote(index)}
|
|
|
|
>
|
|
|
|
<Trash2 className="mr-2 h-4 w-4" /> Remove Note
|
|
|
|
</Button>
|
|
|
|
</div>
|
|
|
|
),
|
|
|
|
);
|
2024-11-15 18:16:19 +01:00
|
|
|
|
|
|
|
NoteItem.displayName = 'NoteItem';
|
2024-11-14 09:08:45 +01:00
|
|
|
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<h3 className="text-xl font-semibold">Notes</h3>
|
|
|
|
{script.notes.map((note, index) => (
|
2024-11-15 18:16:19 +01:00
|
|
|
<NoteItem key={index} note={note} index={index} />
|
2024-11-14 09:08:45 +01:00
|
|
|
))}
|
2024-11-15 18:16:19 +01:00
|
|
|
<Button type="button" size="sm" onClick={addNote}>
|
2024-11-14 09:08:45 +01:00
|
|
|
<PlusCircle className="mr-2 h-4 w-4" /> Add Note
|
|
|
|
</Button>
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
}
|
2024-11-15 18:16:19 +01:00
|
|
|
|
|
|
|
export default memo(Note);
|