"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";
import IUser from "@/interfaces/IUser";
import hasPermissions from "@/lib/hasPermissions";

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

export function ShortcodeTable({
	shortcodes,
	onUpdate,
	onDelete,
	onAdd,
	user,
}: ShortcodeTableProps) {
	const [shortcodeSelected, setUpdateDialog] = useState<IShortcode | null>(
		null,
	);
	const [addDialog, setAddDialog] = useState<boolean>(false);
	return (
		<div>
			{hasPermissions(user.roles, { shortcodes: ["insert"] }) && (
				<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">
											{hasPermissions(user.roles, {
												shortcodes: ["update"],
											}) && (
												<DropdownMenuItem
													onClick={() =>
														setUpdateDialog(
															shortcode,
														)
													}
												>
													Mettre à jour
												</DropdownMenuItem>
											)}
											{hasPermissions(user.roles, {
												shortcodes: ["delete"],
											}) && (
												<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>
	);
}