CoreControl/components/dialogues/EditNetwork.tsx

"use client";

import { useState } from "react";
import ErrorToast from "@/components/Error";
import SuccessToast from "@/components/Success";
import useNetworks from "@/hooks/useNetworks";
import { Network } from "@/app/types";

interface EditNetworkProps {
    onNetworkAdded?: () => void;
    siteId: string;
    network: Network;
}

export default function EditNetwork({ onNetworkAdded, siteId, network }: EditNetworkProps) {
    const [editName, setEditName] = useState(network.name);
    const [editIpv4Subnet, setEditIpv4Subnet] = useState(network.ipv4Subnet);
    const [editIpv6Subnet, setEditIpv6Subnet] = useState(network.ipv6Subnet);
    const [editGateway, setEditGateway] = useState(network.gateway);
    const [error, setError] = useState("");
    const [success, setSuccess] = useState("");
    const { editNetwork } = useNetworks();
    

    return (
        <div>
            <dialog id="edit_network" className="modal">
                <div className="modal-box w-2/3 max-w-2/3">
                    <div className="flex flex-col gap-4">
                        <header>
                            <h3 className="text-2xl font-semibold tracking-tight">Edit Network</h3>
                            <p className="text-sm text-gray-500 mt-1">Provide details for the network</p>
                        </header>
    
                        <div className="space-y-4">
                            <div className="form-control">
                                <label className="label">
                                    <span className="label-text font-medium text-base">Network Name</span>
                                </label>
                                <input 
                                    type="text" 
                                    className="input input-bordered w-full focus:ring-2" 
                                    placeholder="e.g. VLAN 10"
                                    value={editName}
                                    onChange={(e) => setEditName(e.target.value)}
                                />
                            </div>

                            <div className="form-control">
                                <label className="label">
                                    <span className="label-text font-medium text-base">
                                        IPv4 Subnet
                                    </span>
                                    <span className="ml-2 text-sm font-normal text-gray-400">(optional)</span>
                                </label>
                                <input 
                                    type="text" 
                                    className="input input-bordered w-full focus:ring-2" 
                                    placeholder="Enter the IPv4 subnet"
                                    value={editIpv4Subnet}
                                    onChange={(e) => setEditIpv4Subnet(e.target.value)}
                                />
                            </div>
                            <div className="form-control">
                                <label className="label">
                                    <span className="label-text font-medium text-base">
                                        IPv6 Subnet
                                    </span>
                                    <span className="ml-2 text-sm font-normal text-gray-400">(optional)</span>
                                </label>
                                <input 
                                    type="text" 
                                    className="input input-bordered w-full focus:ring-2" 
                                    placeholder="Enter the IPv6 subnet"
                                    value={editIpv6Subnet}
                                    onChange={(e) => setEditIpv6Subnet(e.target.value)}
                                />
                            </div>
                            <div className="form-control">
                                <label className="label">
                                    <span className="label-text font-medium text-base">
                                        Gateway
                                    </span>
                                    <span className="ml-2 text-sm font-normal text-gray-400">(optional)</span>
                                </label>
                                <input 
                                    type="text" 
                                    className="input input-bordered w-full focus:ring-2" 
                                    placeholder="Enter the gateway"
                                    value={ editGateway}
                                    onChange={(e) => setEditGateway(e.target.value)}
                                />
                            </div>
                        </div>

                        <div className="modal-action flex justify-end">
                            <form method="dialog" className="flex gap-3">
                                <button className="btn btn-ghost">Cancel</button>
                                <button className="btn btn-primary px-6" onClick={() => editNetwork({ id: network.id, siteId, name: editName, ipv4Subnet: editIpv4Subnet, ipv6Subnet: editIpv6Subnet, gateway: editGateway })}>Edit Network</button>
                            </form>
                        </div>
                    </div>
                </div>
            </dialog>
            <ErrorToast message={error} show={error !== ''} onClose={() => setError('')} />
            <SuccessToast message={success} show={success !== ''} onClose={() => setSuccess('')} />
        </div>
    )
}