| 1 | "use client"; |
| 2 | |
| 3 | import { useMemo } from "react"; |
| 4 | import { useWatch, type Control } from "react-hook-form"; |
| 5 | |
| 6 | import { type PreviewTab } from "@/components/notebook/presentation/components/theme/create-theme/create-theme-types"; |
| 7 | import { testSlides } from "@/components/notebook/presentation/components/theme/create-theme/test-slide"; |
| 8 | import { type ThemeFormValues } from "@/components/notebook/presentation/components/theme/types"; |
| 9 | import { type ThemeProperties } from "@/lib/presentation/themes"; |
| 10 | import { type PlateSlide } from "../../../utils/parser"; |
| 11 | |
| 12 | interface UsePreviewDataProps { |
| 13 | control: Control<ThemeFormValues>; |
| 14 | previewTab: PreviewTab; |
| 15 | currentSlides: PlateSlide[]; |
| 16 | } |
| 17 | |
| 18 | export function usePreviewData({ |
| 19 | control, |
| 20 | previewTab, |
| 21 | currentSlides, |
| 22 | }: UsePreviewDataProps) { |
| 23 | // Use useWatch to properly subscribe to form changes |
| 24 | const values = useWatch({ control }); |
| 25 | |
| 26 | const previewThemeData: ThemeProperties = useMemo( |
| 27 | () => |
| 28 | ({ |
| 29 | name: values.name || "Preview Theme", |
| 30 | description: values.description || "", |
| 31 | colors: values.colors, |
| 32 | fonts: values.fonts as ThemeProperties["fonts"], |
| 33 | borderRadius: values.borderRadius, |
| 34 | transitions: values.transitions, |
| 35 | shadows: values.shadows, |
| 36 | background: values.background, |
| 37 | mode: values.mode ?? "light", |
| 38 | }) as ThemeProperties, |
| 39 | [JSON.stringify(values)], |
| 40 | ); |
| 41 | |
| 42 | const slidesToDisplay = useMemo(() => { |
| 43 | if (previewTab === "test") { |
| 44 | return testSlides; |
| 45 | } |
| 46 | return currentSlides.length > 0 ? currentSlides : testSlides; |
| 47 | }, [previewTab, currentSlides]); |
| 48 | |
| 49 | return { |
| 50 | previewThemeData, |
| 51 | slidesToDisplay, |
| 52 | }; |
| 53 | } |
| 54 |