| 1 | "use client"; |
| 2 | |
| 3 | import { useCallback, useState } from "react"; |
| 4 | import { type UseFormHandleSubmit } from "react-hook-form"; |
| 5 | |
| 6 | import { type CreateThemeStep } from "@/components/notebook/presentation/components/theme/create-theme/create-theme-types"; |
| 7 | import { type ThemeFormValues } from "@/components/notebook/presentation/components/theme/types"; |
| 8 | |
| 9 | const STEP_ORDER: CreateThemeStep[] = ["colors", "fonts", "design", "save"]; |
| 10 | |
| 11 | interface UseStepNavigationProps { |
| 12 | onClose: () => void; |
| 13 | handleSubmit: UseFormHandleSubmit<ThemeFormValues>; |
| 14 | onSubmit: (data: ThemeFormValues) => Promise<void>; |
| 15 | } |
| 16 | |
| 17 | export function useStepNavigation({ |
| 18 | onClose, |
| 19 | handleSubmit, |
| 20 | onSubmit, |
| 21 | }: UseStepNavigationProps) { |
| 22 | const [currentStep, setCurrentStep] = useState<CreateThemeStep>("colors"); |
| 23 | |
| 24 | const handleContinue = useCallback(() => { |
| 25 | const index = STEP_ORDER.indexOf(currentStep); |
| 26 | const nextStep = STEP_ORDER[index + 1]; |
| 27 | if (nextStep) { |
| 28 | setCurrentStep(nextStep); |
| 29 | } else { |
| 30 | // Use handleSubmit for form validation |
| 31 | void handleSubmit(onSubmit)(); |
| 32 | } |
| 33 | }, [currentStep, handleSubmit, onSubmit]); |
| 34 | |
| 35 | const handleBack = useCallback(() => { |
| 36 | const index = STEP_ORDER.indexOf(currentStep); |
| 37 | const previousStep = STEP_ORDER[index - 1]; |
| 38 | if (!previousStep) { |
| 39 | onClose(); |
| 40 | } else { |
| 41 | setCurrentStep(previousStep); |
| 42 | } |
| 43 | }, [currentStep, onClose]); |
| 44 | |
| 45 | return { |
| 46 | currentStep, |
| 47 | setCurrentStep, |
| 48 | handleContinue, |
| 49 | handleBack, |
| 50 | }; |
| 51 | } |
| 52 |