wrongmove/crawler/frontend/src/components/Parameters.tsx

import { zodResolver } from "@hookform/resolvers/zod";
import { DialogTitle } from "@radix-ui/react-dialog";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { Button } from "./ui/button";
import { Calendar29 } from "./ui/DatePicker";
import { Dialog, DialogContent, DialogTrigger } from "./ui/dialog";
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "./ui/form";
import { Input } from "./ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";


export enum Metric {
    qmprice = 'qmprice',
    rooms = 'rooms',
    qm = 'qm',
    price = 'total_price',
}
export enum ListingType {
    RENT = 'RENT',
    BUY = 'BUY'
}

export enum FurnishType {
    FURNISHED = 'furnished',
    PART_FURNISHED = 'partFurnished',
    UNFURNISHED = 'unfurnished',
}


export interface ParameterValues {
    metric: Metric
    listing_type: ListingType
    min_bedrooms?: number
    max_bedrooms?: number
    min_price?: number
    max_price?: number
    min_sqm?: number
    max_sqm?: number
    min_price_per_sqm?: number
    max_price_per_sqm?: number
    last_seen_days?: number
    available_from?: Date
    district: string
    furnish_types?: FurnishType[]
}

export function Parameters(
    props: {
        isOpen: boolean,
        onSubmit: (action: 'fetch-data' | 'visualize', fromValues: ParameterValues) => void,
        setIsOpen: (isOpen: boolean) => void
    }
) {
    const {
        register,
    } = useForm<ParameterValues>()
    const [action, setAction] = useState<'fetch-data' | 'visualize' | null>(null)
    const [availableFromRawInput, setAvailableFromRawInput] = useState("now");

    const formSchema = z.object({
        metric: z.nativeEnum(Metric, { required_error: "Metric is required" }),
        listing_type: z.nativeEnum(ListingType, { required_error: "Listing Type is required" }),
        min_bedrooms: z.number().min(1).max(10).optional(),
        max_bedrooms: z.number().min(1).max(10).optional(),
        max_price: z.number().optional(),
        min_price: z.number().min(0).optional(),
        min_sqm: z.number().optional(),
        last_seen_days: z.number().min(0).optional(),
        available_from: z.date(),
        district: z.string()
    })
    const form = useForm<z.infer<typeof formSchema>>({
        resolver: zodResolver(formSchema),
        defaultValues: {
            metric: Metric.qmprice,
            listing_type: ListingType.RENT,
            min_bedrooms: 1,
            max_bedrooms: 3,
            max_price: 3000,
            min_price: 2000,
            min_sqm: 50,
            last_seen_days: 28,
            available_from: new Date(),
            district: ''
        },
    })
    // 2. Define a submit handler.
    function onSubmit(values: z.infer<typeof formSchema>) {
        // Do something with the form values.
        // ✅ This will be type-safe and validated.
        console.log(values)
        if (action) {
            props.onSubmit(action, values)
        }
    }



    return <>
        <Dialog open={props.isOpen} onOpenChange={props.setIsOpen} >
            {/* <Dialog > */}
            <DialogTrigger asChild>
                <Button variant="outline" onClick={() => props.setIsOpen(true)}>Open Parameters</Button>
            </DialogTrigger>
            <DialogContent className="sm:max-w-[425px]">
                <DialogTitle>
                    Visualization Parameters
                </DialogTitle>

                <Form {...form}>
                    <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
                        <FormField
                            control={form.control}
                            name="metric"
                            render={({ field }) => (
                                <FormItem className="flex flex-row items-center gap-4">
                                    <FormLabel>Metric to visualize</FormLabel>
                                    <Select onValueChange={field.onChange} defaultValue={field.value}>
                                        <FormControl>
                                            <SelectTrigger className="w-[180px]">
                                                <SelectValue placeholder="Metric to Visualize" />
                                            </SelectTrigger>
                                        </FormControl>
                                        <SelectContent {...register('metric')} >
                                            <SelectItem value={Metric.qmprice}>Price per squaremeter</SelectItem>
                                            <SelectItem value={Metric.rooms}>Number of rooms</SelectItem>
                                            <SelectItem value={Metric.qm}>Area</SelectItem>
                                            <SelectItem value={Metric.price}>Price</SelectItem>
                                        </SelectContent>
                                    </Select>
                                    <FormMessage />
                                </FormItem>
                            )}
                        />
                        <FormField
                            control={form.control}
                            name="listing_type"
                            render={({ field }) => (
                                <FormItem className="flex flex-row items-center gap-4">
                                    <FormLabel>Listing Type</FormLabel>
                                    <FormControl >
                                        <Select onValueChange={field.onChange} defaultValue={field.value}>
                                            <FormControl>
                                                <SelectTrigger className="w-[180px]">
                                                    <SelectValue placeholder="Metric to Visualize" />
                                                </SelectTrigger>
                                            </FormControl>
                                            <SelectContent >
                                                <SelectItem value={ListingType.BUY}>To buy</SelectItem>
                                                <SelectItem value={ListingType.RENT}>To rent</SelectItem>
                                            </SelectContent>
                                        </Select>
                                    </FormControl>
                                    <FormMessage />
                                </FormItem>
                            )}
                        />
                        <FormField
                            control={form.control}
                            name="min_sqm"
                            render={({ field }) => (
                                <FormItem className="flex flex-row items-center gap-4">
                                    <FormLabel>Min square meters</FormLabel>
                                    <FormControl >
                                        <Input type="number" placeholder={"m²"} {...field} onChange={(e) => field.onChange(Number(e.target.value))} />
                                    </FormControl>
                                    <FormMessage />
                                </FormItem>
                            )}
                        />
                        <FormField
                            control={form.control}
                            name="min_bedrooms"
                            render={({ field }) => (
                                <FormItem className="flex flex-row items-center gap-4">
                                    <FormLabel>Minimum number of bedrooms</FormLabel>
                                    <FormControl >
                                        <Input type="number" placeholder={"# bedrooms"} {...field} onChange={(e) => field.onChange(Number(e.target.value))} />
                                    </FormControl>
                                    <FormMessage />
                                </FormItem>
                            )}
                        />
                        <FormField
                            control={form.control}
                            name="max_bedrooms"
                            render={({ field }) => (
                                <FormItem className="flex flex-row items-center gap-4">
                                    <FormLabel>Maximum number of bedrooms</FormLabel>
                                    <FormControl >
                                        <Input type="number" placeholder={"# bedrooms"} {...field} onChange={(e) => field.onChange(Number(e.target.value))} />
                                    </FormControl>
                                    <FormMessage />
                                </FormItem>
                            )}
                        />
                        <FormField
                            control={form.control}
                            name="min_price"
                            render={({ field }) => (
                                <FormItem className="flex flex-row items-center gap-4">
                                    <FormLabel>Min price</FormLabel>
                                    <FormControl >
                                        <Input type="number" placeholder={"£"} {...field} onChange={(e) => field.onChange(Number(e.target.value))} />
                                    </FormControl>
                                    <FormMessage />
                                </FormItem>
                            )}
                        />
                        <FormField
                            control={form.control}
                            name="max_price"
                            render={({ field }) => (
                                <FormItem className="flex flex-row items-center gap-4">
                                    <FormLabel>Max price</FormLabel>
                                    <FormControl >
                                        <Input type="number" placeholder={"£"} {...field} onChange={(e) => field.onChange(Number(e.target.value))} />
                                    </FormControl>
                                    <FormMessage />
                                </FormItem>
                            )}
                        />
                        <FormField
                            control={form.control}
                            name="available_from"
                            render={({ field }) => (
                                <FormItem className="flex flex-col">
                                    <FormLabel>Available from</FormLabel>
                                    <FormControl>
                                        <Calendar29 onSelect={field.onChange} selected={field.value} rawInputValue={availableFromRawInput} onChangeRawInputValue={setAvailableFromRawInput} />
                                    </FormControl>
                                    <FormDescription>
                                        Applicable for renting listings only
                                    </FormDescription>
                                    <FormMessage />
                                </FormItem>
                            )}
                        />
                        <FormField
                            control={form.control}
                            name="last_seen_days"
                            render={({ field }) => (
                                <FormItem className="flex flex-row items-center gap-4">
                                    <FormLabel>Last seen days</FormLabel>
                                    <FormControl >
                                        <Input type="number" placeholder={"days"} {...field} onChange={(e) => field.onChange(Number(e.target.value))} />
                                    </FormControl>
                                    <FormMessage />
                                </FormItem>
                            )}
                        />

                        <Button type="submit" value={"visualize"} onClick={() => setAction("visualize")}>Visualize existing data</Button>
                        <Button type="submit" value={"fetch-data"} onClick={() => setAction("fetch-data")}>Submit data refresh job</Button>
                    </form>
                </Form>
            </DialogContent>
        </Dialog>
    </>
}