"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import {
	Dialog,
	DialogContent,
	DialogDescription,
	DialogFooter,
	DialogHeader,
	DialogTitle,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import type IShortcode from "@/interfaces/IShortcode";

interface ShortcodeDialogProps {
	onSave: (shortcode: IShortcode) => void;
	open: boolean;
	setOpen: () => void;
	shortcode?: IShortcode;
}

export default function ShortcodeDialog({
	onSave,
	open,
	setOpen,
	shortcode,
}: ShortcodeDialogProps) {
	const [_shortcode, setShortcode] = useState<IShortcode>(
		shortcode ?? { code: "", type: "", id: 0 },
	);

	const handleSave = () => {
		onSave(_shortcode);
		setOpen();
		resetForm();
	};

	const resetForm = () => {
		setShortcode({ code: "", type: "", id: 0 });
	};

	return (
		<Dialog open={open} onOpenChange={setOpen}>
			<DialogContent className="sm:max-w-[425px]">
				<DialogHeader>
					<DialogTitle>Ajouter un nouveau shortcode</DialogTitle>
					<DialogDescription>
						Créer un nouveau shortcode ici. Cliquez enregistrer
						quand vous avez fini.
					</DialogDescription>
				</DialogHeader>
				<div className="grid gap-4 py-4">
					<div className="grid grid-cols-4 items-center gap-4">
						<Label htmlFor="code" className="text-right">
							Code
						</Label>
						<Input
							id="code"
							value={_shortcode.code}
							onChange={(e) =>
								setShortcode((p) => ({
									...p,
									code: e.target.value,
								}))
							}
							className="col-span-3"
						/>
					</div>
					<Tabs
						defaultValue={_shortcode.type}
						onValueChange={(v) =>
							setShortcode((p) => ({ ...p, type: v }))
						}
						className="w-full"
					>
						<TabsList className="grid w-full grid-cols-2">
							<TabsTrigger value="value">Valeur</TabsTrigger>
							<TabsTrigger value="media">Media</TabsTrigger>
						</TabsList>
						<TabsContent value="value">
							<div className="grid grid-cols-4 items-center gap-4">
								<Label htmlFor="value" className="text-right">
									Valeur
								</Label>
								<Input
									id="value"
									value={_shortcode.value}
									onChange={(e) =>
										setShortcode((p) => ({
											...p,
											value: e.target.value,
										}))
									}
									className="col-span-3"
								/>
							</div>
						</TabsContent>
						<TabsContent value="media">
							<div className="grid grid-cols-4 items-center gap-4">
								<Label htmlFor="mediaId" className="text-right">
									Media ID
								</Label>
								<Input
									id="mediaId"
									value={_shortcode.media_id}
									onChange={(e) =>
										setShortcode((p) => ({
											...p,
											media_id: e.target.value,
										}))
									}
									className="col-span-3"
								/>
							</div>
						</TabsContent>
					</Tabs>
				</div>
				<DialogFooter>
					<Button type="submit" onClick={handleSave}>
						Enregistrer
					</Button>
				</DialogFooter>
			</DialogContent>
		</Dialog>
	);
}