import React, { useState } from "react";
import { Button } from "@/components/ui/button";
import { Form } from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
    Dialog,
    DialogContent,
    DialogHeader,
    DialogTitle,
    DialogFooter,
} from "@/components/ui/dialog";
import { useNavigate } from "react-router-dom";

interface AddIpalModalProps {
    isOpen: boolean;
    onClose: () => void;
    idPelaporan: string;
}

const AddIpalModal: React.FC<AddIpalModalProps> = ({
    isOpen,
    onClose,
    idPelaporan,
}) => {
    const [nomor, setNomor] = useState<string>("");
    const [nama, setNama] = useState<string>("");

    const navigate = useNavigate(); // Untuk navigasi setelah form disubmit

    // Fungsi untuk handle form submission
    const handleSubmit = async (event: React.FormEvent) => {
        event.preventDefault();

        const response = await fetch(
            `/pelaporan/al/ipal/add_ipal/${idPelaporan}`,
            {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                },
                body: JSON.stringify({
                    nomor,
                    nama,
                }),
            }
        );

        if (response.ok) {
            // Redirect atau close modal setelah berhasil simpan
            onClose();
            navigate(`/admin/pelaporan/al/ipal`); // Sesuaikan dengan halaman yang diinginkan
        } else {
            // Menangani error atau validasi
            alert("Gagal menyimpan data.");
        }
    };

    return (
        <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
            <DialogContent>
                <DialogHeader>
                    <DialogTitle>
                        Pengelolaan Air Limbah - Instalasi Pengolah Air Limbah
                    </DialogTitle>
                </DialogHeader>

                <form onSubmit={handleSubmit} className="space-y-4">
                    <div className="space-y-4">
                        <div className="space-y-2">
                            <Label htmlFor="nomor">Nomor IPAL:</Label>
                            <Input
                                id="nomor"
                                name="nomor"
                                type="text"
                                value={nomor}
                                onChange={(e) => setNomor(e.target.value)}
                                required
                            />
                        </div>

                        <div className="space-y-2">
                            <Label htmlFor="nama">Nama IPAL:</Label>
                            <Input
                                id="nama"
                                name="nama"
                                type="text"
                                value={nama}
                                onChange={(e) => setNama(e.target.value)}
                                required
                            />
                        </div>
                    </div>

                    <DialogFooter className="mt-4">
                        <Button type="submit">
                            <i className="fa fa-save"></i> Simpan
                        </Button>
                    </DialogFooter>
                </form>
            </DialogContent>
        </Dialog>
    );
};

export default AddIpalModal;