"use client"

import type { IProjectWizardProps } from "./ProjectWizard.d"
import type { JSX } from "react"

import cs from "classnames"
import { FunctionComponent } from "react"

import {
	useWizard,
	WIZARD_STEPS,
} from "@shared/context/WizardContext"
import { Stepper } from "@shared/ui"
import { FragmentsStep } from "@features/project/FragmentsStep"
import { ProcessingStep } from "@features/project/ProcessingStep"
import { SilenceSettingsStep } from "@features/project/SilenceSettingsStep"
import { SubtitleRevisionStep } from "@features/project/SubtitleRevisionStep"
import { TranscriptionSettingsStep } from "@features/project/TranscriptionSettingsStep"
import { UploadStep } from "@features/project/UploadStep"
import { CaptionResultStep } from "@features/project/CaptionResultStep"
import { CaptionSettingsStep } from "@features/project/CaptionSettingsStep"
import { VerifyStep } from "@features/project/VerifyStep"

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

const STEP_COMPONENTS: Record<string, FunctionComponent> = {
	upload: UploadStep,
	verify: VerifyStep,
	"silence-settings": SilenceSettingsStep,
	processing: ProcessingStep,
	fragments: FragmentsStep,
	"silence-apply-processing": ProcessingStep,
	"transcription-settings": TranscriptionSettingsStep,
	"transcription-processing": ProcessingStep,
	"subtitle-revision": SubtitleRevisionStep,
	"caption-settings": CaptionSettingsStep,
	"caption-processing": ProcessingStep,
	"caption-result": CaptionResultStep,
}

export const ProjectWizard: FunctionComponent<IProjectWizardProps> = ({
	className,
}): JSX.Element => {
	const { currentStep, completedSteps } = useWizard()

	const StepComponent = STEP_COMPONENTS[currentStep]

	return (
		<div className={cs(styles.root, className)} data-testid="ProjectWizard">
			<Stepper
				steps={[...WIZARD_STEPS]}
				currentStep={currentStep}
				completedSteps={[...completedSteps]}
				className={styles.stepper}
			/>
			<div className={styles.content}>
				{StepComponent && <StepComponent />}
			</div>
		</div>
	)
}
