"use client";

import {
	Table,
	TableBody,
	TableCell,
	TableHead,
	TableHeader,
	TableRow,
} from "@/components/ui/table";
import { Button } from "@/components/ui/button";
import {
	DropdownMenu,
	DropdownMenuContent,
	DropdownMenuItem,
	DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { MoreHorizontal } from "lucide-react";
import type IShortcode from "@/interfaces/IShortcode";
import ShortcodeDialog from "@/components/shortcode-dialogue";
import { useState } from "react";

interface ShortcodeTableProps {
	shortcodes: IShortcode[];
	onUpdate: (shortcode: IShortcode) => void;
	onDelete: (id: string) => void;
	onAdd: (shortcode: Omit<IShortcode, "id">) => void;
}

export function ShortcodeTable({
	shortcodes,
	onUpdate,
	onDelete,
	onAdd,
}: ShortcodeTableProps) {
	const [shortcodeSelected, setUpdateDialog] = useState<IShortcode | null>(
		null,
	);
	const [addDialog, setAddDialog] = useState<boolean>(false);
	return (
		<div>
			<div className="mb-4">
				<Button
					onClick={() => {
						setAddDialog(true);
					}}
				>
					Ajouter
				</Button>
				<ShortcodeDialog
					onSave={onAdd}
					open={addDialog}
					setOpen={() => setAddDialog(false)}
				/>
			</div>
			<div className="rounded-md border">
				<Table>
					<TableHeader>
						<TableRow>
							<TableHead>ID</TableHead>
							<TableHead>Code</TableHead>
							<TableHead>Type</TableHead>
							<TableHead>Valeur</TableHead>
							<TableHead>Media ID</TableHead>
							<TableHead className="w-[80px]">Actions</TableHead>
						</TableRow>
					</TableHeader>
					<TableBody>
						{shortcodes.map((shortcode) => (
							<TableRow key={shortcode.id}>
								<TableCell>{shortcode.id}</TableCell>
								<TableCell>{shortcode.code}</TableCell>
								<TableCell>{shortcode.type}</TableCell>
								<TableCell>
									{shortcode.value || "N/A"}
								</TableCell>
								<TableCell>
									{shortcode.media_id || "N/A"}
								</TableCell>
								<TableCell>
									<DropdownMenu>
										<DropdownMenuTrigger asChild>
											<Button
												variant="ghost"
												className="h-8 w-8 p-0"
											>
												<span className="sr-only">
													Ouvrir le menu
												</span>
												<MoreHorizontal className="h-4 w-4" />
											</Button>
										</DropdownMenuTrigger>
										<DropdownMenuContent align="end">
											<DropdownMenuItem
												onClick={() =>
													setUpdateDialog(shortcode)
												}
											>
												Mettre à jour
											</DropdownMenuItem>
											<DropdownMenuItem
												onClick={() =>
													onDelete(shortcode.code)
												}
											>
												Supprimer
											</DropdownMenuItem>
										</DropdownMenuContent>
									</DropdownMenu>
								</TableCell>
							</TableRow>
						))}
					</TableBody>
				</Table>

				{shortcodeSelected && (
					<ShortcodeDialog
						onSave={onUpdate}
						shortcode={shortcodeSelected}
						open={shortcodeSelected ? true : false}
						setOpen={() => setUpdateDialog(null)}
					/>
				)}
			</div>
		</div>
	);
}