| 1 | "use client"; |
| 2 | |
| 3 | import { useCallback, useState } from "react"; |
| 4 | import { type UseFormSetValue } from "react-hook-form"; |
| 5 | |
| 6 | import { colorThemes } from "@/components/notebook/presentation/components/theme/create-theme/create-theme-types"; |
| 7 | import { type ThemeFormValues } from "@/components/notebook/presentation/components/theme/types"; |
| 8 | import { |
| 9 | type ThemeColorsKeys, |
| 10 | type ThemeProperties, |
| 11 | } from "@/lib/presentation/themes"; |
| 12 | |
| 13 | interface UseThemeCreationLogicProps { |
| 14 | setValue: UseFormSetValue<ThemeFormValues>; |
| 15 | initialTheme?: ThemeProperties; // Should be ThemeProperties or similar |
| 16 | } |
| 17 | |
| 18 | export function useThemeCreationLogic({ |
| 19 | setValue, |
| 20 | initialTheme, |
| 21 | }: UseThemeCreationLogicProps) { |
| 22 | const [selectedColorTheme, setSelectedColorTheme] = useState( |
| 23 | initialTheme ? "custom-theme" : (colorThemes[0]?.id ?? "custom-theme"), |
| 24 | ); |
| 25 | const [showAdvancedColors, setShowAdvancedColors] = useState(false); |
| 26 | |
| 27 | // Initialize form with initial theme if provided |
| 28 | // Note: This effect runs once when initialTheme changes (or on mount) |
| 29 | // Ideally setValue should be called in useEffect if we want to react to prop changes, |
| 30 | // but for initial load, defaultValues in useForm is better. |
| 31 | // However, since this logic is separated, we might need to handle it here or let the parent handle defaultValues. |
| 32 | // Let's assume parent handles defaultValues for the form, and this hook handles local state. |
| 33 | |
| 34 | const applyThemePreset = useCallback( |
| 35 | (themeId: string) => { |
| 36 | const preset = colorThemes.find((theme) => theme.id === themeId); |
| 37 | if (!preset) return; |
| 38 | |
| 39 | setSelectedColorTheme(themeId); |
| 40 | setValue("colors", preset.colors); |
| 41 | setValue("fonts", preset.fonts); |
| 42 | setValue("borderRadius", preset.borderRadius); |
| 43 | setValue("shadows", preset.shadows); |
| 44 | setValue("mode", preset.mode); |
| 45 | // For now don't set the background and leave it to be none |
| 46 | // setValue("background", preset.background); |
| 47 | setValue("transitions", preset.transitions); |
| 48 | setValue("mask", preset.mask); |
| 49 | }, |
| 50 | [setValue], |
| 51 | ); |
| 52 | |
| 53 | const linkedColorChange = useCallback( |
| 54 | (key: ThemeColorsKeys, value: string) => { |
| 55 | setValue(`colors.${key}`, value, { |
| 56 | shouldDirty: true, |
| 57 | }); |
| 58 | }, |
| 59 | [setValue], |
| 60 | ); |
| 61 | |
| 62 | return { |
| 63 | selectedColorTheme, |
| 64 | setSelectedColorTheme, |
| 65 | showAdvancedColors, |
| 66 | setShowAdvancedColors, |
| 67 | applyThemePreset, |
| 68 | linkedColorChange, |
| 69 | }; |
| 70 | } |
| 71 |