import React, { useState } from "react";
import {
    Dialog,
    DialogContent,
    DialogHeader,
    DialogTitle,
    DialogFooter,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";

interface Parameter {
    id: number;
    name: string;
    value: string;
}

interface ParameterUjiLabModalProps {
    open: boolean;
    onClose: () => void;
}

const ParameterUjiLabModal: React.FC<ParameterUjiLabModalProps> = ({
    open,
    onClose,
}) => {
    const [parameters, setParameters] = useState<Parameter[]>([]);

    const addParameter = () => {
        const newParam: Parameter = {
            id: Date.now(),
            name: "",
            value: "",
        };
        setParameters([...parameters, newParam]);
    };

    const updateParameter = (
        id: number,
        field: keyof Parameter,
        value: string
    ) => {
        setParameters(
            parameters.map((param) =>
                param.id === id ? { ...param, [field]: value } : param
            )
        );
    };

    const handleSave = () => {
        // Lakukan penyimpanan data parameter uji lab
        onClose();
    };

    return (
        <Dialog open={open} onOpenChange={onClose}>
            <DialogContent>
                <DialogHeader>
                    <DialogTitle>Parameter Uji Lab</DialogTitle>
                </DialogHeader>
                <div className="space-y-4 my-4">
                    {parameters.map((param) => (
                        <div key={param.id} className="flex gap-2 items-center">
                            <Input
                                value={param.name}
                                onChange={(e) =>
                                    updateParameter(
                                        param.id,
                                        "name",
                                        e.target.value
                                    )
                                }
                                placeholder="Nama Parameter"
                            />
                            <Input
                                value={param.value}
                                onChange={(e) =>
                                    updateParameter(
                                        param.id,
                                        "value",
                                        e.target.value
                                    )
                                }
                                placeholder="Nilai Parameter"
                            />
                        </div>
                    ))}
                    <Button variant="outline" onClick={addParameter}>
                        Tambah Parameter
                    </Button>
                </div>
                <DialogFooter>
                    <Button variant="outline" onClick={onClose}>
                        Batal
                    </Button>
                    <Button onClick={handleSave}>Simpan</Button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
};

export default ParameterUjiLabModal;