"use client"

import * as React from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { VendorsListTable } from "./vendor-list/vendor-list-table"

interface VendorsListTableProps {
    rfqId: number  // so we know which RFQ to insert into
  }
  

/**
 * A dialog that contains a client-side table or infinite scroll
 * for "all vendors," allowing the user to select vendors and add them to the RFQ.
 */
export function AddVendorDialog({ rfqId }: VendorsListTableProps) {
    const [open, setOpen] = React.useState(false)

    return (
        <Dialog open={open} onOpenChange={setOpen}>
            <DialogTrigger asChild>
                <Button size="sm">
                    Add Vendor
                </Button>
            </DialogTrigger>
            <DialogContent className="max-w-[90wv]  sm:max-h-[80vh] overflow-auto" style={{maxWidth:1600, height:680}}>
                <DialogHeader>
                    <DialogTitle>Add Vendor to RFQ</DialogTitle>
                </DialogHeader>

                <VendorsListTable rfqId={rfqId}/>

            </DialogContent>
        </Dialog>
    )
}