'use client';

import { Button } from '@/components/ui/button';
import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import { Plus } from 'lucide-react';
import { useEffect, useState } from 'react';
import { cn } from '@/lib/utils';
import Link from 'next/link';

export const ServiceProviderList = [
	{
		name: 'GitHub',
		value: 'github',
		image: 'https://github.githubassets.com/assets/GitHub-Mark-ea2971cee799.png',
		permission: 'https://github.com/apps/stalin-deploy/installations/new',
	},
	{
		name: 'Registry',
		value: 'registry',
		image: '',
	},
	{
		name: 'Github Registry',
		value: 'github-registry',
		image: 'https://github.githubassets.com/assets/GitHub-Mark-ea2971cee799.png',
	},
];

export default function CreateApplicationForm() {
	const [serviceProvider, setServiceProvider] = useState<string>('github');

	return (
		<Sheet>
			<SheetTrigger asChild>
				<Button className="flex gap-1 justify-center items-center bg-[#3A7BFE]">
					<Plus />
					New Application
				</Button>
			</SheetTrigger>
			<SheetContent className="min-w-[500px]">
				<SheetHeader>
					<SheetTitle>New Application</SheetTitle>
					<SheetDescription>Deploy a new application from source</SheetDescription>
				</SheetHeader>
				<div>
					<h3>Select Provider</h3>
					<RadioGroup defaultValue="github" className="flex flex-col gap-4" onValueChange={setServiceProvider}>
						{ServiceProviderList.map((provider) => (
							<div key={provider.value} className={cn('flex flex-row items-center gap-4 border-[1px] rounded-lg py-2 px-4', provider.value == serviceProvider ? 'border-[#3A7BFE]' : 'border-gray-300')}>
								<RadioGroupItem value={provider.value} id={provider.value} />
								<label htmlFor={provider.value} className="flex flex-row items-center gap-4">
									<img src={provider.image} alt={provider.name} className="w-8 h-8 rounded-full" />
									{provider.name}
								</label>
							</div>
						))}
					</RadioGroup>
					{(serviceProvider == 'github' || serviceProvider == 'github-registry') && (
						<p>
							Not seeing the repositories you expected here? <Link href={ServiceProviderList.find((s) => s.value == serviceProvider)?.permission || ''}>Edit Your GitHub Permissions</Link>
						</p>
					)}
				</div>
			</SheetContent>
		</Sheet>
	);
}
