import { type JSX } from "solid-js";
import { useAppShellData } from "../../app-shell/data/app-shell.context";
import { useBootstrapWizard } from "./BootstrapWizard.hook";
import { BootstrapWizardDialog } from "./BootstrapWizardDialog";

export const BootstrapWizard = (): JSX.Element => {
	const appShellData = useAppShellData();
	const {
		instanceForm,
		setInstanceForm,
		modeForm,
		setModeForm,
		adminForm,
		setAdminForm,
		structureForm,
		setStructureForm,
		selectedPersona,
		hasChosenPersona,
		stepState,
		isBootstrapStateResolved,
		isWizardOpen,
		setIsWizardOpen,
		setIsFinishingBootstrapFlow,
		fieldTooltip,
		materializationState,
		isMaterializationInFlight,
		hasMaterializationFailed,
		showBootstrapFinishingState,
		materializationStatusLabel,
		materializationMessage,
		selectedPersonaIsAvailable,
		usesCondensedBootstrapFlow,
		activeWizardSteps,
		bootstrapNamePlaceholder,
		bootstrapStepCount,
		currentStep,
		currentWizardStepIndex,
		wizardProgressFillWidth,
		currentStepState,
		isFirstStep,
		canDismissWizard,
		handleCurrentStepSubmit,
		applyPersonaSelection,
		statusLabel,
		showFieldTooltip,
		hideFieldTooltip,
		stepStatusLabel,
		navigateBack,
		navigateToVisibleStep,
	} = useBootstrapWizard(appShellData);

	return (
		<BootstrapWizardDialog
			isOpen={isBootstrapStateResolved() && isWizardOpen()}
			currentStep={currentStep()}
			currentStepState={currentStepState()}
			activeWizardSteps={activeWizardSteps()}
			currentWizardStepIndex={currentWizardStepIndex()}
			stepState={stepState}
			bootstrapStepCount={bootstrapStepCount()}
			wizardProgressFillWidth={wizardProgressFillWidth()}
			showBootstrapFinishingState={showBootstrapFinishingState()}
			materializationState={materializationState()}
			materializationStatusLabel={materializationStatusLabel()}
			materializationMessage={materializationMessage()}
			isMaterializationInFlight={isMaterializationInFlight()}
			hasMaterializationFailed={hasMaterializationFailed()}
			instanceForm={instanceForm}
			modeForm={modeForm}
			adminForm={adminForm}
			structureForm={structureForm}
			selectedPersona={selectedPersona()}
			hasChosenPersona={hasChosenPersona()}
			selectedPersonaIsAvailable={selectedPersonaIsAvailable()}
			usesCondensedBootstrapFlow={usesCondensedBootstrapFlow()}
			bootstrapNamePlaceholder={bootstrapNamePlaceholder()}
			isFirstStep={isFirstStep()}
			canDismissWizard={canDismissWizard()}
			fieldTooltip={fieldTooltip()}
			onClose={(): void => {
				setIsWizardOpen(false);
			}}
			onCloseFinishingState={(): void => {
				setIsFinishingBootstrapFlow(false);
				setIsWizardOpen(false);
			}}
			onSubmit={handleCurrentStepSubmit}
			onSelectPersona={applyPersonaSelection}
			onProtocolChange={(value): void => setInstanceForm("protocol", value)}
			onAccessChange={(value): void => setInstanceForm("access", value)}
			onHostChange={(value): void => setInstanceForm("host", value)}
			onModeNameChange={(value): void => setModeForm("name", value)}
			onProjectNameChange={(value): void => setStructureForm("projectName", value)}
			onTeamNameChange={(value): void => setStructureForm("teamName", value)}
			onAdminDisplayNameChange={(value): void => setAdminForm("displayName", value)}
			onAdminEmailChange={(value): void => setAdminForm("email", value)}
			onAdminPasswordChange={(value): void => setAdminForm("password", value)}
			onDepartmentNameChange={(value): void => setStructureForm("departmentName", value)}
			onShowTooltip={showFieldTooltip}
			onHideTooltip={hideFieldTooltip}
			statusLabel={statusLabel}
			stepStatusLabel={stepStatusLabel}
			onNavigateBack={navigateBack}
			onSelectStep={navigateToVisibleStep}
		/>
	);
};