"use client";

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

interface ShortcodeDialogProps {
	onSave: (shortcode: Omit<IShortcode, "id">) => void;
}

export default function ShortcodeDialog({ onSave }: ShortcodeDialogProps) {
	const [open, setOpen] = useState(false);
	const [code, setCode] = useState("");
	const [type, setType] = useState<"value" | "media">("value");
	const [value, setValue] = useState("");
	const [mediaId, setMediaId] = useState("");

	const handleSave = () => {
		onSave({ code, type, value, media_id: mediaId });
		setOpen(false);
		resetForm();
	};

	const resetForm = () => {
		setCode("");
		setType("value");
		setValue("");
		setMediaId("");
	};

	return (
		<Dialog open={open} onOpenChange={setOpen}>
			<DialogTrigger asChild>
				<Button variant="outline">Add New Shortcode</Button>
			</DialogTrigger>
			<DialogContent className="sm:max-w-[425px]">
				<DialogHeader>
					<DialogTitle>Add New Shortcode</DialogTitle>
					<DialogDescription>
						Create a new shortcode here. Click save when you're
						done.
					</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={code}
							onChange={(e) => setCode(e.target.value)}
							className="col-span-3"
						/>
					</div>
					<Tabs
						defaultValue={type}
						onValueChange={(v) => setType(v as "value" | "media")}
						className="w-full"
					>
						<TabsList className="grid w-full grid-cols-2">
							<TabsTrigger value="value">Value</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">
									Value
								</Label>
								<Input
									id="value"
									value={value}
									onChange={(e) => setValue(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={mediaId}
									onChange={(e) => setMediaId(e.target.value)}
									className="col-span-3"
								/>
							</div>
						</TabsContent>
					</Tabs>
				</div>
				<DialogFooter>
					<Button type="submit" onClick={handleSave}>
						Save shortcode
					</Button>
				</DialogFooter>
			</DialogContent>
		</Dialog>
	);
}