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

'use client';

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 { cn } from '@/lib/utils';
import { Plus } from 'lucide-react';
import Image from 'next/image';
import { useState } from 'react';

interface DatabaseNewSteps {
	display: string;
}

interface IDatabaseProvider {
	id: string;
	display: string;
	image: {
		alt: string;
		src: string;
	};
}

export interface IDatabaseConfig {
	name: string;
	provider: IDatabaseProvider;
	user: {
		username: string;
		password: string;
	};
}

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

const databaseProviders: IDatabaseProvider[] = [
	{
		id: 'vitess',
		display: 'Vitess',
		image: {
			alt: 'Vitess',
			src: '/vitess.png',
		},
	},
	{
		id: 'redis',
		display: 'Redis',
		image: {
			alt: 'Redis',
			src: '/redis.svg',
		},
	},
];

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

	// TODO: Generate all data, but leave the user the choice to modify
	const defaultDatabaseConfig: IDatabaseConfig = {
		name: 'my-new-cool-db',
		provider: databaseProviders[0],
		user: {
			username: 'my-new-super-user',
			password: 'a-super-strong-generated-password',
		},
	};

	const [databaseConfig, setDatabaseConfig] = useState<IDatabaseConfig>(defaultDatabaseConfig);

	const { id } = useWorkspace();

	return (
		<Sheet open={open} onOpenChange={() => setOpen((open) => !open)}>
			<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"
								onValueChange={(id) => {
									setDatabaseConfig((prev) => ({ ...prev, provider: databaseProviders.filter((provider) => provider.id == id)[0] }));
								}}
							>
								{databaseProviders.map((provider) => (
									<div 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>
							<p>WIP for now 1CPU 2048Mb RAM</p>
							<p>Storage 1 GB</p>
						</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>
							<h2>Review your new database information :</h2>
							<p>Type : {databaseConfig.provider.display}</p>
							<p>Name : {databaseConfig.name}</p>
							<p>Username : {databaseConfig.user.username}</p>
							<p>Password : {databaseConfig.user.password}</p>
						</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);
									});
								}}
							>
								Deploy
							</Button>
						) : (
							<Button
								className="bg-[#3A7BFE]"
								onClick={() => {
									setCurrentSteps((prev) => (prev + 1 > steps.length ? steps.length : prev + 1));
								}}
							>
								Next
							</Button>
						)}
					</div>
				</div>
			</SheetContent>
		</Sheet>
	);
}