import getData from "@/utils/fetch";
import { useQuery } from "@tanstack/react-query";
import { Checkbox, Label, Radio } from "flowbite-react";
import { FC, useState } from "react";
import { useFormContext } from "react-hook-form";



const FiberProduct: FC = () => {
    const {
        setValue,
    } = useFormContext();

    let url = `/api/v1/fiber-product`;
    const getFiberProduct = async () => {
        const data = await getData(url);
        return data?.data;
    };
    const {
        data: products,
    } = useQuery({
        queryKey: ["fiber-product"],
        queryFn: () => getFiberProduct(),
        refetchOnWindowFocus: false,
    });
    return (<>
        <div>
            {products?.map((product: any) => (
                <div className="flex gap-4 m-1 " key={product.id} onClick={() => setValue("cable_id", product.id)}>
                    <Radio id={`fiber-${product.id}`} name="fiber_optic" value={product.id} />
                    <Label htmlFor={`fiber-${product.id}`} key={product.id} className="flex gap-2 cursor-pointer">
                        <div>{product?.product?.name}</div>
                        <div>brand:{product?.brand}</div>
                        <div>status:{product?.status}</div>
                        <div>{product?.quantity_remaining}</div>
                        <div className="lowercase">{product?.unit_type} in stock,</div>
                        <div> unit price: {product?.unit_sell_price}</div>
                    </Label>
                </div>
            ))}
            {products?.length > 0 && (
                <div className="flex gap-2 mt-2 cursor-pointer">
                    <Label htmlFor="cable_invoice" className="block cursor-pointer">Invoice for cable</Label>
                    <div className="">
                        <Checkbox name="cable_invoice" id="cable_invoice" onChange={(event: any) => setValue("cable_invoice", event?.target?.checked ? 1 : 0)} />
                    </div>
                </div>
            )}

        </div>
    </>)
}

export default FiberProduct;