client-side-pages.tsx

import { useCallback, useState } from "react"
import { DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "../ui/dialog"
import { FileUploadPage } from "./pages/upload"
import { PageProps } from "./pages/types"
import { ModalControlButton } from "./control-button"
import { SelectTargetPage } from "./pages/select-target"

type Page = {
    title: string,
    component: (props: PageProps) => JSX.Element
}

const MODAL_PAGES: Page[] = [
    {
        title: "Upload a CSV file",
        component: FileUploadPage
    },
    {
        title: "Select the target variable",
        component: SelectTargetPage
    }
]

export const ModalCreationModal = () => {
    const [currentPage, setCurrentPage] = useState(0)
    const [isNextStepUnblocked, setIsNextStepAllowed] = useState(false)

    const isPreviousPageAccessible = currentPage !== 0
    const isNextPageIsAccessible = currentPage < MODAL_PAGES.length - 1

    const goNextPage = useCallback(() => {
        if (currentPage < MODAL_PAGES.length - 1) {
            setCurrentPage((page) => page + 1)
        }
    }, [currentPage, setCurrentPage])

    const goPreviousPage = useCallback(() => {
        if (currentPage > 0) {
            setCurrentPage((page) => page - 1)
        }
    }, [currentPage, setCurrentPage])

    const CurrentPage = MODAL_PAGES[currentPage].component

    return (
        <DialogContent className="min-h-96 max-w-5xl">
            <DialogHeader>
                <DialogTitle>Create a model</DialogTitle>
                <DialogDescription>
                    {MODAL_PAGES[currentPage].title}
                </DialogDescription>
            </DialogHeader>
            <div className="flex items-center min-h-80">
                <CurrentPage setIsNextStepAllowed={setIsNextStepAllowed} />
            </div>
            <DialogFooter className="flex justify-between h-fit bottom-2.5">
                <ModalControlButton disabled={false} text="Go Back" onClick={goPreviousPage} visible={isPreviousPageAccessible} />
                <ModalControlButton disabled={!isNextStepUnblocked} text="Next Step" onClick={goNextPage} visible={isNextPageIsAccessible} />
            </DialogFooter>
        </DialogContent>
    )
}