import React, { useState } from "react";
import { useForm } from "@inertiajs/react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
    Table,
    TableHeader,
    TableRow,
    TableHead,
    TableBody,
    TableCell,
} from "@/components/ui/table";
import {
    Dialog,
    DialogTrigger,
    DialogContent,
    DialogHeader,
    DialogTitle,
    DialogFooter,
} from "@/components/ui/dialog";
import { Plus, Pencil, Trash2 } from "lucide-react";
import AuthenticatedLayout from "@/layouts/authenticated-layout";
import { Head } from "@inertiajs/react";
import { Toaster } from "@/components/ui/toaster";

interface Menu {
    id: number | null;
    name: string;
    is_active: boolean;
}

export default function Index({ menus }: { menus: Menu[] }) {
    const {
        data,
        setData,
        post,
        put,
        delete: destroy,
        reset,
    } = useForm<Menu>({
        id: null,
        name: "",
        is_active: true,
    });

    const [isModalOpen, setIsModalOpen] = useState(false);
    const [editing, setEditing] = useState(false);

    return (
        <AuthenticatedLayout header="Manajemen Menu">
            <Head title="Manajemen Menu" />
            <div className="container mx-auto p-4">
                <Button
                    onClick={() => {
                        setEditing(false);
                        reset();
                        setIsModalOpen(true);
                    }}
                >
                    <Plus className="h-4 w-4" /> Tambah Menu
                </Button>
                <Table>
                    <TableHeader>
                        <TableRow>
                            <TableHead>Nama Menu</TableHead>
                            <TableHead>Aksi</TableHead>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        {menus.map((menu) => (
                            <TableRow key={menu.id}>
                                <TableCell>{menu.name}</TableCell>
                                <TableCell>
                                    <Button
                                        onClick={() => {
                                            setEditing(true);
                                            setIsModalOpen(true);
                                            setData(menu);
                                        }}
                                    >
                                        <Pencil className="h-4 w-4" />
                                    </Button>
                                    <Button
                                        onClick={() =>
                                            destroy(`/menus/${menu.id}`)
                                        }
                                        variant="destructive"
                                    >
                                        <Trash2 className="h-4 w-4" />
                                    </Button>
                                </TableCell>
                            </TableRow>
                        ))}
                    </TableBody>
                </Table>
            </div>
            <Toaster />
        </AuthenticatedLayout>
    );
}
