import { Button } from "./ui/button";
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "./ui/dialog";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";

export function Parameters(
    props: {
        isOpen: boolean,
        onSubmit: () => void,
    }
) {
    return <>
        {/* <Dialog open={props.isOpen}> */}
        <Dialog >
            <form>
                <DialogTrigger asChild>
                    <Button variant="outline">Open Parameters</Button>
                </DialogTrigger>
                <DialogContent className="sm:max-w-[425px]">
                    <DialogHeader>
                        <DialogTitle>Parameters</DialogTitle>
                    </DialogHeader>
                    <Select>
                        <SelectTrigger className="w-[180px]">
                            <SelectValue placeholder="Metric to Visualize" />
                        </SelectTrigger>
                        <SelectContent>
                            <SelectItem value="qmprice">Price per squaremeter</SelectItem>
                            <SelectItem value="rooms">Number of rooms</SelectItem>
                            <SelectItem value="qm">Area</SelectItem>
                            <SelectItem value="total_price">Price</SelectItem>
                        </SelectContent>
                    </Select>
                    <DialogFooter>
                        <Button onClick={() => props.onSubmit()}>Fetch Data</Button>
                    </DialogFooter>
                </DialogContent>
            </form>
        </Dialog>
    </>
}