import { useState } from "react";
import { Wand2 } from "lucide-react";
import Button from "../twui/layout/Button";
import fetchApi from "../twui/utils/fetch/fetchApi";
import type { ApiReqParams } from "@/src/types";

type Props = {
    onGrab?: (ip: string) => void;
};

export default function GrabNextSubnetButton({ onGrab }: Props) {
    const [grabbing, setGrabbing] = useState(false);

    function grabNextSubnet() {
        setGrabbing(true);

        fetchApi<ApiReqParams, { success: boolean; msg?: string }>(
            `/api/admin/grab-next-available-private-ip`,
            { method: "POST" },
        )
            .then((res) => {
                if (res?.success && res.msg) {
                    onGrab?.(res.msg);
                }
            })
            .finally(() => {
                setGrabbing(false);
            });
    }

    return (
        <Button
            title="Grab Next Available Subnet"
            variant="outlined"
            color="primary"
            beforeIcon={<Wand2 size={16} />}
            loading={grabbing}
            onClick={(e) => {
                e.preventDefault();
                grabNextSubnet();
            }}
        >
            Grab Next Subnet
        </Button>
    );
}