"use client"

import type { IProjectWizardPageProps } from "./ProjectWizardPage.d"
import type { JSX } from "react"

import { useParams } from "next/navigation"
import { FunctionComponent, useEffect } from "react"

import api from "@shared/api"
import { useBreadcrumbs } from "@shared/context/BreadcrumbsContext"
import { WizardProvider } from "@shared/context/WizardContext"
import { WorkspaceProvider } from "@shared/context/WorkspaceContext"
import { ProjectWizard } from "@widgets/ProjectWizard"

import styles from "./ProjectWizardPage.module.scss"

export const ProjectWizardPage: FunctionComponent<
	IProjectWizardPageProps
> = (): JSX.Element => {
	const params = useParams<{ project_id: string }>()
	const projectId = params?.project_id ?? ""

	const { data: project } = api.useQuery(
		"get",
		"/api/projects/{project_id}/",
		{
			params: { path: { project_id: projectId } },
		},
	)

	useBreadcrumbs([
		{ label: "Проекты", href: "/projects" },
		{ label: project?.name ?? "..." },
	])

	useEffect(() => {
		document.body.dataset.projectWizardLayout = "true"

		return () => {
			delete document.body.dataset.projectWizardLayout
		}
	}, [])

	return (
		<WorkspaceProvider projectId={projectId}>
			<WizardProvider projectId={projectId}>
				<div
					className={styles.root}
					data-testid="ProjectWizardPage"
				>
					<ProjectWizard />
				</div>
			</WizardProvider>
		</WorkspaceProvider>
	)
}
