latosa-escrima/frontend/components/photo-dialog.tsx

"use client";

import { useState, useEffect, useCallback } from "react";
import Image from "next/image";
import { useDropzone } from "react-dropzone";
import {
	Dialog,
	DialogContent,
	DialogHeader,
	DialogTitle,
	DialogDescription,
	DialogFooter,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import Media from "@/interfaces/Media";
import Link from "next/link";

interface PhotoDialogProps {
	photo?: Media;
	isOpen: boolean;
	onClose: () => void;
	onDelete?: (id: Media["id"]) => void;
	onSave: (photo: Omit<Media, "id"> | Media, file: File) => void;
}

export function PhotoDialog({
	photo,
	isOpen,
	onClose,
	onDelete,
	onSave,
}: PhotoDialogProps) {
	const [file, setFile] = useState<File | null>(null);
	const [newPhoto, setNewPhoto] = useState<Omit<Media, "id"> | Media>({
		url: "",
		alt: "",
		path: "",
		type: "",
		size: 0,
	});
	const [activeTab, setActiveTab] = useState<string>("url");

	useEffect(() => {
		setNewPhoto({
			url: photo?.url ?? "",
			alt: photo?.alt ?? "",
			type: photo?.type ?? "",
			path: photo?.path ?? "",
			size: photo?.size ?? 0,
		});
	}, [photo]);

	const onDrop = useCallback((acceptedFiles: File[]) => {
		const file = acceptedFiles[0];
		if (file) {
			setFile(file);
			const reader = new FileReader();
			reader.onload = (e) => {
				setNewPhoto((prev) => ({
					...prev,
					url: e.target?.result as string,
				}));
			};
			reader.readAsDataURL(file);
		}
	}, []);

	const { getRootProps, getInputProps, isDragActive } = useDropzone({
		onDrop,
		accept: { "image/*": [] },
	});

	const handleSave = () => {
		if (file) onSave(newPhoto, file);
		onClose();
	};

	const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
		const file = e.target.files?.[0];
		if (file) {
			setFile(file);
			const reader = new FileReader();
			reader.onload = (e) => {
				setNewPhoto((prev) => ({
					...prev,
					url: e.target?.result as string,
				}));
			};
			reader.readAsDataURL(file);
		}
	};

	const isAddMode = !photo;

	return (
		<Dialog open={isOpen} onOpenChange={onClose}>
			<DialogContent className="max-w-3xl">
				<DialogHeader>
					<DialogTitle>
						{isAddMode
							? "Ajouter une nouvelle photo"
							: "Éditer la photo"}
					</DialogTitle>
					<DialogDescription>
						{isAddMode
							? "Ajouter une nouvelle photo dans la gallerie"
							: "Mettre à jour les informations"}
					</DialogDescription>
				</DialogHeader>
				<Tabs value={activeTab} onValueChange={setActiveTab}>
					<TabsList className="grid w-full grid-cols-2">
						<TabsTrigger value="url">URL</TabsTrigger>
						<TabsTrigger value="drag">Drag & Drop</TabsTrigger>
					</TabsList>
					<TabsContent value="url" className="space-y-4">
						<div className="w-full space-y-2">
							<Label htmlFor="photo-src">URL de la photo</Label>
							<Input
								id="photo-src"
								value={newPhoto.url}
								onChange={(e) =>
									setNewPhoto({
										...newPhoto,
										url: e.target.value,
									})
								}
								placeholder="Enter URL for the image"
							/>
						</div>
					</TabsContent>
					<TabsContent value="drag" className="space-y-4">
						<div
							{...getRootProps()}
							className="border-2 border-dashed rounded-md p-8 text-center cursor-pointer"
						>
							<input {...getInputProps()} />
							{isDragActive ? (
								<p>Déposez une image ici...</p>
							) : (
								<p>
									Déposez une image directement ou cliquer
									pour sélectionner.
								</p>
							)}
						</div>
					</TabsContent>
				</Tabs>
				<div className="mt-4">
					<Link href={newPhoto.url} target="_blank">
						<Image
							src={newPhoto.url || "/placeholder.svg"}
							alt={newPhoto.alt}
							width={300}
							height={300}
							className="w-full max-h-[300px] object-contain rounded-md"
						/>
					</Link>
				</div>
				<div className="w-full space-y-2 mt-4">
					<Label htmlFor="alt-text">Description</Label>
					<Input
						id="alt-text"
						value={newPhoto.alt}
						onChange={(e) =>
							setNewPhoto({ ...newPhoto, alt: e.target.value })
						}
						placeholder="Entrer une description pour l'image"
					/>
				</div>
				<DialogFooter className="sm:justify-between">
					{!isAddMode && onDelete && (
						<Button
							variant="destructive"
							onClick={() => onDelete(photo.id)}
						>
							Supprimer la photo
						</Button>
					)}
					<div className="flex space-x-2">
						<Button variant="outline" onClick={onClose}>
							Annuler
						</Button>
						<Button
							onClick={handleSave}
							disabled={!newPhoto.url || !newPhoto.alt}
						>
							{isAddMode ? "Ajouter" : "Mettre à jour"}
						</Button>
					</div>
				</DialogFooter>
			</DialogContent>
		</Dialog>
	);
}