'use client';

import { Button } from '@/components/ui/button';
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 { cn } from '@/lib/utils';
import { Plus } from 'lucide-react';
import { useState } from 'react';

interface DatabaseNewSteps {
	display: string;
}

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

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

	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={}>
								<div className={cn('flex flex-row items-center gap-4 border-[1px] rounded-lg py-2 px-4', provider.value == newApplication.serviceProvider ? 'border-[#3A7BFE]' : 'border-gray-300')}>
									<RadioGroupItem value={'vitess'} id={'vitess'} />
									<label htmlFor={'vitess'} className="flex flex-row items-center gap-4">
										<img src={provider.image} alt={'Vitess'} className="w-8 h-8 rounded-full" />
										Vitess
									</label>
								</div>
							</RadioGroup> */}
						</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={() => {}}>
								Deploy
							</Button>
						) : (
							<Button
								className="bg-[#3A7BFE]"
								onClick={() => {
									setCurrentSteps((prev) => (prev + 1 > steps.length ? steps.length : prev + 1));
								}}
							>
								Next
							</Button>
						)}
					</div>
				</div>
			</SheetContent>
		</Sheet>
	);
}