import { zodResolver } from "@hookform/resolvers/zod";
import { DialogTitle } from "@radix-ui/react-dialog";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { Button } from "./ui/button";
import { Dialog, DialogContent, DialogTrigger } from "./ui/dialog";
import { Form, FormControl, 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 interface ParameterValues {
    metric: Metric
    listing_type: ListingType
    max_price?: number
}

export function Parameters(
    props: {
        isOpen: boolean,
        onSubmit: (fromValues: ParameterValues) => void,
    }
) {
    const {
        register,
    } = useForm<ParameterValues>()
    // const onSubmit: SubmitHandler<ParameterValues> = (data) => console.log(data)

    const formSchema = z.object({
        metric: z.nativeEnum(Metric, { required_error: "Metric is required" }),
        listing_type: z.nativeEnum(ListingType, { required_error: "Listing Type is required" }),
        max_price: z.number().optional(),
    })
    const form = useForm<z.infer<typeof formSchema>>({
        resolver: zodResolver(formSchema),
        defaultValues: {
            metric: Metric.qmprice,
            max_price: 3000,
        },
    })
    // 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)
        props.onSubmit(values)
    }


    return <>
        <Dialog >
            <DialogTrigger asChild>
                <Button variant="outline">Open Parameters</Button>
            </DialogTrigger>
            <DialogContent className="sm:max-w-[425px]">
                <DialogTitle>
                    Visualization Parameters
                </DialogTitle>

                <Form {...form}>
                    <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
                        <FormField
                            control={form.control}
                            name="metric"
                            render={({ field }) => (
                                <FormItem>
                                    <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>
                                    <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="max_price"
                            render={({ field }) => (
                                <FormItem>
                                    <FormLabel>Max price</FormLabel>
                                    <FormControl >
                                        <Input type="number" placeholder={"£"} {...field} onChange={(e) => field.onChange(Number(e.target.value))} />
                                    </FormControl>
                                    <FormMessage />

                                </FormItem>
                            )}
                        />

                        <Button type="submit">Submit</Button>
                    </form>
                </Form>
            </DialogContent>
        </Dialog>
    </>
}