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, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "./ui/form";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";


enum Metric {
    qmprice = 'Price per square meter',
    rooms = 'Number of rooms',
    qm = 'Area',
    price = 'Price',
}


interface ParameterValues {
    metric: Metric
}

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

    const formSchema = z.object({
        metric: z.nativeEnum(Metric, { required_error: "Metric is required" }),
    })
    const form = useForm<z.infer<typeof formSchema>>({
        resolver: zodResolver(formSchema),
        defaultValues: {
            metric: Metric.qmprice,
        },
    })
    // 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>
                                    <FormDescription>
                                        This is your public display name.
                                    </FormDescription>
                                    <FormMessage />
                                </FormItem>
                            )}
                        />
                        <Button type="submit">Submit</Button>
                    </form>
                </Form>
            </DialogContent>
        </Dialog>
    </>
}