frontend/app/(deploy)/[workspace]/databases/database-new-form.tsx

'use client';

import { PostgresSpecsPage } from '@/components/deploy/database/provider/postgres';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Progress } from '@/components/ui/progress';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
import { useWorkspace } from '@/hooks/useWorkspace';
import { deployDatabase } from '@/lib/deploy/database';
import { databaseProviders, defaultDatabaseConfiguration, IDatabaseConfiguration } from '@/lib/deploy/database-config';
import { cn } from '@/lib/utils';
import { Plus } from 'lucide-react';
import Image from 'next/image';
import { useRouter } from 'next/navigation';
import { useState } from 'react';

interface DatabaseNewSteps {
	display: string;
}

const steps: DatabaseNewSteps[] = [
	{
		display: 'Database Type',
	},
	{
		display: 'Configuration',
	},
	{
		display: 'Name & User',
	},
	{
		display: 'Review & Deploy',
	},
];

export default function DatabaseNewForm() {
	const [open, setOpen] = useState<boolean>(false);
	const [currentSteps, setCurrentSteps] = useState<number>(1);

	const router = useRouter();
	const { id } = useWorkspace();

	const [databaseConfig, setDatabaseConfig] = useState<IDatabaseConfiguration>(defaultDatabaseConfiguration(id));

	return (
		<Sheet
			open={open}
			onOpenChange={() => {
				setOpen((open) => !open);
				if (!open) {
					setDatabaseConfig(defaultDatabaseConfiguration(id));
					setCurrentSteps(1);
				}
			}}
		>
			<SheetTrigger asChild>
				<Button className="flex gap-1 justify-center items-center bg-[#3A7BFE]">
					<Plus />
					New Database
				</Button>
			</SheetTrigger>
			<SheetContent className="min-w-[500px]">
				<SheetHeader>
					<SheetTitle className="text-2xl">New Database</SheetTitle>
					<SheetDescription>Deploy a new database</SheetDescription>
				</SheetHeader>
				<div className="flex flex-col">
					<div className="flex flex-col gap-2 my-6">
						<div className="flex flex-row justify-between">
							<p>
								Step: <span className="text-muted-foreground">{steps[currentSteps - 1].display}</span>
							</p>
							<p>
								{currentSteps} / {steps.length}
							</p>
						</div>
						<Progress className="bg-gray-300 h-3 " color="red" value={currentSteps * (100 / steps.length)} max={100} indicatorColor="bg-[#3A7BFE]" />
					</div>

					{currentSteps == 1 && (
						<div>
							<RadioGroup
								defaultValue={'vitess'}
								className="flex flex-col gap-2 mb-4"
								value={databaseConfig.provider.id}
								onValueChange={(id) => {
									setDatabaseConfig((prev) => ({ ...prev, provider: databaseProviders.filter((provider) => provider.id == id)[0] }));
								}}
							>
								{databaseProviders.map((provider) => (
									<div key={provider.id} className={cn('flex flex-row items-center gap-4 border-[1px] rounded-lg py-2 px-4', databaseConfig?.provider.id == provider.id ? 'border-[#3A7BFE]' : 'border-gray-300')}>
										<RadioGroupItem value={provider.id} id={provider.id} />
										<label htmlFor={provider.id} className="flex flex-row items-center gap-4">
											<div className="w-8 h-8 rounded-full relative">
												<Image src={provider.image.src} alt={provider.image.alt} fill />
											</div>
											{provider.display}
										</label>
									</div>
								))}
							</RadioGroup>
						</div>
					)}

					{currentSteps == 2 && (
						<div>
							{databaseConfig.provider.id == 'vitess' && <div>Vitess</div>}
							{databaseConfig.provider.id == 'redis' && <div>Redis</div>}
							{databaseConfig.provider.id == 'postgres' && <PostgresSpecsPage config={databaseConfig} setConfig={setDatabaseConfig} />}
						</div>
					)}

					{currentSteps == 3 && (
						<div>
							<Label>Database Name</Label>
							<Input
								className="mb-2"
								type="text"
								placeholder="super-cool-database"
								value={databaseConfig.name}
								onChange={(e) => {
									setDatabaseConfig((prev) => ({ ...prev, name: e.target.value }));
								}}
							/>

							<Label>Username</Label>
							<Input
								className="mb-2"
								type="text"
								placeholder="root"
								value={databaseConfig.user.username}
								onChange={(e) => {
									setDatabaseConfig((prev) => ({ ...prev, user: { ...prev.user, username: e.target.value } }));
								}}
							/>

							<Label>Password</Label>
							<Input
								className="mb-2"
								type="password"
								placeholder="Strong Password"
								value={databaseConfig.user.password}
								onChange={(e) => {
									setDatabaseConfig((prev) => ({ ...prev, user: { ...prev.user, password: e.target.value } }));
								}}
							/>
							<div className="" />
						</div>
					)}

					{currentSteps == 4 && (
						<div>
							<div className="flex flex-col gap-2">
								<div>
									<p className="text-muted-foreground text-sm">Database Type</p>
									<p>{databaseConfig.provider.display}</p>
								</div>
								<div>
									<p className="text-muted-foreground text-sm">CPUs</p>
									<p>{databaseConfig.specs.cpu}</p>
								</div>
								<div>
									<p className="text-muted-foreground text-sm">RAM</p>
									<p>{databaseConfig.specs.memory}</p>
								</div>
								<div>
									<p className="text-muted-foreground text-sm">Storage</p>
									<p>{databaseConfig.specs.storage}</p>
								</div>
								<div>
									<p className="text-muted-foreground text-sm">Name</p>
									<p>{databaseConfig.name}</p>
								</div>
								<div>
									<p className="text-muted-foreground text-sm">Username</p>
									<p>{databaseConfig.user.username}</p>
								</div>
								<div>
									<p className="text-muted-foreground text-sm">Password</p>
									<p>{databaseConfig.user.password}</p>
								</div>
							</div>
						</div>
					)}

					<div className="flex flex-row justify-between my-6">
						<Button
							variant={'outline'}
							className={cn(currentSteps == 1 && 'opacity-0 pointer-events-none select-none')}
							onClick={() => {
								setCurrentSteps((prev) => (prev - 1 < 1 ? 1 : prev - 1));
							}}
						>
							Back
						</Button>
						{currentSteps == steps.length ? (
							<Button
								className="bg-[#3A7BFE]"
								onClick={() => {
									deployDatabase(databaseConfig)
										.then((res) => {
											console.log(res);
											setOpen(false);
											setCurrentSteps(1);
											setDatabaseConfig(defaultDatabaseConfiguration(id));
											router.refresh();
										})
										.catch((err) => {
											console.error(err);
										});
								}}
							>
								Deploy
							</Button>
						) : (
							<Button
								className="bg-[#3A7BFE]"
								onClick={() => {
									setCurrentSteps((prev) => (prev + 1 > steps.length ? steps.length : prev + 1));
								}}
							>
								Next
							</Button>
						)}
					</div>
				</div>
			</SheetContent>
		</Sheet>
	);
}